How do I animate React Navigation transitions using createBottomTabNavigator?

Question

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

Gawky

If my answer was helpful, please share your feedback. – Croaky

It was, thank you. I just don't have enough reputation to give votes yet. – Gawky

Answer 1

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

Croaky

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? – Gawky

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 and call FadeAnimation. – Croaky

made it work using useFocusEffect hook 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) – Gawky

Add this property <Tab.Navigator {...{ screenOptions,sceneContainerStyle }}> and const sceneContainerStyle={ backgroundColor:'#95a5a6' } You won't see the white screen. – Croaky

Thank you man! You saved me bunch of time – Speech

why do you set unnmountOnBlur to true exactly? – Foreboding

This is a late reply, but @VariabileAleatoria, it is most likely due to the fact that when a navigation screen mounts it does not unmount until the app is closed. Thus unmountOnBlur is required for triggering the fade-out animation on un-mount so that it can fade back in on re-mount. I assume something similar could be implemented using React Navigation's useFocusEffect or attaching a listener to the navigation object. – Confrere

Answer 2

Wrap Screen components into FadeView compoent and don't forget to add unmountOnBlur: true in the screenOptions

fade-view.tsx

import { cn } from "@/lib/utils";
import { View } from "react-native";
import Animated, { FadeIn, FadeOut } from "react-native-reanimated";

type FadeViewProps = {
  children: React.ReactNode;
  className?: string;
};
export default function FadeView({ children, className }: FadeViewProps) {
  return (
    <View className={cn("flex-1 bg-white")}>
      <Animated.View
        className={cn("flex-1", className)}
        entering={FadeIn}
        exiting={FadeOut}
      >
        {children}
      </Animated.View>
    </View>
  );
}

index.tsx

...
import FadeView from "@/components/animation/fade-view";

export default function Index() {
  return (
    <FadeView>
     ...
    </FadeView>
  );
}

I just wrapped every component except _layout inside (tabs) into

Dellinger