React-native-navigation: React-native-navigation [V2] - Android - modal's topBar visible before modal opens

Created on 13 Jan 2019 · 17Comments · Source: wix/react-native-navigation

Issue Description

I am using react-native-navigation v2. I've put in place a fairly basic navigation to open a modal.

The issue I am having is that on Android the topBar of my modal appears before the modal has appeared, giving on top of it a flickering effect (see gif below, compares between iOS and Android). I've played around with many config options... but could not get to a smooth page transition (it kind of is the same issue when I push on a stack, the transition on Android is not smooth).

androidflickermodal

Steps to Reproduce / Code Snippets / Screenshots

in my index.js

import { Navigation } from "react-native-navigation";
import { Home, AddIdeaScreen } from './src/screens';
// ...
// Store Config
import { Provider } from 'react-redux';
import configureStore from './src/store/configureStore';

const store = configureStore();

Navigation.events().registerAppLaunchedListener(() => {
   Navigation.registerComponentWithRedux(`Home`, () => Home, Provider, store);
   Navigation.registerComponentWithRedux(`AddIdeaScreen`, () => AddIdeaScreen, Provider, store);

  Navigation.setDefaultOptions({
    layout: {
      orientation: ['portrait']
    },
    topBar: {
      visible: true,
      drawBehind: false
    },
    animations: {
      push: {
        waitForRender: true,
      },
      showModal: {
        waitForRender: true
      }
    }
  });
  Promise.all([
    Icon.getImageSource("magnify", 30),
    Icon.getImageSource("account", 30),
  ]).then(source => {
    Navigation.setRoot({
      root: {
        stack: {
          children: [{
            component: {
              name: "Home",
              options: {
                topBar: {
                  testID: "Home.TopBar",
                  background: {
                    color: themeVars.brandPrimary
                  },
                  title: {
                    text: i18n.t('Home.title'),
                    color: "white"
                  },
                  rightButtons: [{
                      id: 'viewProfile',
                      icon: source[1],
                      color: "white",
                      testID: "Home.profileButton"
                  }, {
                      id: 'searchFriends',
                      icon: source[0],
                      color: "white",
                      testID: "Home.friendsButton"
                  }],
                }
              }
            }
          }
          ]
        }
      }
    })
  })
});

Then in my App.js (my home page), my Fab has an onPress event: onPress = {this.FabClickedHandler}

import React, { Component } from 'react';
// ...
class Home extends Component {
constructor(props) {
        super(props);
    }
FabClickedHandler = () => {
    Promise.all([
      MaterialIcon.getImageSource("close", 30)
    ])
    .catch(err => {
      alert(err);
    })
    .then(source => {
      Navigation.showModal({
        stack: {
          children: [{
            component: {
              name: 'AddIdeaScreen',
              options: {
                topBar: {
                  testID : 'AddIdeaScreen.title',
                  background: {
                    color: themeVars.brandPrimary
                  },
                  leftButtons: [{
                    id: 'cancelButton',
                    testID: 'AddIdeaScreen.cancelButton',
                    ...Platform.select({
                      ios: { text: i18n.t('AddIdeaScreen.cancelButton'), },
                      android: { icon: source[0], }
                    }),
                    color: "white"
                  }],
                  rightButtons: [{
                    id: 'saveButton',
                    testID : 'AddIdeaScreen.saveButton',
                    text: i18n.t('AddIdeaScreen.saveButton'),
                    enabled: false,
                    color: "white"
                  }],
                  title: {
                    text: i18n.t('AddIdeaScreen.title'),
                    color: "white"
                  }
                }
              }
            }
          }]
        }
      })
    })
  }
  // ...
  render() {
  return (
  // ...
                   <Fab
                        active={true}
                        position='bottomRight'
                        testID='Home.FabButton'
                        onPress={this.fabClickedHandler}
                        style={{ backgroundColor: themeVars.brandPrimary }}
                    >
                        <Icon name="plus" type='MaterialCommunityIcons'></Icon>
                    </Fab>
// ...
)}
}

Environment

