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.
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>}
/>
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 :(
Related
I am developing a React Native app with Relay. I was using a FlatList inside a ScrollView like this:
<ScrollView>
...
<Suspense>
<FlatList />
</Suspense>
</ScrollView>
I experienced issues with ondEndReached (it’s being called every time) so I moved to something like this:
<FlatList
ListHeaderComponent={...}
...
/>
That works properly (onEndReached is called when it has to), but as I am using Relay I have to use the Suspense to add a Spinner/Loader and if I wrap the FlatList in the Suspense it will suspense all the component (including the Header) and not only the items.
Do you have any idea about how to advance? One alternative is to make it work the FlatList inside the ScrollView and the other one, to make it work the Suspense only for the items from the FlatList. Thanks!
I need some help. I've made a custom list view with some animation (drag and drop). everything is working fine except when there is large number of data, its taking too much time to load the page/when navigating back from another page. Is there any technique where I can reduce the page loading time? Please do not suggest any external packages, and also I cannot use flatlist either, due to my Animated.Scrollview conflicting with Flatlist own Scrollview. I've searched online, and everyone is using flatlist, which i cannot use. Or is it possible to ignore FlatList Own ScrollView?
Found an alternate solution here. You can use FlatList for larger data. Then pass your Animated.ScrollView component as a props through FlatList.
renderScrollComponent={(props) => (
<Animated.ScrollView
{...props}
onScroll={(event) => {
onScroll({ y: feedScroll })(event)
props.onScroll(event)
}}
/>
)}
I worked with flat lists in React Native but I didn't find out, if it would be possible do make a kind of grid like you can see in the image. How could I do that? (The list is going on and on)
Well, I think the solution is to create ItemView for each section and each ItemView will be another FlatList with horizontal scrolling, so basically you will have one external list with vertical scrolling where each item is FlatList with horizontal scrolling customised by index of the external list.
with numColumns prop, multiple columns can be rendered.
<FlatList
data={listItems}
numColumns={2}
ItemSeparatorComponent={ItemSeparatorView}
renderItem={ItemView}
keyExtractor={(item) => item.id.toString()}
/>
checkout this example
I have this particular component above a Flatlist which renders my cards, and I want to make them both scrollable. I tried to nest them with a ScrollView:
<ScrollView>
<MainImage/>
<FlatList />
</ScrollView>
It works but my flatlist lost its ability to constrain memory, since I have a lot of data to render the app lags till crash.
If remove the ScrollView from my MainImage component it gets stuck on the screen and the cards scrolls behind it which is not cool.
<View>
<MainImage/>
<FlatList/>
</View>
How do I do to both components be able to scroll without losing performance?
obs: I'm using version 0.55 of react native
You can also use collapsible navbar above the flatlist rather than using separate MainImage Component. People are doing that and example is given in this link (https://medium.com/appandflow/react-native-collapsible-navbar-e51a049b560a)
I would like to remove my "Load more" button from my application and implement a "inifinite-scroll" type of feature, which allows users to scroll up through their message history and download older messages as they're requested.
I'm moving to the FlatList component due to ListView being depricated and I'm trying to figure out a nice implementation for determining when the user has scrolled to the top of the page. Due to the fact that a FlatList always starts at the top of the list, we want to make sure to only call onTopReached when the user is scrolling through the list.
How can I go about this?
Links to open-sourced implementations will be appreciated, but should be listed as a comment and not an answer. Implementations using the ListView are irrelevant.
In this case, you can use refresh control for this purpose.
You can do it similar to this
<FlatList
data={feedList}
keyExtractor={this.keyExtractor}
renderItem={this.renderItem}
refreshControl={
<RefreshControl refreshing={isloading} onRefresh={this.handleRefresh} />
}
/>