How we can implement onStartReached in FlatList ?
I used horizontal list.
I have some idea of using onScroll using,but I thing this not properly.
Seems onRefresh could do the job.
https://reactnative.dev/docs/flatlist#onrefresh
it must be start reached and pull to trigger onRefresh.
If you need a infinite scroll i used this
<FlatList
data={data}
renderItem={({ item, index }) => {
return (
// Component to render
);
}}
keyExtractor={(item) => item.uid}
onEndReached={() => //Load more data}
onEndReachedThreshold={0.5} // "Sleep" time
initialNumToRender={10} // initial number to items
/>
otherwise the way to use onStartReached is identical to onEndReached
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?
Lets say I a have FlatList component as follows,
<FlatList
ref={ref => this.flatListRef = ref}
data={this.state.data}
renderItem={({ item, index }) => this.renderLeaveRequests(item, index)}
keyExtractor={item => `${item.id}`}
onEndReached={this.loadMore}
/>
I Want FlatList to go to some particular item based on offset and I achieved like follows,
componentWillMount() {
this.flatListRef.scrollToOffset({ offset: scrollPosition, animated: false });
}
If you observe I am calling scrollToOffset in componentWillMount which means before rendering the component. Here my doubt is how come reference of FlatList is available before rendering it.
Does reference of any component available before even rendering it at least once?
No, because you assign your ref in the render, this isn't avalaible before rendering.
Use componentDidMount instead
I have a flatlist with a dynamic data source. I change the redux state of the selectedCategory and use that to key into the data source object with the value being the data array for the flatlist.
When the data prop on the flatlist changes, the UI does update but when I try and scroll to the top with scrollToOffset when the data source changes it doesn't seem to work.
If I have scrolled down far then switch the data source to a smaller array it remains scrolled at the bottom.
<FlatList
ref={ref => (this.listRef = ref)}
style={styles.articleList}
refreshing={isFetching}
refreshControl={
<RefreshControl
refreshing={isFetching}
onRefresh={() => this.onRefresh()}
/>
}
onMomentumScrollEnd={x => this.onScroll(x)}
data={allNewsData[selectedCategory.id.toLowerCase()]}
renderItem={({item}) => (
<TouchableOpacity
style={styles.item}
activeOpacity={0.85}
title={item.post_title}>
<NewsArticleItem item={item} />
</TouchableOpacity>
)}
keyExtractor={item => item.ID.toString()}
/>
I tried to run on componentDidUpdate and the check is correct and runs when I change the data source for the flatlist, but I believe it is happening too fast? If I set a timeout of like 500ms around the scrollToOffset it does work but I'm not doing that...
componentDidUpdate(prevProps, prevState) {
if (prevProps.selectedCategory.id !== this.props.selectedCategory.id) {
console.log('data src changed');
this.listRef.scrollToOffset({animated: true, offset: 0});
}
}
It almost seems I need some type of callback to know when the data source of the flatlist changes maybe?
I have inverted vertical FlatList in my chat app, which shows newest message in bottom and oldest message in top (likes all other chat applications)
The problem is when I want to add new messages to bottom of my list, FlatList automatically jump to bottom-end of the list!
All I need is to prevent scrolling in this situation
Here is my FlatList:
<FlatList
inverted
style={{flex: 1}}
data={this.state.data}
keyExtractor={(item, index) => item.id}
renderItem={this.renderItem}
/>
And here is the code to add newest messages to list
const data = [ ...newMessages, ...this.state.data ];
this.setState({ data });
Your case look simple but you are adding new message at top then reverse it to bottom last position using inverted flag
Could remove inverted flag and add new item at last simply const data = [...this.state.data, ...newMessages];
<FlatList
style={{flex: 1}}
data={this.state.data}
keyExtractor={(item, index) => item.id}
renderItem={this.renderItem}
/>
const data = [...this.state.data, ...newMessages];
this.setState({ data });
I hope this will work
Put this in the view
<FlatList
data={this.state.data}
ref={ref => {
this.flatListRef = ref;
}}
initialScrollIndex={0}
keyExtractor={item => item.id}
extraData={this.state.refresh}
renderItem={({item, index}) => {
// animation={animation}
return (
<ListItem
inAnimation={inAnimation}
outAnimation={outAnimation}
duration={duration}
easing={easing}
isDeleted={item._isDeleted}
id={item.id}
item={item}
/>
);
}}
`/>`
Run this in a function
this.flatListRef.scrollToIndex({
animated: true,
index: nextProps.indexScroll})
});
You should use a workaround to achieve this. If you check the documentation for FlatList (which extends the props of ScrollView), you'll see that all you need to do is set the scrollEnabled prop to false to disable scrolling. How and where you choose to do this will be up to you since you didn't really post a lot of code. A simple way to handle this would be to use state:
<FlatList
...
scrollEnabled={this.state.scrollEnabled}
/>
In your case you could change the state when the new data is being loaded and change it back when it is rendered.
There is an open issue on Github about this case.
I'm making a Chat app in React Native, in my app I have a Flatlist to show a message. When user pull the list, it will get new data and add to list. But the list will be re-render and scroll to start item. Is there anyway to make it still get data but stay in current position, like Facebook Messenger ?
I'm using FlatList like this :
<FlatList
refreshControl={
<RefreshControl
refreshing = {this.state.refreshing}
onRefresh = {this.addMessageToList}
/>
}
keyExtractor={(item, index) => index.toString()}
ref="flatList"
style={{ flex: 1 }}
data={newList}
renderItem={({ item, index }) => {
return (
<ChatContentItems item={item} index={index} parentFlatList={this}>
</ChatContentItems>
);
}}>
</FlatList>
Use onEndReached event to handle when user reached the end.
<FlatList
data={this.state.latestData}
keyExtractor={item => item.id.toString() }
renderItem={({item}) => <JobsListCell item={item}/>}
onEndReached={this.loadMore.bind(this)} // add this
onEndReachedThreshold={0.3} /> // and this. change according to your preference.
Since you have the full array with you, slice and append the next items to the latest array.
loadMore() {
let { latestData, fetchedData, incrementingAmount } = this.state;
if (latestData.length < fetchedData.length) {
this.setState({
latestData: [...latestData, ...fetchedData.slice(latestData.length, latestData.length + incrementingAmount)]
})
}
}
You can use scrollToEnd or scrollToItem after your addMessageToList completes
Also, ref strings are deprecated. You can use
ref={ (flatList) => this.flatList = flatList }