How do i skip the animation only replace with react-navigation

Question

i am using @react-navigation/stack^5.14.4 and @react-navigation/native^5.9.4, to handle the scene transition between Home, Login and Profile pages.

there are 2 transition cases i need to handle:

• Home -> Profile (should have animation enabled)
• Login -> Profile (need to skip the animation)

the reason why to skip the animation is that I am using a loading skeleton similar to the layout of Profile page during the login process. It is weird to have a transition between the profile page content and the skeleton itself. However I want to keep the awesome animation if pushed from Home page.

Is there a simple solution like

navigation.replace("Profile"); // with animation

navigation.replace("Profile", { animationEnabled: false }); // skip animation

Answer 1

You can use options to get the route property and check weather there is any parameter to disable the screen

snak: https://snack.expo.dev/@ashwith00/react-navigation-5-boilerplate

heres is an example

function TestScreen({ navigation }) {
  return (
    <View style={styles.content}>
      <Button
        mode="contained"
        onPress={() => navigation.push('Test1', {disabledAnimation: true})}
        style={styles.button}>
        Push screen Without Animation
      </Button>
            <Button
        mode="contained"
        onPress={() => navigation.push('Test1')}
        style={styles.button}>
        Push new screen
      </Button>
      {navigation.canGoBack() ? (
        <Button
          mode="outlined"
          onPress={() => navigation.pop()}
          style={styles.button}>
          Go back
        </Button>
      ) : null}
    </View>
  );
}

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Test"
        component={TestScreen}
        options={{ title: 'Custom animation' }}
      />
      <Stack.Screen
        name="Test1"
        component={TestScreen}
        options={({ route }) => ({
          title: 'Custom animation',
            cardStyleInterpolator: !route.params?.disabledAnimation
              ? undefined
              : CardStyleInterpolators.forNoAnimation,
          })}
       
      />
    </Stack.Navigator>
  );
}

Answer 2

i find a more simple way to make it:

firstly, export the Stack.Screen node from the router file.

export const ProfileStack = (
  <Stack.Screen name={'Profile'} component={Profile} />
);

export default Router = () => (
  <Stack.Navigator>
    <Stack.Screen name={'Home'} component={Home} />
    <Stack.Screen name={'Login'} component={Login} />
    {ProfileStack}
  </Stack.Navigator>
);

then I can execute like this to disable the animation once.

with animation:

<Button onClick={() => {
  navigation.replace('Profile');
}} />

without animation

<Button onClick={() => {
  ProfileStack.props.options.animationEnabled = false;
  navigation.replace('Profile');
  ProfileStack.props.options.animationEnabled = true;
}} />