I'm new on ReactNative development and I'm developing my first application.
I'm trying to use OnEndReached in a flat list which is in a scrollview tab. I use this scrollview because I have 3 flat lists in my application.
The first two are horizontal. For the last one, I need to handle the pagination with the onEndReached. But, When I put this last flat list in the scroll view, it doesn't work at all without any issues.
When I put it out of the scrollview, it works correctly. So I assume the issue is related to that.
Do you know how I can manage this issue? I'm sorry if this question is a basic one :(
OnEndReached doesn't call if the parent has ScrollView. Why not put those top views in the Header?
<FlatList
data={data}
renderItem={}
keyExtractor={(item, index) => item.personId}
onEndReached={() => {
console.log(" On End Reached");
}}
onEndReachedThreshold={0.01}
ListHeaderComponent={() => (
<View>
<FlatList/>
<FlatList/>
</View>
))
/>
Related
Basically, I want the FlatList to have a onPress functionality (to explain simply) as well as the default scrolling functionality. Right now, if I have a FlatList inside a Pressable, then I am not able to scroll through the FlatList.
I have also tried to put Pressable inside the FlatList's RenderItem component, but I have a lot of items I'll be displaying, so it's going to inefficient.
Instead of Pressable wrapping the FlatList, I learnt that we can use React Native's Gesture Responder System on a simple View to get the behavior that I require.
<View
onStartShouldSetResponder={() => true}
onResponderRelease={doSomethingFunction}
>
<FlatList
data={someData}
renderItem={renderItemComponent}
/>
</View>
Try touch handling on FlatList item parent container like below so the scrolling issue would never come again and you can easily handle the touch on each item separately
<FlatList
style={{...}}
data={[...]}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => (
<TouchableWithoutFeedback onPress={() => {...}}>
<View>
....
</View>
</TouchableWithoutFeedback>
)}
/>
Basically, I have a list of items (with images) inside a single Card (custom component). Because the rendering of those items is slow, I wanted to use a FlatList to render them incrementally.
Unfortunately, I get the expected error
VirtualizedLists should never be nested inside plain ScrollViews ...
But I don't actually want to use a ScrollView inside the Card. I just want to render a few Items in a single Card, which should change its size to fit all the items.
Setting scrollEnabled={false} on the FlatList still shows the error above.
Using the ListHeaderComponent and ListFooterComponent props is not an option, because the content above and below should NOT be rendered inside the Card.
Here is a minimal example of what I mean:
const Comp = () => {
return (
<ScrollView contentInsetAdjustmentBehavior="automatic">
<Text>Header</Text>
<Card>
<FlatList
data={data}
renderItem={({ item }) => (
<Image source={{uri: item.localImageUrl}}/>
)}
keyExtractor={(item) => item.id}
scrollEnabled={false}
initialNumToRender={0}
maxToRenderPerBatch={3}
contentInsetAdjustmentBehavior='automatic'
/>
</Card>
<Text>Footer</Text>
</ScrollView>
);
};
What's interesting though, that aside from the error - I get the result I expected, and I could technically hide that error and ignore it, but that does not seem like the recommended approach.
Important: I am not specifically looking for a FlatList solution. It could technically be any Component that renders items incrementally in a non-blocking way.
The important point with a Flatlist is the reusing of cells so that not all components need to be rendered at the same time. So scrolling is an important part of this. On the other hand two scrollable components inside eachother will make it impossible for the system to know which component should be scrolled.
If there are only 3 items and it should not be scrollable you can just include a list of items inside the Scrollview like this:
const Comp = () => {
return (
<ScrollView contentInsetAdjustmentBehavior="automatic">
<Text>Header</Text>
<Card>
{ data.map((item, index) => {
return (
<Text key={index}>{item.title}</Text>
);
}) }
</Card>
<Text>Footer</Text>
</ScrollView>
);
};
I have a View. In this view I have a flat list that has the onScrollEndDrag and onScrollBeginDrag logic that works, except when the drag released on the bottom tab menu that is not part of the FlatList.
Because the handler is on the FlatList I can't detect drag releases that happen on the bottom tabs.
I need to have the drag end logic to be attatched to the view instead of the FlatList. How can I detect a when drag ends/the user releases the hand of the screen in the View instead of the FlatList?
Here is what I have currently:
<View>
<StatusBar barStyle={"light-content"} />
<FlatList
data={challenges}
renderItem={({ item, index }) => (
<ChallengePost challenge={item} isVideoPlaying={index === currentlyPlaying && !navigatedOutOfScreen} />
)}
keyExtractor={(challenge) => challenge._id}
showsVerticalScrollIndicator={false}
snapToInterval={Dimensions.get("window").height}
snapToAlignment={"start"}
decelerationRate={"fast"}
onViewableItemsChanged={onViewRef.current}
onScrollEndDrag={() => (scrollEnded.current = true)}
onScrollBeginDrag={() => (scrollEnded.current = false)}
></FlatList>
</View>
as you can see the onScrollEndDrag onScrollBeginDrag happends on the FlatList level and I want it be able to detect drag releases that happen on the entire screen.
Check this library it should help you make it easier because it wraps some of the components in its own pan gesture handlers
react-native-gesture-handler
examples
I've got following layout setup:
<ScrollView>
<MyCustomView />
<FlatList />
</ScrollView>
At the moment it is working as I intended it to work i.e. user scrolls past a custom view and then hits flat list with many items in it and can continue scrolling down.
My concern is that such layout is not what FlatList is intended for i.e. will it still only render items as they are needed?
Yep, I don't think it would create much of problem here.
As Flatlist too is an kind of scrollview so it won't cause much issue over here.
Also it would be a better approach if you keep that under flatlist and fix the view you have to hit using stickyIndices which you can get in flatlist and without comprising any rendering issues or performance hitches.
<FlatList
data={ this.state.FlatListItems }
ItemSeparatorComponent={ this.FlatListItemSeparator}
renderItem={ ({item}) => (
<Text
style={styles.FlatList_Item}
onPress={this.GetItem.bind(this, item.key)}> {item.key}
</Text>
)}
ListHeaderComponent={this.Render_FlatList_Sticky_header}
stickyHeaderIndices={[0]}
/>
Flat list inside scroll view create some kind of performance issue so for solving this you need to take care of some things for more info refer to link below
https://medium.com/sanjagh/how-to-optimize-your-react-native-flatlist-946490c8c49b
I've got a question. I've been trying to use SectionList for render a list section but the problem is I want to use list in horizontal mode and I don't know how to do that.
Please help I've stuck on this for 2 hours.
This is my code:
<SectionList
renderItem={({item}) => <Image source={require('../assets/images/img1.jpg')} />}
renderSectionHeader={({section}) => <Text>{section.title}</Text>}
sections={dataSource}
/>
In ReactNative docs, there is no prop for making horizontal SectionList(as of 0.48), but its parent VirtualizedList has.
Hence just try if it works ...
<SectionList
horizontal={true}
/>
If it does not work then probably u should try using Flatlist which has a horizontal prop and wait until it's implemented for SectionList