React-native-navigation: [Android] Tab bar overlap content

[khatv911]

Issue Description

Tab bars overlap the content in android. Should it add padding bottom to the inner content?

Steps to Reproduce / Code Snippets / Screenshots

---

Environment

• React Native Navigation version: 1.1.25
• React Native version: 0.43.4
• Platform(s) (iOS, Android, or both?):Android
• Device info (Simulator/Device? OS version? Debug/Release?): Xiaomi 4c 6.0 and geny motion android 5.0

[khatv911]

@Ehesp : any comment , Sir?

[guyca]

@khatv911 You probably have drawUnderTabBar: true in the navigatorStyle of that screen

[khatv911]

@guyca : thanks. i found out that it was because of my scrollview.

[Krizzu]

Just run into the same problem - iOS displays FlatList fine. On Android, list is being drawn under the TabBar, even if drawUnderTabBar is set to false.

@khatv911 What was your issue with ScrollView? Maybe this is somehow related :)

Android: 7.0/6.0/5.0
RN: 0.43.3
Navigation: 1.1.134

[kyle-ssg]

@krizzu, just a guess here but maybe you need to add a flex:1 to your flatlist (:

[Krizzu]

@kyle-ssg Have tried this already, no luck unfortunately.

[khatv911]

@Krizzu : try this,
if your scrollview/flatlist is below a navbar, Then, set the navbar on top of it . add some padding top(equals to Navbar height) to the contentcontainerview of the scrollview.

<View style={{flex:1}}>
   <scrollView contentContainerStyle={{paddingTop:56}}/>
   <NavBar styles={{
position: "absolute",
height:56
        top: 0,
        left: 0,
        right: 0,
        paddingTop:  STATUS_BAR_HEIGHT

}}/>
</View>