androidiosreact-nativereact-navigationreact-native-reanimated-v2

How do I animate React Navigation transitions using createBottomTabNavigator?


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?

https://snack.expo.io/?platform=android&name=Native%20Stack%20Navigator%20%7C%20React%20Navigation&dependencies=%40expo%2Fvector-icons%40*%2C%40react-native-community%2Fmasked-view%40*%2Creact-native-gesture-handler%40*%2Creact-native-pager-view%40*%2Creact-native-paper%40%5E4.7.2%2Creact-native-reanimated%40*%2Creact-native-safe-area-context%40*%2Creact-native-screens%40*%2Creact-native-tab-view%40%5E3.0.0%2C%40react-navigation%2Fbottom-tabs%406.0.4%2C%40react-navigation%2Fdrawer%406.1.3%2C%40react-navigation%2Felements%401.0.4%2C%40react-navigation%2Fmaterial-bottom-tabs%406.0.4%2C%40react-navigation%2Fmaterial-top-tabs%406.0.2%2C%40react-navigation%2Fnative-stack%406.0.5%2C%40react-navigation%2Fnative%406.0.2%2C%40react-navigation%2Fstack%406.0.6&hideQueryParams=true&sourceUrl=https%3A%2F%2Freactnavigation.org%2Fexamples%2F6.x%2Ftab-based-navigation-minimal.js


Solution

  • 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