React Navigation: Scroll to top if tab is the same as active tab
For who is looking for a solution for react native, if you are using react navigation, you need to import ScrollView, FlatList or SectionList from react-navigation instead of react-native.
eg.
import { FlatList } from 'react-navigation';
You can find the details on the docs: https://reactnavigation.org/docs/4.x/scrollables/
UPDATE
If you are using react navigation v5
import * as React from 'react';
import { FlatList } from 'react-native';
import { useScrollToTop } from '@react-navigation/native';
function CustomComponent() {
const ref = React.useRef(null);
useScrollToTop(ref);
return <FlatList ref={ref} {/* settings */} />;
}
docs: https://reactnavigation.org/docs/use-scroll-to-top
React Navigation 5.x
The simplest solution they have provided is, just pass the ref of your scrollable component to their useScrollToTop
hook.
import * as React from 'react';
import { ScrollView } from 'react-native';
import { useScrollToTop } from '@react-navigation/native';
function Albums() {
const ref = React.useRef(null);
useScrollToTop(ref);
return <ScrollView ref={ref}>{/* content */}</ScrollView>;
}
Snack.expo.io Example
Documentation
You can create your tab navigator as follow:
const TabNav = TabNavigator({
// config
},
{
navigationOptions: ({ navigation }) => ({
tabBarOnPress: (scene, jumpToIndex) => {
// Called when tab is press
},
}),
});
In order to scroll to top, you can check this solution:
- https://github.com/react-navigation/react-navigation/issues/2955#issuecomment-343422076
- https://snack.expo.io/HJp9mEQkG