"native-base": "^2.10.0"
"react": "16.6.3"
"react-native": "0.57.8"
"react-native-navigation": "^2.6.0"
Platform(s) (iOS, Android, or both?): Android
Device info (Simulator/Device? OS version? Debug/Release?): Simulator API 27, 28 and real device

🏚 stale

Source

jojomillennium

Most helpful comment

Still an issue

L-Yeiser on 8 Aug 2019

👍5

All 17 comments

A work around until this gets fixed - When you call showModal pass visible: false, and in the componentDidMount update the visibility.

Navigation.showModal({
  stack: {
    children: [{
      component: {
        name: 'Login',
        options: {
          topBar: {
            visible: false,
          },
        },
      },
    }],
  },
});

Then in the Login component

componentDidMount() {
  Navigation.mergeOptions(
    this.props.componentId,
    {
      topBar: {
        visible: true,
        animate: false,
      },
    },
  );
}

L-Yeiser on 17 Jan 2019

@L-Yeiser , Thank you for suggesting this approach.

Unfortunately it does not solve it fully, as we still see it appear very quick, and it creates a flickering on the screen, see below.

2019-01-17_07-35-07

I played around, trying setting the visible:false at setDefaultOptions, but without any success.

jojomillennium on 17 Jan 2019

Issue Description

I am using react-native-navigation v2. I've put in place a fairly basic navigation to open a modal.

androidflickermodal

Steps to Reproduce / Code Snippets / Screenshots

in my index.js

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setDefaultOptions({
    layout: {
      orientation: ['portrait']
    },
    topBar: {
      visible: true,
      drawBehind: false
    },
    animations: {
      push: {
        waitForRender: true,
      },
      showModal: {
        waitForRender: true
      }
    }
  });
  Promise.all([
    Icon.getImageSource("magnify", 30),
    Icon.getImageSource("account", 30),
  ]).then(source => {
    Navigation.setRoot({
      root: {
        stack: {
          children: [{
            component: {
              name: "IdeasScreen",
              options: {
                topBar: {
                  testID: "Home.TopBar",
                  background: {
                    color: themeVars.brandPrimary
                  },
                  title: {
                    text: i18n.t('Home.title'),
                    color: "white"
                  },
                  rightButtons: [{
                      id: 'viewProfile',
                      icon: source[1],
                      color: "white",
                      testID: "Home.profileButton"
                  }, {
                      id: 'searchFriends',
                      icon: source[0],
                      color: "white",
                      testID: "Home.friendsButton"
                  }],
                }
              }
            }
          }
          ]
        }
      }
    })
  })
});

Then in my App.js (my home page), my Fab has an onPress event: onPress = {this.FabClickedHandler}

FabClickedHandler = () => {
    Promise.all([
      MaterialIcon.getImageSource("close", 30)
    ])
    .catch(err => {
      alert(err);
    })
    .then(source => {
      Navigation.showModal({
        stack: {
          children: [{
            component: {
              name: 'AddIdeaScreen',
              options: {
                topBar: {
                  testID : 'AddIdeaScreen.title',
                  background: {
                    color: themeVars.brandPrimary
                  },
                  leftButtons: [{
                    id: 'cancelButton',
                    testID: 'AddIdeaScreen.cancelButton',
                    ...Platform.select({
                      ios: { text: i18n.t('AddIdeaScreen.cancelButton'), },
                      android: { icon: source[0], }
                    }),
                    color: "white"
                  }],
                  rightButtons: [{
                    id: 'saveButton',
                    testID : 'AddIdeaScreen.saveButton',
                    text: i18n.t('AddIdeaScreen.saveButton'),
                    enabled: false,
                    color: "white"
                  }],
                  title: {
                    text: i18n.t('AddIdeaScreen.title'),
                    color: "white"
                  }
                }
              }
            }
          }]
        }
      })
    })
  }

Environment

"native-base": "^2.10.0"
"react": "16.6.3"
"react-native": "0.57.8"
"react-native-navigation": "^2.6.0"
Platform(s) (iOS, Android, or both?): Android
Device info (Simulator/Device? OS version? Debug/Release?): Simulator API 27, 28 and real device

