2

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

Pedro Sousa
  • 63
  • 2
  • 5

1 Answers1

7

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

FnH
  • 587
  • 4
  • 5
  • 2
    Thank you so much. However, is there a way to maintain state on the faded page? Enabling unmountOnBlur causes the user to lose all navigation history. Is there an approach that enables the same behavior but retains all state logic? – Pedro Sousa Sep 17 '21 at 20:13
  • Yes, there is a way to do that but you will have to use `focus` event listener. [Triggering an action with a 'focus' event listener](https://reactnavigation.org/docs/function-after-focusing-screen/#triggering-an-action-with-a-focus-event-listener) and call `FadeAnimation`. – FnH Sep 17 '21 at 21:02
  • 1
    made it work using useFocusEffect hook https://snack.expo.dev/@pedrosousa/fade-animation-between-bottom-tabs. Now the next step is actually implementing a fade animation that transitions between screen contents and not between a rootviewbackground (in this case a blank white screen) – Pedro Sousa Sep 17 '21 at 21:07
  • 1
    Add this property `` and `const sceneContainerStyle={ backgroundColor:'#95a5a6' }` You won't see the white screen. – FnH Sep 17 '21 at 22:15
  • Thank you man! You saved me bunch of time – Serhii Harbovskyi Jun 10 '22 at 10:18
  • why do you set unnmountOnBlur to true exactly? – VariabileAleatoria Jun 11 '22 at 16:41