Pass transitionConfig to Navigator

[alexwasner]

With this PR, you can create a custom transition and pass it via transitionConfig to the Router. You can choose the transition type when routing with

Actions.test({transition:'myCustomTransition'})

Example:

let MyTransition = (index, position) => {
    const inputRange = [index - 1, index, index + 1];
    const opacity = position.interpolate({
        inputRange,
        outputRange: [0, 1, 1],
    });

    const scaleX = position.interpolate({
        inputRange,
        outputRange: ([0.4, 1, 1]),
    });

    return {
        opacity,
        transform: [
            {scaleX}
        ]
    };
};

let MyCustomTransition = (index, position) => {
    const inputRange = [index - 1, index, index + 1];
    const opacity = position.interpolate({
        inputRange,
        outputRange: [0, 1, 1],
    });

    const scaleY = position.interpolate({
        inputRange,
        outputRange: ([0.1, 1, 1]),
    });

    return {
        opacity,
        transform: [
            {scaleY}
        ]
    };
};

let TransitionConfiguration = () => {
    return {
        screenInterpolator: (sceneProps) => {

            const {position, scene} = sceneProps;
            const {index, route} = scene
            const params = route.params || {};
            const transition = params.transition || 'default';

            return {
                myCustomTransition: MyCustomTransition(index, position),
                default: MyTransition(index, position),
            }[transition];
        }
    }
};

[mention-bot]

@alexwasner, thanks for your PR! By analyzing the history of the files in this pull request, we identified @aksonov, @Swordsman-Inaction and @diegocouto to be potential reviewers.

[aksonov]

Could you describe all steps? Why you can't just pass transitionConfig as prop to Router (it will be passed to all navigators automatically)?

[alexwasner]

@aksonov You would pass transitionConfig to the Router and all navigators would get it

<Router transitionConfig={TransitionConfiguration} createReducer={reducerCreate}>

I also realized this doesn't work with the LightboxNavigator yet so I'll dig into that

[alexwasner]

I've tried a few things to get LightboxNavigator working with this, but out of ideas. It's being passed in createNavigator under the tabsConfig, but have a feeling TabRouter is just ignoring it.

[aksonov]

I've just tested your animations and it works great without modification (just bypass to Router)! I've just added transitionConfig to Lightbox Navigator right now but it will not work, because LightboxNavigator doesn't use transitionAnimation now - feel free to submit PR (it is accessible via tabsConfig.transitionConfig).

Also it will be great if we could preserve default animations somehow for modal/push and extend animations for other custom animation so I could include it into Example - I tried your config and it changes all animations within the app, so I postponed changes until we have default/native push/modal + custom ones.

[aksonov]

Also disabled animations will be very helpful (so we could use duration={0} to disable animations for some scenes)

[alexwasner]

This is actually already working without my changes when you just pass it to router as transitionConfig. I'll see if I can find a workaround for the duration thing. Perhaps something with navigationStore to cache the state or something. Closing this and will open a new PR with that😂

[alexwasner]

Oh and @aksonov, you can also just pass the default params like this:

const TransitionConfiguration = () => {
    return {
        transitionSpec: {
            duration: 250,
            easing: Easing.out(Easing.poly(4)),
            timing: Animated.timing,
        },
        screenInterpolator: (sceneProps) => {
            const {position, scene} = sceneProps;
            const {index, route} = scene
            const params = route.params || {};
            const transition = params.transition || 'default';
            console.log(CardStackStyleInterpolator.forHorizontal(sceneProps));
            return {
                myCustomTransition: MyCustomTransition(index, position),
                modal: CardStackStyleInterpolator.forVertical(sceneProps),
                default: CardStackStyleInterpolator.forHorizontal(sceneProps)
            }[transition];
        }
    }
};

[aksonov]

Great! Is it possible to import ready ones from ReactNavigation?

[aksonov]

Oh, I see CardStackStyleInterpolator.forHorizontal is already used, so only duration and easing is 'duplicated'.

[aksonov]

So could we pass duration individually for scene?

[alexwasner]

I haven’t found a way to override transitionSpec per view yet, but still digging

[aksonov]

I have tried to use that your 'default' config, but it doesn't work for modals...