1const [isFetching, setIsFetching] = useState(false);
2
3const fetchData = () => {
4 dispatch(getAllTopicAction(userParamData));
5 setIsFetching(false);
6};
7
8const onRefresh = () => {
9 setIsFetching(true);
10 fetchData();
11};
12
13<FlatList
14 data={topics}
15 keyExtractor={(item) => item.id.toString()}
16 renderItem={renderItem}
17 onRefresh={onRefresh}
18 refreshing={isFetching}
19 progressViewOffset={100}
20 ListEmptyComponent={<Empty message="No data found." />}
21/>;
22
1<FlatList
2 data={[{name: 'a'}, {name: 'b'}]}
3 renderItem={
4 ({item}) => <Text>{item.name}</Text>
5 }
6 keyExtractor={(item, index) => index.toString()}
7/>
8
1import React from 'react';
2import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
3
4const DATA = [
5 {
6 id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
7 title: 'First Item',
8 },
9 {
10 id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
11 title: 'Second Item',
12 },
13 {
14 id: '58694a0f-3da1-471f-bd96-145571e29d72',
15 title: 'Third Item',
16 },
17];
18
19const Item = ({ title }) => (
20 <View style={styles.item}>
21 <Text style={styles.title}>{title}</Text>
22 </View>
23);
24
25const App = () => {
26 const renderItem = ({ item }) => (
27 <Item title={item.title} />
28 );
29
30 return (
31 <SafeAreaView style={styles.container}>
32 <FlatList
33 data={DATA}
34 renderItem={renderItem}
35 keyExtractor={item => item.id}
36 />
37 </SafeAreaView>
38 );
39}
40
41const styles = StyleSheet.create({
42 container: {
43 flex: 1,
44 marginTop: StatusBar.currentHeight || 0,
45 },
46 item: {
47 backgroundColor: '#f9c2ff',
48 padding: 20,
49 marginVertical: 8,
50 marginHorizontal: 16,
51 },
52 title: {
53 fontSize: 32,
54 },
55});
56
57export default App;
1// In App.js in a new project
2
3import * as React from 'react';
4import { View, Text } from 'react-native';
5import { NavigationContainer } from '@react-navigation/native';
6import { createStackNavigator } from '@react-navigation/stack';
7
8function HomeScreen() {
9 return (
10 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
11 <Text>Home Screen</Text>
12 </View>
13 );
14}
15
16const Stack = createStackNavigator();
17
18function App() {
19 return (
20 <NavigationContainer>
21 <Stack.Navigator>
22 <Stack.Screen name="Home" component={HomeScreen} />
23 </Stack.Navigator>
24 </NavigationContainer>
25 );
26}
27
28export default App;
1export default function App() {
2 const [enteredGoal,setEnteredGoal] = useState('');
3 const [courseGoals, setCourseGoals] = useState([]);
4 const goalInputHandler = (enteredText) => {
5 setEnteredGoal(enteredText);
6 }
7 const addGoalHandler = () => {
8 setCourseGoals(currentGoals =>
9 [...currentGoals,enteredGoal]
10 )
11 }
12
13 return (
14 <View style={styles.screen}>
15 <View>
16 <View style={styles.otherview}>
17 <TextInput
18 placeholder='A goal'
19 style={styles.textinput}
20 onChangeText={goalInputHandler}
21 value={enteredGoal}/>
22 <Button title='Add' onPress={addGoalHandler}/>
23 </View>
24 </View>
25 <ScrollView>
26 {courseGoals.map((goal) =>
27 <View key={goal} style={styles.listItem}>
28 <Text>{goal}</Text>
29 </View>)
30 }
31 </ScrollView>
32 </View>
1const [isFetching, setIsFetching] = useState(false);
2
3const fetchData = () => {
4 dispatch(getAllDataAction(userParamData));
5 setIsFetching(false);
6};
7
8const onRefresh = () => {
9 setIsFetching(true);
10 fetchData();
11};
12
13<FlatList
14 data={topics}
15 keyExtractor={(item) => item.id.toString()}
16 renderItem={renderItem}
17 onRefresh={onRefresh}
18 refreshing={isFetching}
19 progressViewOffset={100}
20 ListEmptyComponent={<Empty message="No data found." />}
21/>;
22