React navigation custom screen transition

Question

I am using Stack Navigator with a transitionConfig. In the scene interpolator I have defined myCustomTransition() which is being applied to all the screens in the stack.

Is is possible to have the myCustomTransition() applied to only particular screens, and the default stack navigator transition to the rest?

This is the transitionConfig:

const transitionConfig = () => {
    return {
        transitionSpec: {
            duration: 500,
            easing: Easing.out(Easing.poly(4)),
            timing: Animated.timing,
            useNativeDriver: true,
        },

        screenInterpolator: sceneProps => {
            const { scene, position, layout } = sceneProps;

            const sceneIndex = scene.index;
            const height = layout.initHeight;

            // is it possible to have a switch statement 
            switch (scene.route.routeName) {
                case 'searchScreen':
                    return myCustomTransition();

                default:
                    return defaultTransition();
            }
        },
    };
};

Is it possible to have a switch statement to apply myCustomTransition() only to the searchScreen?

Thanks.

Answer 1

@Vinay Sharma Use this

Example:

const AppStack = createStackNavigator(
    {
        headerMode: "none",
        animationEnabed: true,
        transitionConfig: () => ({
            transitionSpec: {
                easing: Easing.bezier(.88,0.83,.82,.95),
                delay: 100,
                duration: 250,
            },
        }),
    }
);