CODEWITHSUNDEEP
react-navigationreact-navigation-v6
Keisuke Horota
Keisuke Horota

Reputation: 51

Not work TransitionPresets. react-navigation version 6

I recently upgraded from v4 to v6.
As a result, TransitionPresets seems to have stopped working.

<Stack.Screen
  name="Home"
  component={Home}
  options={{ ...TransitionPresets.ModalSlideFromBottomIOS }}
/>

I don't think there is any wrong way to use it.
https://reactnavigation.org/docs/stack-navigator/#transitionpresets

Has anyone else encountered a similar problem?

Edit 2021-11-17

I'm sorry.
I guess I did not understand the difference between native stack and stack.
I used the normal stack and it worked.

Upvotes: 1

Views: 3641

Answers (4)

error-try-again
error-try-again

Reputation: 39

Found this through a google search and solved a related issue so I figured I'd post and share in case someone else might find it useful. I found the 'card' and 'modal' presentation mode to be bugged with pretty severe frame/screen ghosting when navigating in "@react-navigation/native-stack": "^6.9.22"; and fade_from_bottom seems to be a reliable workaround/solution for the native-stack. Note: If you want to disable gestures so that the modal acts more like a card and the users can't slide it you can set gestureEnabled to false.

    <NativeStack.Navigator
        initialRouteName={homeScreenString}
        screenOptions={({ route }: { route: RouteProp<ParamListBase> }) => ({
            ...
            animationDuration: 0,
            presentation: 'fade_from_bottom',
            gestureEnabled: false,
        })}>
        <NativeStack.Screen
            ...
        />
        <NativeStack.Screen
            ...
        />
    </NativeStack.Navigator>

Upvotes: 0

Akshay I
Akshay I

Reputation: 4175

In navigation v6

<Stack.Navigator
  screenOptions={{
    animation: 'fade_from_bottom',
  }}>
</Stack.Navigator>

animation options should be :

StackAnimationTypes = 'default' | 'fade' | 'fade_from_bottom' | 'flip' | 'none' | 'simple_push' | 'slide_from_bottom' | 'slide_from_right' | 'slide_from_left'

Upvotes: 4

Vivek Ghodadra Codezee
Vivek Ghodadra Codezee

Reputation: 1

You need to add TransitionPresets in screenOptions props in Stack.Navigator. Just put same as follows.

<Stack.Navigator screenOptions={{...TransitionPresets.SlideFromRightIOS}}>
  <Stack.Screen name="screenName" component={screenComponent} />
</Stack.Navigator>

Upvotes: 0

Jo&#227;o Sousa
Jo&#227;o Sousa

Reputation: 31

I got the same problem, when switching versions and editing a way of writing Stack I noticed that they redirected to different libs.

Change from:

import { createNativeStackNavigator, TransitionPresets } from '@react-navigation/native-stack';

For:

import { createStackNavigator, TransitionPresets, } from '@react-navigation/stack';

And also edited when creating the Stack of:

const Stack = createNativeStackNavigator();

For:

const Stack = createStackNavigator();

Upvotes: 1

Related Questions