react-nativeandroid-animationandroid-transitionsreact-navigation-v6

Fade Out/In Animation React Navigation

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

Solution

  • 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