React-native-navigation: waitForRender

[lfabreges]

Question

Is there any way to wait for the react view to render before pushing it to avoid flickering effects ? I'm using the 2.0 branch.

[DanielZlotin]

What exact version of react-native-navigation are you using?

[lfabreges]

2.0.0-experimental.300

[DanielZlotin]

This needs some research. Will be handled after 2.0.0 is ready

[grundmanise]

@DanielZlotin This feature alone would greatly improve a UX. There are a lot of issues that address flickering, and waitForRender would solve this.

[guyca]

This has been implemented a while ago for both platforms, for push and showModal

animations: {
  push: {
    waitForRender: true
  },
  showModal: {
    waitForRender: true
  }
}

[rh389]

@guyca is waitForRender available for the initial setRoot?

[hossamnasser938]

@rh389 yes, it exists. See here.

[nenjamin2405]

Hi @guyca, I cannot see the option of waitForRender when I use mergeOptions to programatically select tab:

Navigation.mergeOptions(componentID, {
      bottomTabs: {
        currentTabIndex: tabIndex,
      },
    });

I am using a custom bottom tab navigator and I use the above code to change tab programatically. However at the first render, it will have a white flash when I switch to new tab. My app is in dark theme, and I already read this issue https://github.com/wix/react-native-navigation/issues/358, so could you please help me in this case. How should I call waitForRender in this case. Thank you

[guyca]

@nenjamin2405 Please create a separate issue and provide details on your app's structure.

[sebastianistoblame]

As of now (RNN 4.8.3) I can only warn everyone about using waitForRender.
It turned out it had serious rendering side-effects, for instance disappearing (flickering) bottomTabs when pushing a screen. Also, the bottomTab icon color was wrong, when pushing without explicitly setting the bottomTab color again. Removing it solved most of our rendering issues.

tl;dr don't use waitForRender, unless you have a serious reason.

[janlonden]

@nenjamin2405 I have the same problem. Did you find a solution?

[guyca]

@janlonden Can you please fork the library and push a reproduction to your fork? We'll look into it.

[Abhishek-Sankey]

This has been implemented a while ago for both platforms, for push and showModal

animations: {
  push: {
    waitForRender: true
  },
  showModal: {
    waitForRender: true
  }
}

maybe I'm asking a silly question but where should I write this code in the project?