List of Cards in React Native Paper

Question

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.

score 3 · Answer 1 · answered Sep 19 '20 at 20:35

3

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>}
     />

answered Sep 19 '20 at 20:35

0raynaud

31
2

Thank you and I appreciate your answer but could you tell me why you recommend using a `` vs the `` in `react-native-paper`? I'm trying to educate myself a bit more on the purpose and use cases of the `` component. After all the purpose of `react-native-paper` and libraries like that is to help developers produce code that is compatible with both Android and iOS out of the box. Otherwise we'd have to get involved with the intricate details of both platforms. – Sam Sep 19 '20 at 20:42

score 2 · Answer 2 · answered Sep 19 '20 at 21:58

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 :(

List of Cards in React Native Paper

2 Answers2