Fade Out/In Animation React Navigation

Question

I am developing a React Native application using REACT NAVIGATION V6. I would like to add a custom transition for my navigation: fade out the current screen -> fade in the new screen. Any help on how I can achieve these transitions will be appreciated. Thanks

I have tried different solutions including cardInterpolation and transitionPresets but am unable to achieve the said behaviour

Answer 1

Add these line no need to add cardInterpolation and transitionPresets.

screenOptions={{
 animation: 'fade',
 animationDuration: 2000,
}}

in your stack navigation or particular screen option, it may fix your problem.

Video Link