List of Cards in React Native Paper

user_1705266 0
Viewed 3708

I want to have a vertical list of cards in my React Native app using react-native-paper. I'll be using the <Card> component that is part of react-native-paper.

Should I wrap the cards in a <FlatList> or the <List> component that is part of react-native-paper? I'm not sure exactly what the <List> component in react-native-paper corresponds to and whether it would be beneficial to use it to get better results both in Android and iOS.

react-native-paper react-native
2 Answers

I recommend you to use your Card inside a Flatlist, and if you want to use your flatlist as vertical it is default to vertical . If you want to use it horizontal you need to declare it inside as a boolean. Here is an example

  
    <FlatList
        data={yourData}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => <Card> ... </Card>}
     />
user_136276460

The benefit of using a <Flatlist> over other similar components is only elements you can see on screen render, so as you scroll more render. However other components like react-native <ScrollView> render all elements at once, thus reducing the performance of the app.

I have not heard of the <List> component and cannot say whether this applies :(

user_142498920
Related