React-native-navigation: Previous screen flashing (white flash) when popping screens

[SudoPlz]

Issue Description

When I pop from one screen to the other, I get this white flash, which looks like that:

https://cl.ly/2b80a7327e57/Screen%252520Recording%2525202019-05-06%252520at%25252012.58%252520PM.mov

When I slow-mo'd it, it looks like the while flash, is actually the previous screen, showing up for a millisecond.

Ever seen that? What could be causing that?

Thank you

Environment

• React Native Navigation version: "^2.16.0",
• React Native version: "0.56.0",
• Platform(s) (iOS, Android, or both?): iOS for sure (maybe both?)
• Device info (Simulator/Device? OS version? Debug/Release?): Both Simulator (10.2.1) , and Device (iPad Air 2 MH1J2LL/A) on iOS 12.3

[SudoPlz]

Ok just noticed there's other people experiencing something similar (https://github.com/wix/react-native-navigation/issues/3609) not sure if it's the same issue, because we're not using a ImageBackground at all.

[jinshin1013]

For me, this happens only on dismissing modal with custom animation. I use the following config:

animations: {
  dismissModal: {
    alpha: {
      from: 1,
      to: 0,
      duration: 250,
    },
  }
}

Only occurs on iOS, strangely constant flickering behaviour on device but only occurs sometimes in simulator.

[andrejcesen]

I have the same problem with dismissModal, while showModal's alpha animation works fine.

[SudoPlz]

@jinshin1013 you're absolutely correct, if I remove the animation it works again, but for me the issue happens with push/pop..

[Dawqss]

I have the same problem. I added custom animations and the previous screen blinks on the end of animation for sec.
It occurs only on iOS on pop (I checked only pop and push), Android works perfectly fine

Checked on a real device iPhone X, iOS 12.2

Environment:

"react": "16.8.3",
 "react-native": "0.59.3",
"react-native-navigation": "^2.16.0"

Code:

Navigation.setDefaultOptions({
        topBar: {
            visible: false,
            drawBehind: true
        },
        animations: {
            pop: {
                content: {
                    alpha: {
                        from: 1,
                        to: 0,
                        duration: 300,
                        startDelay: 0,
                        interpolation: 'accelerate'
                    }
                }
            },
            push: {
                waitForRender: true,
                content: {
                    alpha: {
                        from: 0,
                        to: 1,
                        duration: 300,
                        startDelay: 0,
                        interpolation: 'accelerate'
                    }
                }
            }
        }
    });

[Dawqss]

What more information do you guys need ? I could provide them

[MatthewPattell]

Same problem only when I call method "pop".

    Navigation.setDefaultOptions({
        animations: {
            push: {
                enabled: 'true',
                content: {
                    x:     {
                        from:          wp('100%'),
                        to:            0,
                        duration:      200,
                        interpolation: 'accelerate',
                    },
                    alpha: {
                        from:          0,
                        to:            1,
                        duration:      200,
                        interpolation: 'accelerate',
                    },
                },
            },
            pop:  {
                enabled: 'true',
                content: {
                    x:     {
                        from:          0,
                        to:            wp('100%'),
                        duration:      200,
                        interpolation: 'accelerate',
                    },
                    alpha: {
                        from:          1,
                        to:            0,
                        duration:      200,
                        interpolation: 'decelerate',
                    },
                },
            },
        },

[pani7]

Same here, only on pop i get on IOS flicker of popped screen for a sec after custom animation ends

[stale[bot]]

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.

[Dawqss]

I upgraded version from 2.16 to 2.26.5 and the problem is gone :)

---

Yea so it's not working I didn't test pop() method, flickering still occurs :(

"react-native": "^0.61.1",
"react-native-navigation": "^3.2.0",

[FabianoAddmind]

Hi, still getting this error on 2.26.5.
Please, someone can help me?

[sharifMedici]

I am getting same problem on ios but I see there is no solution for it. is it a bug ?
"react-native": "0.60.5",
"react-native-navigation": "3.1.2",

[pribeh]

Not sure this is the relevant issue but as of 2.27.4 custom animations seem to have ceased working altogether.

[unmec]

I am seeing the white flash screen with screen push.

"react-native": "0.60.5",
"react-native-navigation": "^3.2.0",

With very basic vanilla setup like

Navigation.registerComponent('Nav', () => App);
Navigation.registerComponent('Screen1', () => Screen1);
Navigation.registerComponent('Screen2', () => Screen2);
Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      stack: {
        children: [
          { component: { name: 'Screen1' } },
          { component: { name: 'Screen2' } },
          { component: { name: 'Nav' } },
        ],
        options: {
          topBar: {
            visible: false,
          }
        }
      }
    }
  });
});

