React-native-navigation: [v2] Bottom tabs visibility problem

[yusufyildirim]

Issue Description

We have an app with bottom tabs. We want to navigate to another screen with hiding the bottom tabs. It's working but causes a UI bug when we go back, appears a white area (exact same height as bottom tabs). You can see below.

Steps to Reproduce / Code Snippets / Screenshots

Let's assume first screen is HomeScreen (with bottom tabs) and second screen is CommentsScreen. Just pass { bottomTabs: { visible: false, animated: true } } to CommentsScreen to hide bottom tabs.

---

Environment

• React Native Navigation version: v2 latest
• React Native version: 0.55.4
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): All

[jp928]

• 1 same issue here

[jp928]

@yusufyildirim
I found if set
{
bottomTabs: {
drawBehind: true
}
}

will be better

[yusufyildirim]

@jp928 i tried that too, still same

[husseinAbdulnabi]

the same here

[SKEPDIMI]

Similar issue here.

Bottom tabs cover content and sometimes cause whitespace mid-drag.
-

[InternetExplorer8]

Happens if a ScrollView with scrollbar is available in the parent view. It seems that the ScrollView height is calculated too early or too late.

[jp928]

@yusufyildirim
my temporary solution is when pushing to next screen, I declare the bottoms status explicitly so as when I do pop

Navigation.push(this.props.componentId, {
      component: {
        name: 'main.Leads',
        options: {
          bottomTabs: {
            visible: false,
            animate: false
          }
        }
      }
    });

While pop

Navigation.pop(this.props.componentId, {
      options: {
        bottomTabs: {
          visible: true,
          drawBehind: true
        }
      }
    });

I am using "react-native-navigation": "^2.0.2411",

Hope this help.

[phuongwd]

@jp928 thank you, it works on iOS. use _drawBehind: true_ for Android

Navigation.push(componentId, {
  component: {
    name   : componentName,
    options: {
      bottomTabs: {
        visible   : false,
        drawBehind: true, // for Android
        animate   : true
      }
    }
  }
});

I am using "react-native-navigation": "^2.0.2418"

[Neilgebbie]

I had this problem in our app and added

automaticallyAdjustContentInsets={false}

To the Scrollview - and it seems to have resolved the issue.

[Neilgebbie]

@yusufyildirim @jp928 - Can you confirm this fixes the flicker? and If so can we close this issue?

Thanks.

[manosim]

@Neilgebbie We are having exactly the same issue and unfortunately automaticallyAdjustContentInsets or drawBehind fixes the problem.

[Neilgebbie]

@manosim Are you using Flatlist or ScrollView?

I have the problem on Flatlist but not ScrollView. I'll probably spend tomorrow trying to find a fix for Flatlist.

[manosim]

@Neilgebbie Using Flatlist as well. Tried this but the issue persists:

<FlatList
  automaticallyAdjustContentInsets={ false }
  ...
/>

Will let you know if I find a workaround!

[Neilgebbie]

@manosim Ok - I have a feeling that the flatlist is not inheriting the prop I suggested above - because adding it to the scroll view in our other views fixed the bug.

Tomorrow I'll have a dig around and if I find anything I'll let you know.

[stafak]

I'm using ScrollView and the automaticallyAdjustContentInsets fix does unfortunately not work for me. In one screen where I've had the flickering issue, there is no difference. In another where I've had the blank area (that is flickering in the GIF above) persist after popping, it started flickering instead.

[husseinAbdulnabi]

found something that may help fix this issue,
just give the parent VIew of the ScrollView this style

style={{
   height: Dimensions.get("window").height, 
   paddingBottom: DEVICE_MODEL === "iPhone X" ? 70 : 50 /// i needed to push the content up because it was hidden behind the tabBar
}}

when you push:

options: {
  bottomTabs: {
      visible: false,
      animate: true,
      drawBehind: true
   }
}

[Vincenttbk]

Is there a fix for V1? Im using V1 right now and encountering the same issue...

[kfroemming]

Is there any update to this issue and a potential fix coming in next release?

[stafak]

This doesn't actually seem to be related to ScrollView in my case - even with a screen that only consists of an empty view I have this problem as long as it has flex: 1 or height: '100%'. @hisothreed's workaround works for me although it is very hacky.

[pribeh]

I've been using height of the window but I'm finding that across devices (especially new ones with different window areas like the X and newer androids) it is not a scaleable solution (definitely a hack). Each new device, that sports a larger screen area than traditional devices, requires different offsets. The more complex your design requirements, meaning the more different each screen is, the more superfluous the offsets will have to be. So not only do you need different offset values per device type but per screen. I cannot figure out a real solution.

I believe this is now the third or fourth issue posted about the same issue now. If the maintainers of RNN have any suggestions as to where we could look to try and solve the underlying cause within RNN it would be much appreciated :)

[kfroemming]

@stafak I can confirm you can reproduce it this way. Good catch.

[henrikra]

I am also experiencing this with RNN 2.0.2460. I am using FlatList Here is video of my bug https://drive.google.com/file/d/1lqfa194el91lAdeqiR1256hSoof-zMzN/view

Looks like automaticallyAdjustContentInsets={false} hack is fixing the cutting off problem. But it does not fix the flashing of the bottom :(

@guyca Any updates?

[JoMizu]

Can reproduce it very rarely in the simulator. On a real device, always. automaticallyAdjustContentInsets={false} on ScrollView didn't fix it for me. Any other workarounds?

[henrikra]

@JoMizu I guess @silyevsk is working on this since he assigned his self to this :)

[yogevbd]

Fixed bottomTabs flakiness.
Hiding bottomTabs is now possible on iOS when pushing screens only.
Shouldn't be any reason to use bottomTabs.animate.

