React-native-navigation: Iphone X tabBar flickers

[lovebehl]

Issue Description

While implementing FlatList i found a unexpected bug which occurs only in iphone X, i guess because of padding issue of tabbar it is happening.
Whenever a screen is pushed on tabbar and in that tabbar screen if you used FlatList, while coming back to the tabbar screen it starts flickering.

Steps to Reproduce / Code Snippets / Screenshots

Video showing flickering

---

Environment

• React Native Navigation version: 1.1.458
• React Native version: 0.55.2
• Platform(s) (iOS, Android, or both?): iOS only on iphone X
• Device info (Simulator/Device? OS version? Debug/Release?): All

[Agontuk]

Facing the same problem, though I only tested it with RN 55. I only used the simulator since I don't have the device. Does this also occur in previous RN versions ?

[rf1804]

@Agontuk i haven't checked with previous versions as i noticed this bug only now while testing on iphone X

[omar-dev]

I am having the same problem with V2, however I suspect that it has to do the bottom tabs as I am pushing a new screen with tabs hidden when I go back it flickers the ScrollView

[Agontuk]

@omar-dev, my problem exactly. But I'm using V1. Another question, does safearea work with tabBarHidden: true in V2 ? In V1, it doesn't work, you have to manually wrap all screen with SafeAreaView.

[rf1804]

@omar-dev i haven't hidden the tabs, it is normal tabs only and i'm using V1

[a6051529]

Facing the same problem

[danieljvdm]

has anyone gotten anywhere with this? It looks really really bad on the iPhone x

[steverob]

Facing the same issue. :(

[nikechanhk]

I have a "dirty" way to solve this.

You can use a View to wrap the Scrollview or Flatlist and hardcode the height of the view to 641
<View style={{height: 641}}>
<FlatList style={{flex: 1}}
/>
</View>

Since this issue only happen on iphone X, you can set the height(641) only apply to iphone X

I hope someone can provide a officially solution soon.

[Agontuk]

any update on this issue? Have you guys found any other possible workaround ?

[omar-dev]

@Agontuk setting the height on the scrollView did solve it for me.

[steverob]

I'm seeing this issue across all iOS devices. Any idea how the 641 number was arrived at so I can apply this fix to other iOS device sizes? @nikechanhk

[simonmitchell]

Has anyone tried fixing this by using onLayout and passing the calculated height back in? @steverob perchance you found a solution? I tried using the height from onLayout but it didn't seem to sort it (And returned a very different number to 641)

[simonmitchell]

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

[jjbeach]

hey @simonmitchell any idea how to fix this for v2?

[steverob]

@simonmitchell hey buddy can you check my issue #3440 please? Are you using custom nav bar in your project? It does not render after merging your PR :( Would love your help here!! ❤️

[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.

[messense]

Same issue.

[simonmitchell]

Hi sorry @steverob I haven't been working on this for a while I'm afraid, and unsure why it would have caused issues with your custom nav bar title component 😢

[a-golovanov]

I think I tracked down the issue to the interaction of iOS layout manager and RN layout manager. The issue can be fixed by adding the following code to RCTRootContentView.m at the bottom of the file right before @end

- (void)reactSetFrame:(CGRect)frame
{
  // ignore, the frame is maintained by RCTRootView
}

After the fix is applied, an occasional single blink may occur from time to time, but it's not as bad as without the fix.

To create and automatically apply the patch you can use handy patch-package, see this blog for a detailed explanation of patch-package usage.

I recommend generating the patch with --include .*RCTRootContentView\.m$ flag to avoid Xcode generated changes, and it will take a few minutes to complete because of all the additional files added by npm/yarn and XCode.

[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.