Is it possible to switch between custom and default transition in React Native using React Navigation?

Question

Below is the transition config that I create so that I can pass custom transition from any screen:

const TransitionConfiguration = () => ( {
        // Define scene interpolation, eq. custom transition
  screenInterpolator: ( sceneProps ) => {
    const { position, scene } = sceneProps;
    const { index, route } = scene;
    const params = route.params || {};
    const defaultTransition = () => ( {} );
    const transition = params.transition || defaultTransition;

    return transition( index, position );
  },
} );

const navigationOptions = {
  navigationOptions: {
    headerStyle: {
      backgroundColor: background.color4,
      shadowColor: primary.color2,
    },
    headerTitleStyle: { color: primary.color1 },
  },
  transitionConfig: TransitionConfiguration,
};

As you can observe, I check if I have passed transition as a route param or not. If it's not passed, I pass a default function which returns an empty object.

Is it possible to switch back to StackNavigator's default transition if I don't pass transition config?

score 1 · Answer 1 · edited Oct 10 '17 at 15:46

1

If you check TransitionConfigs.js

  function getTransitionConfig(

  ...
  ...

  if (transitionConfigurer) {
    return {
      ...defaultConfig,
      ...transitionConfigurer(),
    };
  }
  return defaultConfig;

You can see that when you define your custom transition configurator it will override transitionSpec and screenInterpolator props which are used to define the transition.

In your case by defining screenInterpolator this serves as one and only transition. If you want to define many including default ones please refer to my post here and extend your custom one with default ones.

Meaning, your screenInterpolator should check wether there is a params.transition defined, if not fall back to one of the default ones.

edited Oct 10 '17 at 15:46

Pat Needham

5,698
7
43
63

answered Oct 10 '17 at 14:59

Tim Rijavec

1,770
22
27

Hey, I am not seeing the default transition. I feel that it defaults to my transition as I send empty object if transition config is not passed via params. – shet_tayyy Oct 10 '17 at 15:10
@rash.tay sorry, wrong statement from my side, I've updated the answer. – Tim Rijavec Oct 10 '17 at 15:17
Hey, I am following the same post. And if you observe, you pass a default config in case a custom transition config is not sent via params. I don't want to pass a default config by myself. I want to fallback to the default transition config of the stack navigator. I can do that if I could know via some means whether I have passed transition from my route.params. Is it possible to not set the transitionConfig property at all if route.params.transition is undefined? – shet_tayyy Oct 10 '17 at 15:21
Not sure if it will fallback automatically to default transition. The `default` parameter I'm passing is just another custom one controlled by the app, not the react-navigation. – Tim Rijavec Oct 10 '17 at 15:24
True. I don't wanna pass a custom one controlled by the app. StackNavigator has gracefully handled device specific navigation. I might end up repeating their code to achieve the same transition for different devices which I want to avoid. I'm trying to find a solution to avoid setting the transitionConfig property if route.params.transition is undefined. – shet_tayyy Oct 10 '17 at 15:26
@rash.tay Please let me know if you find a decent solution :) – Tim Rijavec Oct 10 '17 at 15:38
Hey, I found a solution. Posting it as an answer. – shet_tayyy Oct 10 '17 at 15:45

score 1 · Accepted Answer · answered Oct 10 '17 at 17:24

So, after digging a bit into react-navigation's code, I found that there is a file called CardStackStyleInterpolator which provides functions to perform default transitions.

I just used the function forHorizontal exported from that file. I have not handled it for all cases or devices but I think it can be easily handled. Also, you wouldn't have to repeat the code for default cases.

Below is the snippet:

import DefaultTransition from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';

const TransitionConfiguration = () => ( {
        // Define scene interpolation, eq. custom transition
  screenInterpolator: ( sceneProps ) => {
    const { position, scene, layout } = sceneProps;
    const { index, route } = scene;
    const params = route.params || {};
    const transition = params.transition;

    return transition && typeof transition === 'function'
            ? transition( index, position, layout )
            : DefaultTransition.forHorizontal( sceneProps );
  },
} );

Is it possible to switch between custom and default transition in React Native using React Navigation?

2 Answers2