I am creating a project where I need to know when the user scrolls to the top of the flatList
my code is
<FlatList
keyExtractor={item => item.id}
data={this.state.data}
onScrollToTop={console.log('hey')}
renderItem={({ item }) => //blah blah render
/>
terminal only fires hey once
The docs days:
Fires when the scroll view scrolls to top after the status bar has been tapped.
2 things:
It's iOS only
It's when the user tap the status bar (it's more or less a hidden feature)
https://facebook.github.io/react-native/docs/scrollview#onscrolltotop
Related
i have a chat application in react native using flatlist component, here i use the code..
ref={flatlistRef}
onContentSizeChange={() => flatlistRef.current.scrollToEnd({})}
onLayout={() => flatlistRef.current.scrollToEnd({})}
onScroll={
(event) =>
onContentOffsetChanged(event.nativeEvent.contentOffset.y)
}
keyExtractor={(item, index) => item.id + index.toString()}
renderItem={({ item, index }) => (
<ChatListView
index={index}
message={item.message}
sender={item.senderUserID}
msgTime={item.timestamp}
/>
)}
/>
Now i have three condition on the first render it goes to the last message and then when user scroll to the top then new messages are pushed to the list and here flatlist not to scroll automaticaaly but when ther only one message added it should again scroll to end, Please help in my code it always scroll to end when content size changed , which is not required for the case when user go to the top most message and newly 30 messages are added and it occurs due to
onContentSizeChange={() => flatlistRef.current.scrollToEnd({})}
but not customize for that case please help what to do here?
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>
)}
/>
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
Below is my code I am facing issue where when I clicking on list item onPress , it does not work for first time when the keyboard is open so I need to tap twice to order to work it, any help is appreciated.
<FlatList
data={this.state.users}
renderItem={({ item,index }) => (
<ListItem
title={item.userName}
onPress={item => this.sendRequestToTheUser(item)}
containerStyle={{ borderBottomWidth: 0 }} />)}
keyExtractor={(item, index) => index.toString()}
extraData={this.state.userName} />
You should use keyboardShouldPersistTaps=always prop on your FlatList. As RN documentation says:
The keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps.
So you will be able to tap your buttons just once no matter if keyboard is open.
There's also a medium post that explains how to resolve common keyboard issues on React Native (which also contains Problem 1: Button needs to be tapped twice)
<FlatList
data={items}
renderItem={item => this.renderItem(item)}
stickyHeaderIndices={[0]}
ItemSeparatorComponent={this.renderSeparator}
keyExtractor={item => item.id}
refreshControl={<RefreshControl
refreshing={this.state.refreshing}
onRefresh={() => this.onRefresh()}
/>
I have a FlatList as presented. The data is a timetable and refreshed every minute, the data change occurs when the current time passes an item in the timetable (the item(s) gets removed if they are in the past).
If I scroll down a bit, and as a result of update if an item gets removed from the top of the list, the scroll position stays the same, but since an item got removed from the top, the viewpoint scrolls up a bit.
Is there an easy way of fixing this or should I have some fancy listeners there and around?