React-native : Display a list view

For displaying list view, one of the good component is FlatList

Below is how to use a flat list. We can wrap it in a component like this below

We can make CustomListView as a component (i.e. extend the react Component)

In the renderer, have a Container and place the CustomList

The custom List can be just a different file that exports a CustomList which is just returning a View (not necessarily need to be another component)

This class is going to be basically exporting a function which is named as CustomList. Now, in the Custom List, it can have a View and multiple Rows for each row

Something like this below

const CustomListView = (props) => (
   
                        data={props.itemList}
                renderItem={({ item }) => (
                   
                                                    name={item.name}
                            status={item.status}
                            timestamp={item.timestamp}
                        />
                !TouchableOpacity> )
            }
                keyExtractor={item => item.key.toString()}
            />
     
    !View>
);

Now, CustomListRow is again an Exported method that returns the View which displays the given components.


References: