React Native

1<View>
2  <Text>Hello</Text>
3  <Image source={{ uri: 'https://via.placeholder.com/150' }} />
4  <Button title="Click me" onPress={() => alert('Button pressed')} />
5</View>

1<Button title="Click me" onPress={() => alert('Button pressed')} />

1<TouchableOpacity onPress={() => alert('Button pressed')} />

1const styles = StyleSheet.create({
2  fontSize: 20,
3  color: 'white',
4  ...
5});

1import { createStackNavigator } from '@react-navigation/stack';
2
3const Stack = createStackNavigator({
4  Home: {
5    Component: HomeScreen,
6    options: {
7      title: 'Home',
8    },
9  },
10  Details: {
11    Component: DetailsScreen,
12  },
13});
14

1import { FlatList, Text } from 'react-native';
2
3const fruits = [{ id: '1', name: 'apple' }, { id: '2', name: 'banana' }, { id: '3', name: 'cherry' }, { id: '4', name: 'date' }, { id: '5', name: 'elderberry' }];
4
5
6const FruitsList = ({ data, renderItem }: { data: any[], renderItem: (item: any) => React.ReactNode }) => {
7  return <FlatList data={data} renderItem={({ item }) => <Text>{item.name}</Text>} />;
8};
9
10export default FruitsList;

1const fruits = [{ id: '1', name: 'apple' }, { id: '2', name: 'banana' }, { id: '3', name: 'cherry' }, { id: '4', name: 'date' }, { id: '5', name: 'elderberry' }];
2<FruitsList data={fruits} renderItem={({ item }) => <Text>{item.id}</Text>} />

1const fruits = [{ name: 'apple' }, {  name: 'banana' }, { name: 'cherry' }, { name: 'date' }, { name: 'elderberry' }];
2<FruitsList data={fruits} renderItem={({ item }) => <Text>{item.name}</Text>} keyExtractor={(item) => item.name} />

1const styles = StyleSheet.create({
2  marginVertical: number
3});

1<FruitsList data={fruits} renderItem={({ item }) => <Text>{item.name}</Text>} style={styles.container} />

1<FruitsList data={fruits} renderItem={({ item }) => <Text>{item.name}</Text>} horizontal />

1<FruitsList data={fruits} renderItem={({ item }) => <Text>{item.name}</Text>} vertical />

1<FruitsList data={fruits} renderItem={({ item }) => <Text>{item.name}</Text>} showsHorizontalScrollIndicator />

1<FruitsList data={fruits} renderItem={({ item }) => <Text>{item.name}</Text>} showsVerticalScrollIndicator />

1
2## Screen Navigation
3