I am developing a React Native application using REACT NAVIGATION V5. I would like to add a custom transition for my navigation: fade out the current screen -> a white background -> fade in the new screen.
I have tried cardStyleInterpolator but it's not working as expected. I have the fade effect but the current screen overlaps the new one. Here is my fade implementation:
export const forFade = ({ current, next, index, closing }) => {
const opacity = current.progress.interpolate({
inputRange: [0, index],
outputRange: [0, 1],
});
return {
cardStyle: {
opacity,
},
};
};
Any advice would be appreciated.