[henrikra]

I have just tested version 2.0.2476 and your fix didn't help @yogevbd . Can other people try also if this helped them?

[yogevbd]

@henrikra What's your use case? We added e2e tests for it and it looks fine

[henrikra]

Screen A and B. Both of them have simple FlatList. I push new screen B from A. Screen B has bottomTabs hidden. When coming back from screen B the screen A's FlatList bottom flashes or is cut off like in the Gif above.

[stafak]

Can confirm the issue still exists.

[silyevsk]

@henrikra @stafak Somehow, I can't reproduce it. Can you please create a simple project where we can see this happening?

[henrikra]

Sure here is minimum reproduction repo: https://github.com/henrikra/rnn-bottom-tabs-bug

Here also video with where I can still see the bug with new repo: https://drive.google.com/open?id=1TSn9g3xT_O8J4BmIaQtPUxhOVVd_IcjC

I hope this helps you 👍

[silyevsk]

@henrikra Thanks! It helped, especially the video (I realised I have to try it many times to reproduce). I still didn't see it on simulator, but after several tries it reproduced on a device. I'll look into it in the coming days.

[fedosev]

I have the same issue.

[geastwood]

@silyevsk When you checking on the fix, would you also think of possibility to port it to V1? Thanks.

[yogevbd]

@yusufyildirim Should be solved now. Can you please verify? thanks!

[geastwood]

@yogevbd what would be the fix for V1? Would you provide a fix for V1 or probably give us a direction how to fix it? Thanks

[guyca]

@geastwood Sorry but v1 is not supported.

[geastwood]

@guyca Thanks for the quick response. I know it's not supported. But I guess there is a number of people still suffering from this issue on V1. Not asking to fix it on V1, just to spear a thought on what would be the possible fix and provide us with a direction. That would be much appreciated.

[guyca]

@yogevbd Can you please explain how you resolved the issue?

[pribeh]

@yogevbd I just tested this but unfortunately it didn't work on my end RNNv2.

https://github.com/wix/react-native-navigation/commit/feab91de5c248294a4c4cdc613fcf1150aeda155

I just noticed on v2 that if you employ react native tabview on the base screen that the tabs begin flickering and become unusable when this issue occurs.

[yogevbd]

Sorry, my bad, pushed another fix.. will be released in few minutes

[geastwood]

@yogevbd would you give us a hint how to fix this on V1? Thanks

[Neilgebbie]

@geastwood - Hey, we have this problem, but we're on the V2 branch. While I have never contributed to a large open source project like this I would assume the steps would be:

Once the fix is confirmed for V2:

• check the release log
• match up the commit or commits that worked to fix this issue
• implement it on the V1 Branch
• Create a PR

Good luck.

[pribeh]

@yogevbd I believe that worked! Thank you! I'll run a few more tests.

Only issue now is that it seems to have affected the alignment of my navbar (topbar) component oddly but I'll look into that now.

[update: I was able to resolve the alignment of the header component issue.]

[pribeh]

@yogevbd actually, it looks like it mostly solves the issue but there still is a very brief flicker. it's a single flash now.

[stafak]

Yep, still flashing a little unfortunately :(

[henrikra]

I think this issue should be closed when people have validated that it actually works

[silyevsk]

This issue comes from a collision between iOS behaviour with non-translucent tabBar and the way react-native works: If translucency is disabled for tabBar, then for some reason setFrame is called twice on RCTRootView - once with an incorrect (smaller) height, and then with the correct one after that. On iOS native it's not an issue, because only the last one is used. With React-native however, every setFrame triggers an update that is going to UIManager thread and then back to the main thread - which means it doesn't happen right away. In some cases it causes kind of a race condition (I'm not sure why exactly, need to go deeper to RN code to understand this) that may cause re-rendering with the wrong height, or even endless flickering - looks like changing the height from RN re-triggers additional RN update (but again, I'm not sure how exactly it happens in RN).
Anyways, the problem is not with RNN but with iOS+RN . If tabBar is translucent this won't happen. @yogevbd added a workaround at our side so that the size becomes correct after at most one flickering (which is still annoying but much better than what was sometimes happening until now).

[pribeh]

@silyevsk looks like setting translucent: true for the tabBar does rectify the problem! Your explanation makes sense. It does suck but at least this "trick" works. And, from my testing just now, you can set the tabBar to translucent and yet have a color and not permit drawing underneath the tabBar so this shouldn't interfere with anyone's design objectives.

[howg0924]

1393 Discussion thread for same issue on v1.

[farazirfan47]

Anybody solved this issue for FlatList ?

[Gavin97Dmello]

From all the testing i have done yet, I can clearly say that the problem is not of the ScrollView or the Flatlist.
The flicker is visible with or without any Flatlist/ScrollView been added to the Screen.

[Gavin97Dmello]

Issue Description

We have an app with bottom tabs. We want to navigate to another screen with hiding the bottom tabs. It's working but causes a UI bug when we go back, appears a white area (exact same height as bottom tabs). You can see below.

Steps to Reproduce / Code Snippets / Screenshots

Let's assume first screen is HomeScreen (with bottom tabs) and second screen is CommentsScreen. Just pass { bottomTabs: { visible: false, animated: true } } to CommentsScreen to hide bottom tabs.

Environment

• React Native Navigation version: v2 latest
• React Native version: 0.55.4
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): All

Here's the solution: Set your naviagtions to this configurations.
"react-navigation-drawer": "^2.3.3", "react-navigation": "^4.0.10", "react-navigation-stack": "^1.10.3", "react-navigation-tabs": "^2.6.2",

This must fix your issues. This config has been tested on android and ios