FlatList - How to go automatically to the top

Question

I'm using React Native (Expo).

What can I do to:

Every time that one user enters in the screen with the respective flatlist automatically goes to the top of that list.

Now for example if a user goes to the bottom of that list when he changes the screen and go back to that one, he stills on the bottom.

Any suggestion?

Can you detect when they come back, and run something like `this.flatListRef.scrollToOffset({ animated: true, offset: 0 });` ? — TKoL, Jun 29 '21 at 16:36
https://stackoverflow.com/questions/50436635/react-native-scroll-to-top-with-flatlist — TKoL, Jun 29 '21 at 16:36

score 1 · Accepted Answer · answered Jun 29 '21 at 17:22

1

You can add an event listener to the screen and call scrollToTop like this

useEffect(() => {
  const unsubscribe = navigation.addListener('focus', () => {
    flatListRef.current.scrollToOffset({ animated: true, offset: 0 });
  });

  return unsubscribe;
}, [navigation]);

answered Jun 29 '21 at 17:22

Kartikey

4,516
4
15
40

Component exception: null is not an object (evaluating 'flatListRef.current.scrollToOffset') – Dário Jun 30 '21 at 10:36
create a ref variable and use it in Flatlist – Kartikey Jun 30 '21 at 11:14
it worked with flatlist, but now with scrollView it's not working, you know why ? – Dário Jun 30 '21 at 14:44
For ScrollView, have a look at [this](https://reactnative.dev/docs/scrollview#scrollto) – Kartikey Jun 30 '21 at 14:51

FlatList - How to go automatically to the top

1 Answers1