I have a nested Drawer navigation and want to scroll to top on every screen change, I am using UseScrollToTop hook as described in the docs but it's not working, are there any other ways guys?
const Home = ({ navigation }) => {
const ref = useRef(null);
useScrollToTop(ref);
return (
<View>
<View style={styles.booksContainer}>
<FlatList
ref={ref}
numColumns={2}
data={DATA}
renderItem={({ item }) => (
<HomeItem item={item} navigation={navigation} />
)}
keyExtractor={item => item.id}
/>
</View>
</View>
);
};
To anyone that will have the same problem, I think useScrollToTop hook only works with the Tab navigation.
This is what worked for me.
useEffect(() => {
const unsubscribe = navigation.addListener('blur', () => {
ref.current.scrollToIndex({ animated: true, index: 0 });
});
return unsubscribe;
}, [navigation]);