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!
Related
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 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 :(
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 see that react-native has TextInput, ListView, MapView ..... I'm not asking where is the Button. I know I can download react-native-button from npm, but the lack of a "native" button in react-native makes me wonder if I'm approaching react-native the wrong way. Is there some other paradigm I should be using on react-native apps and NOT using a button is the way to go?
Should I just be using the onPress for a View with TouchableOpacity?
Still trying to wrap my head around how to think in react-native.
The Touchable* components( TouchableOpacity/TouchableHighlight/TouchableWithoutFeedback) are React-Native's button
It has all the properties a View has. You have either wrap a View inside a Touchable component or just simply substitute the View with a Touchable component
<View style={{height:48,width:200,backgroundColor:'blue'}} />
can just be made into a button by
<TouchableOpacity onPress={this.onPress} style={{height:48,width:200,backgroundColor:'blue'}} />