CODEWITHSUNDEEP
react-nativereact-navigation
M. Alex
M. Alex

Reputation: 713

Screens in SwitchNavigator Flicker on navigation

In my react native app, I have a switch navigator to navigate between an Auth Stack and App Stack:

const AppNavigator = createSwitchNavigator(
  {
    App: AppStack,
    Auth: AuthStack
  },
  {
    initialRouteName: "Auth",
  }
);

It works, however when I go from the AuthStack to the AppStack, it flickers and the screen moves up. How do I prevent this behaviour add have a smooth transition.

Upvotes: 1

Views: 698

Answers (1)

M. Alex
M. Alex

Reputation: 713

I was able to resolve the issue by using the an animatedswitchnavigator instead of a normal switchnavigator and adding a transition: 

import createAnimatedSwitchNavigator from 'react-navigation-animated-switch';
import { Transition } from 'react-native-reanimated';

const AppNavigator = createAnimatedSwitchNavigator(
  {
    App: AppStack,
    Auth: AuthStack
  },
  {
    initialRouteName: "Auth",
    transition: (
      <Transition.Together>
        <Transition.Out
          type="slide-bottom"
          durationMs={400}
          interpolation="easeIn"
        />
        <Transition.In type="fade" durationMs={500} />
      </Transition.Together>
    ),
  }
);

Documentation found here: https://reactnavigation.org/docs/4.x/animated-switch-navigator/

Upvotes: 1

Related Questions