React Navigation v5: Screen transition animation

Viewed 3493

I am using stack navigator (React Navigation v5) in my React Native app. I want to move from screen 1 to screen 2 with fade transition which is working absolutely fine with this code:

const fadeConfig = ({ current }) => {
    return {
        cardStyle: {
            opacity: current.progress,
        },
    }
};

const Stack = () => {
    const { Navigator, Screen } = Stack;

    return (
        <Navigator
            screenOptions={{
                header: () => null,
            }}
        >
            <Screen
                 name="Screen1"
                 component={Screen1}
            />

            <Screen
                name="Screen2"
                component={Screen2}
                options={{ cardStyleInterpolator: fadeConfig }}
            />
        </Navigator>
    );
};

Now, this fade is linear across entire screen. But my requirement is to make this fade happen in a radial manner, originating from the point where user taps with his/her finger. What changes will I have to make in fadeConfig in order to achieve the functionality? Thanks.

0 Answers
Related