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.