please can i have your code-source

tidianeb5 on 18 Jan 2019

Issue Description

I am using react-native-navigation v2. I've put in place a fairly basic navigation to open a modal.
The issue I am having is that on Android the topBar of my modal appears before the modal has appeared, giving on top of it a flickering effect (see gif below, compares between iOS and Android). I've played around with many config options... but could not get to a smooth page transition (it kind of is the same issue when I push on a stack, the transition on Android is not smooth).
androidflickermodal

Steps to Reproduce / Code Snippets / Screenshots

in my index.js

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setDefaultOptions({
    layout: {
      orientation: ['portrait']
    },
    topBar: {
      visible: true,
      drawBehind: false
    },
    animations: {
      push: {
        waitForRender: true,
      },
      showModal: {
        waitForRender: true
      }
    }
  });
  Promise.all([
    Icon.getImageSource("magnify", 30),
    Icon.getImageSource("account", 30),
  ]).then(source => {
    Navigation.setRoot({
      root: {
        stack: {
          children: [{
            component: {
              name: "IdeasScreen",
              options: {
                topBar: {
                  testID: "Home.TopBar",
                  background: {
                    color: themeVars.brandPrimary
                  },
                  title: {
                    text: i18n.t('Home.title'),
                    color: "white"
                  },
                  rightButtons: [{
                      id: 'viewProfile',
                      icon: source[1],
                      color: "white",
                      testID: "Home.profileButton"
                  }, {
                      id: 'searchFriends',
                      icon: source[0],
                      color: "white",
                      testID: "Home.friendsButton"
                  }],
                }
              }
            }
          }
          ]
        }
      }
    })
  })
});

Then in my App.js (my home page), my Fab has an onPress event: onPress = {this.FabClickedHandler}

FabClickedHandler = () => {
    Promise.all([
      MaterialIcon.getImageSource("close", 30)
    ])
    .catch(err => {
      alert(err);
    })
    .then(source => {
      Navigation.showModal({
        stack: {
          children: [{
            component: {
              name: 'AddIdeaScreen',
              options: {
                topBar: {
                  testID : 'AddIdeaScreen.title',
                  background: {
                    color: themeVars.brandPrimary
                  },
                  leftButtons: [{
                    id: 'cancelButton',
                    testID: 'AddIdeaScreen.cancelButton',
                    ...Platform.select({
                      ios: { text: i18n.t('AddIdeaScreen.cancelButton'), },
                      android: { icon: source[0], }
                    }),
                    color: "white"
                  }],
                  rightButtons: [{
                    id: 'saveButton',
                    testID : 'AddIdeaScreen.saveButton',
                    text: i18n.t('AddIdeaScreen.saveButton'),
                    enabled: false,
                    color: "white"
                  }],
                  title: {
                    text: i18n.t('AddIdeaScreen.title'),
                    color: "white"
                  }
                }
              }
            }
          }]
        }
      })
    })
  }

Environment

"native-base": "^2.10.0"
"react": "16.6.3"
"react-native": "0.57.8"
"react-native-navigation": "^2.6.0"
Platform(s) (iOS, Android, or both?): Android
Device info (Simulator/Device? OS version? Debug/Release?): Simulator API 27, 28 and real device

please can i have your code-source

What other code would help investigate? Other parts of my code is not related to Navigation so irrelevant to this question.
I've updated a bit the initial post to had a few imports I use. The rest is pure layout.

jojomillennium on 18 Jan 2019

I'm experiencing the same issue.

FransTwisk on 23 Jan 2019

I decided to move away from RNN for the modal part only and use the 'Modal' from react-native.

jojomillennium on 23 Jan 2019

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] on 22 Feb 2019

This is still an issue.

L-Yeiser on 22 Feb 2019

stale[bot] on 24 Mar 2019

Same problem for me when pushing screens or showing Modals on Android with waitForRender: true. The flickering of the TopBar does not occur when setting waitForRender to false. However that does of course display a blank screen for some time, only trading one kind of flickering for another.