I've spent the last day trying to find out how to implement a simple fade screen transition with react-navigation but I cannot find one way to make it work with a bottom-tab-navigator. Can someone help me out? I've read the docs extensively but animations only seem to be available with a stack navigator.
Can you make transitions work on this snack demo?
Just create an Animated.View
and attach that to your screens.
const FadeHomeScreen = (props) => (
<FadeInView>
<HomeScreen {...props} />
</FadeInView>
);
then use this for Tab.Screen
<Tab.Screen name="Home" component={FadeHomeScreen} />
and just add unmountOnBlur: true
in the screenOptions
const screenOptions = {
unmountOnBlur: true,
headerShown: false,
};
<Tab.Navigator {...{ screenOptions }}>
Code: https://snack.expo.dev/@fanish/native-stack-navigator-%7C-react-navigation
You could also use react-native-reanimated
to create <FadeInView />
component