React-native-navigation: Height error tabBar when we pop

[Tekosawa]

Issue Description

When we launch app with startTabBasedApp, and I push new screen without tabBar, and when we go back to a screen with TabBar, the height of the TabBar is wrong

Here, if you want see the result :
https://youtu.be/70fwvdQ-2F4

Steps to Reproduce / Code Snippets / Screenshots

Start application with startTabBasedApp, push a new screen without tabBar

this.props.navigator.push({
    screen: 'example.newScreen',
    passProps: {},
    animated: true,
    navigatorStyle: {
        navBarHidden: true,
        tabBarHidden: true,
        navBarTransparent: true,
        navBarTranslucent: Platform.OS === 'ios',
    },
    animationType: 'none',
});

And pop on previous screen with TabBar.

Environment

• React Native Navigation version: 1.1.386
• React Native version: 0.51
• Platform(s) (iOS, Android, or both?): iOS only
• Device info (Simulator/Device? OS version? Debug/Release?): Device, Release (Sometime on Simulator, but hard to reproduce) - iOS 11.2

[Tekosawa]

When we pop too fast just after the push, controller recreate area above of tabbar on simulator.

Create startTabBasedApp and on screen pushed, write this code :

https://gist.github.com/Tekosawa/4d4127a548518e84377267aaa3c56869

Push the screen with parameter in my first post and after 5-10 retry (2-3 second)) you will enable to recreate the bug.

[margox]

+1

[manuhook]

+1 (only on Iphone X + react-native 0.55.2)

[felipemartim]

Same thing here. This has been happening for a long time now.

[harshalbid271]

Anyone found a fix for this?

[steverob]

Facing this issue on iPhone X after upgrade to 55.4 from 52.3 :(

[simonmitchell]

Done a bit of digging into this, it seems like it's the RCTRootContentView that has the incorrect height. RCTRootView adds it as a subview and set's it's frame in layoutSubviews like so:

- (void)layoutSubviews
{
  [super layoutSubviews];
  _contentView.frame = self.bounds;
  _loadingView.center = (CGPoint){
    CGRectGetMidX(self.bounds),
    CGRectGetMidY(self.bounds)
  };
}

however it seems like on popping something goes wrong, and the content view is resized in the incorrect order (I'm popping from Pixie.PaySettingsPage to Pixie.PayPage). The intermediate 695 height seems to skew things, but I have no idea why. Seems like there must be something asynchronous going on under the hood which is breaking things. Does anyone know much about the native layout within React Native?

2018-06-21 10:48:10.341671+0100 Pixie[37391:765318] [RCTRootView] Layout Subviews: {{0, 0}, {375, 724}} (Pixie.PaySettingsPage)
2018-06-21 10:48:31.371424+0100 Pixie[37391:765318] [RCTRootView] Layout Subviews: {{0, 0}, {375, 724}} (Pixie.PaySettingsPage)
2018-06-21 10:48:31.371760+0100 Pixie[37391:765318] [RCTRootView] Layout Subviews: {{0, 0}, {375, 763}} (Pixie.PayPage)
2018-06-21 10:48:31.372490+0100 Pixie[37391:765318] [RCTRootContentView] Layout Subviews: {{0, 0}, {375, 763}}
2018-06-21 10:48:31.377384+0100 Pixie[37391:765318] [RCTRootContentView] Layout Subviews: {{0, 0}, {375, 763}}
2018-06-21 10:48:31.878801+0100 Pixie[37391:765318] [RCTRootView] Layout Subviews: {{0, 0}, {375, 695}} (Pixie.PayPage)
2018-06-21 10:48:31.879084+0100 Pixie[37391:765318] [RCTRootContentView] Layout Subviews: {{0, 0}, {375, 695}}
2018-06-21 10:48:31.881934+0100 Pixie[37391:765318] [RCTRootView] Layout Subviews: {{0, 0}, {375, 729}} (Pixie.PayPage)
2018-06-21 10:48:31.882285+0100 Pixie[37391:765318] [RCTRootContentView] Layout Subviews: {{0, 0}, {375, 729}}
2018-06-21 10:48:31.884478+0100 Pixie[37391:765318] [RCTRootContentView] Layout Subviews: {{0, 0}, {375, 695}}
2018-06-21 10:48:31.898935+0100 Pixie[37391:765318] [RCTRootContentView] Layout Subviews: {{0, 0}, {375, 695}}

[simonmitchell]

Please try giving my PR a go and see if it fixes the issues you're seeing. Worked wonders for me!

[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 version and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[howg0924]

I recommend people with tabBar flicker issue to give pribeh's method a try:

https://github.com/wix/react-native-navigation/issues/2184#issuecomment-397830334

It solved the issue for me (V1). The main concept is to give the screen with tabs a fixed height.