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