React-native-navigation: (Android) Black bar flying up on showModal() with slide-up animation

[VSchlattinger]

Issue Description

After upgrading from v1.1.219 to v1.1.220 or later, I start seeing a black bar fly up before my View appears in the slide-up animation when showing a modal.

I assume it happens, because the screen hasn't rendered when the animation starts, but before (with version 1.1.219 and lower) this wasn't a problem, because the screen would just fade in halfway up and there was no black bar moving upwards with it.

Steps to Reproduce / Code Snippets / Screenshots

Call

this.props.navigator.showModal({
            screen: "<screenID>", // unique ID registered with Navigation.registerScreen
            title: "Test", // navigation bar title of the pushed screen (optional)
            passProps: {}, // Object that will be passed as props to the pushed screen (optional)
            animationType: 'slide-up',
        });

on Android for some registered screenID (Tested it with a screen that renders just a View with a backgroundColor and flex: 1).

---

Environment

• React Native Navigation version: Problem happens in v1.1.220 and v1.1.334, but doesn't happen in v1.1.219 and lower
• React Native version: 0.51.0
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Samsung Galaxy S5 / Android 6.0.1 / Release

[guyca]

Hey @VSchlattinger
You can try showing the modal with the default screen animation which mitigates this issue.

Navigation.showModal({
  screen: "example.ModalScreen",
  animationType: 'screen'
});

You can control the default screen animation type on Android by setting screenAnimationType: 'screen' in AppStyle.

While we probably won't fix this issue in v1, it's resolved in v2. Sorry for the inconvenience.