cardStyleInterpolator not working for react-navigation 4.x

user_4337240 0
Viewed 82

I've react-navigation v4.4.3 and I'm trying to change the transition style of stack navigation from the default right-to-left to bottom-to-top.

I have a custom method createDefaultStackNavigator that I've made for creating the stack:

export const TodayStack = createDefaultStackNavigator({
    'Screen1': { screen: Screen1, navigationOptions: {
        ...TransitionPresets.ModalPresentationIOS,
        cardStyleInterpolator: CardStyleInterpolators.forModalPresentationIOS,
    } },
    'Screen2': { screen: Screen2 },
    'Screen3': { screen: Screen3 },
    'Screen4': { screen: Screen4 },
}, {
    // Type of navigatorConfig is any. Tried passing cardStyleInterpolator here but doesn't work.
});

export const MainStack = Object.freeze({
    'MyStack: TodayStack,
});

Then I have a StackNavutil.ts file in which I have:

import { CreateNavigatorConfig, NavigationRouteConfigMap, NavigationStackRouterConfig } from 'react-navigation';

export type NavigatorConfig = Omit<CreateNavigatorConfig<NavigationStackConfig, NavigationStackRouterConfig, NavigationStackOptions, NavigationStackProp>, 'defaultNavigationOptions' | 'navigationOptions'>;

export function createDefaultStackNavigatorFactory(defaultHeaderMode: NavigatorConfig['headerMode']) {

    const defaultNavigatorConfig: NavigatorConfig = {
        headerMode: defaultHeaderMode,
    };
    return function createMyCustomStackNavigator(
        routeConfig: NavigationRouteConfigMap<NavigationStackOptions, NavigationStackProp>,
        navigatorConfig: NavigatorConfig = defaultNavigatorConfig
    ) {
        return createStackNavigator(
            routeConfig,
            {
                ...navigatorConfig,
                defaultNavigationOptions: {
                    headerShown: true,
                    headerStyle: {
                        shadowColor: 'transparent',
                        elevation: 0,
                    },
                    headerTitleStyle: { display: 'none' },
                    gestureEnabled: Platform.OS === 'ios',
                },
                navigationOptions: {
                    headerShown: false,
                    gestureEnabled: false,
                    headerLeft: () => null,
                },
            },
        );
    }

export const createDefaultStackNavigator = createDefaultStackNavigatorFactory('screen');

I did the above so that I can pass navigationOptions as I'm doing for Screen 1. But when I run the app Screen 1 still comes from right-to-left rather than bottom-to-top on iOS. I'm not sure what I'm doing wrong as I'm a bit new to typescript.

stack-navigator react-native-navigation react-native reactjs
1 Answers

Basically, you have to give the transitionSpec inside navigationOptions object,

import { TransitionSpecs } from 'react-navigation-stack';

// ...

static navigationOptions = {
  title: 'Profile',
  transitionSpec: {
    open: TransitionSpecs.RevealFromBottomAndroidSpec,
    close: TransitionSpecs.RevealFromBottomAndroidSpec,
  },
}

Refer to this link: https://reactnavigation.org/docs/4.x/stack-navigator/#pre-made-configs

for the bottom to top type transition use "RevealFromBottomAndroidSpec"

user_137803810
Related