Navigation.push(this.props.componentId, {
    component: { name: 'Screen1' }
});

[stale[bot]]

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.

[ADCrouch]

I'm having the same issue, did you guys find a solution?

[nestedJSObject]

I also have this problem. Here is the structure of my app navigation:

const MainStack = createStackNavigator(
  {
    Home: HomeScreen,
    Shop: {
      screen: ShopScreen,
      navigationOptions: {
        gestureResponseDistance: {
          horizontal: Math.max(Dimensions.get('window').width, Dimensions.get('window').height),
        }
      }
    }
  },
  {
    headerMode: 'none',
  }
);

const RootStack = createStackNavigator(
  {
    Main: {
      screen: MainStack,
    },
    Cart: {
      screen: CartScreen,
      navigationOptions: {
        gesturesEnabled: false
      }
    },
  },
  {
    mode: 'modal',
    headerMode: 'none',
  }
);

export default createAppContainer(RootStack);

The error can be reproduced by going Home -> Shop -> Cart -> (pop to) Shop -> (pop to) Home -> Shop (again).

The last transition always produces the white flash for me.

[ADCrouch]

The problem for me was only with iOS.
I noticed that iOS is also not using my default values in Navigation.setDefaultOptions
So what I ended up doing was to cancel the animations only for iOS wherever I used costume animations since the native animation in iOS is anyway what I wanted (sliding left and right).

I used this:
animations: Platform.OS === 'ios' ? {} : androidAanimations

and my androidAnimation is:

    animations: {
        push: {
            enabled: 'true',
            waitForRender: true,
            content: {
                x: {
                    from: 2000,
                    to: 0,
                    duration: 300,
                    startDelay: 0,
                    interpolation: 'accelerate',
                },
            },
        },
        pop: {
            enabled: 'true',
            content: {
                x: {
                    from: 0,
                    to: 2000,
                    duration: 300,
                    startDelay: 0,
                    interpolation: 'decelerate',
                },
            },
        },
    },
},

[SudoPlz]

Yep I was using animations as well and disabled them, then it worked.

[stale[bot]]

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.

[pribeh]

Not stale.

[tiennv-0883]

I'm having the same issue, did you guys find a solution?

[MariuszSpeednet]

Same issue, version 4.0.8 (popping screens on iOS with custom alpha animation).

[bvelasquez]

Also same issue. Just posting so we don't go stale. For me, it's on setRoot.

[janoist1]

When using version 4 I set a background color by cardStyle: { backgroundColor: material.containerBgColor }
This does not work anymore:

  <Stack.Navigator
      screenOptions={{ cardStyle: { backgroundColor: material.containerBgColor } }}
  >

[jinshin1013]

@janoist1 It seems like you are using react-navigation.

[janoist1]

Ohh s#!%+t !

[stale[bot]]

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.

[stale[bot]]

The issue has been closed for inactivity.

[joeshub]

What's the deal with this issue, is it solved or will it ever get looked at?

[sharadrb]

Nothing worked for me with React Navigation 4. This is what worked for me to resolve flickering.
animationEnabled: false