react native flatlist

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;

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

1<FlatList
2    contentContainerStyle={{flexGrow: 1, justifyContent: 'center'}}
3    //... other props
4/>

1<FlatList
2    data={this.state.newsFeed}
3    refreshing={this.state.refreshing}
4    horizontal={this.state.isHorizontal}
5    ref={ref => { this.newsFeedListRef = ref; }}
6    renderItem={this.renderNewsFeedRow.bind(this)}
7    keyExtractor={(item, index) => `feed_${index}`}
8    onRefresh={this.__handleNewsFeedOnRefresh.bind(this)}
9    //renderScrollComponent={this.renderScrollComponent.bind(this)}
10    ListHeaderComponent={this.renderListHeaderComponent.bind(this)}
11    getItemLayout={(data, index) => ({ index, length: ITEM_HEIGHT, offset: (ITEM_HEIGHT * index) })} />
12

1There is no specific component like it is in react-native to do this kind of stuff, so I usually just use map() to achieve this kind of things.
2
3But if it is reusable you can surely create a List component for yourself so that you don't write map() function each time for the same list.
4
5Kind of like this:
6
7function Item(props) {
8   return <li>{props.value}</li>;
9}
10
11function MyList(items) {
12   return (
13    <ul>
14      {items.map((item) => <Item key={item.key} value={item} />)}
15    </ul>
16  );
17}