React-native-navigation: [iOS] tabBarHidden flicker

[fokoz]

Issue Description

When we push screen from main navigator with tab bar and then tabBarHidden = true on pushed screen, there is some flicker on tab bar for the first push.

Steps to Reproduce / Code Snippets / Screenshots

1. Start tab-based app
2. Push some screen with tabBarHidden = true
3. There is some flicker when hiding tab bar (just for the first time after starting app)

---

Environment

• React Native Navigation version: 1.1.260
• React Native version: 0.48.3
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Device, iOS 10, Both Debug and Release

[frangeris]

Not only iOS, this issue is happening in Android too and is not necessary push any screen. I'm using a single tab with top tabs inside and a flatlist...

export const tabs = [
  {
    screen: 'xxxx',
    title: 'xxxxxx',
    topTabs: [
      {
        screenId: 'xxxx',
        icon: require('@assets/images/icon1.png')
      },
      {
        screenId: 'profile',
        icon: require('@assets/images/icon2.png')
      }
    ]
  }
]

    "react-native": "^0.52.2",
    "react-native-navigation": "github:wix/react-native-navigation#pull/2545/head",

Look the tabbar appearing at bottom with flicker effect...

@guyca any idea what is happening here?

Thanks

[bbdroid]

I am facing this issue on iOS too. Need help!

[manuhook]

Same issue.
Looks like it's linked to https://github.com/wix/react-native-navigation/issues/2849

[pribeh]

Whenever we push to a screen with the tabbar hidden from a screen with the tabbar visible and then the user navigates back to the tabbar visible screen we get obsessive flickering. This happens in iOS. Seems like there are a few issues in the queue of people reporting very similar issues.

[pribeh]

Setting the height to the container view of the initial screen with tabs that you navigate away from originally resolves the issue for me on ios. Just use:

const screen = Dimensions.get('window');

And then set

container: { height:screen.height }

to avoid the flicker. This has to be done on the screen which has the tabbar set to visible.

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

[manjeetwadi]

is that even fixed,
giving height and drawUnderTabbar:true isn't working if tabs are visible

[pribeh]

@manjeetwadi try setting the tabbar to translucent: true. If you need the tabbar to not be translucent then maybe add a background color to it.

[howg0924]

Thank you so~~~ much @pribeh. After looking for solution/workaround for almost a year, your one finally solved my problem.

Highly recommended for people with same problem to give it a try.

[manjeetwadi]

I did it with styles only

```const {width, height} = dimesions.get('window')
const styles = StyleSheet.create({
tabbbedContent:Platform.select(ios:{
height:height-TAB_BAR_HEIGHT,
width
},
adroid:{}
)
});

[lytieunuong1]

Don't need to calculate the height. This is my solution:

• At A screen, we call push function by this way:

this.props.navigator.push({
      screen: screenName,
      animated: true,
      animationType: "slide-horizontal",
      navigatorStyle: {
        drawUnderTabBar: true
      }
    })

• At B Screen: we call hide and show tab bar at componentWillMount and componentWillUnmount like bellow:

componentWillMount() {
    this.props.navigator.toggleTabs({
     to: 'hidden',
   });
  }

componentWillUnmount() { this.props.navigator.toggleTabs({ to: 'shown', }); }