title: React Navigation V3 handling transitions and animations when going to another page
body: <p>I am currently using <a href="https://reactnavigation.org/docs/en/getting-started.html" rel="nofollow noreferrer">react-navigation-v3</a> which is the latest. I tried this <a href="https://stackoverflow.com/questions/43974979/react-native-react-navigation-transitions">solution</a>. But it didn't work out for me.</p>
  
  <p>Here is the transition that I tried to replicate from the solution in the link.</p>
  
  <pre><code>const Transition = (index, position) =&gt; {
      const inputRange = [index - 1, index, index + 1];
      const opacity = position.interpolate({
          inputRange,
          outputRange: [.8, 1, 1],
      });
  
      const scaleY = position.interpolate({
          inputRange,
          outputRange: ([0.8, 1, 1]),
      });
  
      return {
          opacity,
          transform: [
              {scaleY}
          ]
      };
  };
  </code></pre>
  
  <p>and here is the <code>transitionConfig</code> that I had declared.</p>
  
  <pre><code>const TransitionConfiguration = () =&gt; {
      return {
          // Define scene interpolation, eq. custom transition
          screenInterpolator: (sceneProps) =&gt; {
  
              const {position, scene} = sceneProps;
              const {index, route} = scene
              const params = route.params || {}; // &lt;- That's new
              const transition = params.transition || 'default'; // &lt;- That's new
  
              return {
                  transition: Transition(index, position),
                  default: Transition(index, position),
              }[transition];
          }
      }
  };
  </code></pre>
  
  <p>And here are all the list of <strong>routes</strong>:</p>
  
  <pre><code>const UnauthenticatedScreens = createStackNavigator(
      { // Screens
          Login: { screen: Login }
      }
  );
  
  
  const AuthenticatedInitialScreens = createStackNavigator(
      { // Screens
          Home: {
              screen: Home
          },
      }, { // Default options
          defaultNavigationOptions: ({ navigation }) =&gt; {
              return {
                  header:
                      &lt;DrawerHeader // Default header component
                          headerTitle={navigation.state.routeName}
                          icon="menu"
                          onPress={() =&gt; navigation.openDrawer()}
                      /&gt;
              };
          }
      }
  );
  
  const AppDrawerNavigator = createDrawerNavigator(
      { // Screens
          Home: AuthenticatedInitialScreens,
      }, { // Default options
          initialRouteName: 'Home',
          contentComponent: DrawerComponent, // Default drawer component
          contentOptions: {
              activeTintColor: COLOR.PANTOME
          }
      }
  );
  
  const AppSwitchNavigator = createSwitchNavigator(
      { // Screens
          Splash: { screen: Splash },
          UnauthenticatedScreens: { screen: UnauthenticatedScreens },
          AuthenticatedInitialScreens: { screen: AppDrawerNavigator }
      }, { // Default options
          initialRouteName: 'Splash',
          transitionConfig: TransitionConfiguration
      }
  );
  
  const AppContainer = createAppContainer(AppSwitchNavigator);
  
  export default AppContainer
  </code></pre>
  
  <p>and in my <strong>Splash</strong> component in the <code>componentDidMount</code> method.</p>
  
  <pre><code>componentDidMount() {
          this.props.actions.restoreSession();
          setTimeout(() =&gt; {
              this.props.state.isAuth
                  ? this.props.navigation.navigate({
                      params: {
                          transition: 'transition'
                      }
                  })
                  : this.props.navigation.navigate({
                      routeName: 'UnauthenticatedScreens',
                      params: {
                          transition: 'transition'
                      }
                  })
          }, 2000);
      }
  </code></pre>
  
  <p>Appreciate if somebody could help.
  Thanks in advance.</p>