React-native-navigation: [V2][Android] The transition animation of pop not working

Created on 6 Aug 2018  ·  11Comments  ·  Source: wix/react-native-navigation

Issue Description

The "x" transition animation of pop not work ,but push is OK.

Steps to Reproduce / Code Snippets / Screenshots

Navigation.setDefaultOptions({
                topBar: {
                    visible: false,
                    drawBehind: true,
                    animate: false
                },
                statusBar: {
                    drawBehind: true,
                    backgroundColor: "transparent",
                    style: 'dark'
                },
                animations: {
                    push: {
                        waitForRender: false,
                    }
                },
                animations: {
                    push: {
                        content: {
                            x: {
                                from: 1000,
                                to: 0,
                                duration: 500,
                                interpolation: 'accelerate',
                            },
                            alpha: {
                                from: 0,
                                to: 1,
                                duration: 500,
                                interpolation: 'accelerate'
                            }
                        },

                    },
                    pop: {
                        content: {
                            x: {
                                from: 0,
                                to: 1000,
                                duration: 500,
                                interpolation: 'decelerate',
                            },
                            alpha: {
                                from: 1,
                                to: 0,
                                duration: 500,
                                interpolation: 'decelerate'
                            }
                        }
                    }
                }
            });



Environment

  • React Native Navigation version: 2.0.2456
  • React Native version: 0.56.0
  • Platform(s) (iOS, Android, or both?): Android
  • Device info (Simulator/Device? OS version? Debug/Release?): Simulator
Android v2 🏚 stale

Most helpful comment

    "react-native-navigation": "^2.0.2575",
    "react-native": "^0.56.1",

All 11 comments

I found that, the pop animation does work in a non-tab based app. But not in a tab based app.

@linchenhuicn Does the fade animation work?

@guyca the fade does not work either

Also seeing this on Android with version 2.0.2556

Yes it is not working by setting pop animations via

  Navigation.setDefaultOptions(defaultOptions);

but when i set animation with each push screen component it works

So the thing that work for me is

Set push animations via defaultOptions

  Navigation.setDefaultOptions({animations:screenPushAnimations} );

and pop animations via each push screen component

options:{
        topBar:{
          ...transparentTopBar,  
          animations: screenPopAnimations
      }

and animation used are

 const screenPushAnimations = {
      push:{
        content: {
          x: {
            from:1000,
            to: 0,
            duration:200,
            interpolation:'accelerate'
          }
        }
      }      
    }


 const screenPopAnimations = {
      pop:{
        content: {
          x: {
            from: 0,
            to: 1000,
            duration:200,
            interpolation:'accelerate'
          }
        }
      }      
    }

Note that you have to add popAnimation with the rootComponent also set via Navigation.setRoot(component)

as without it the first screen in stack will not have the desired effect

@HarishJangra awesome, which version of RNN are you using?

    "react-native-navigation": "^2.0.2575",
    "react-native": "^0.56.1",

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

I have a similar issue when I pop a screen with a custom animation (tested only with alpha), causing some weird flash between the two screens.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

The issue has been closed for inactivity.

Was this page helpful?
0 / 5 - 0 ratings