React-native-tab-view: SafeAreaView not working with TabBar

[steoo]

To support iPhone X I should use SafeAreaView ( https://reactnavigation.org/docs/en/handling-iphonex.html ) but when used with TabBar it doesn't work

render() {
    return (
     <SafeAreaView>
        <TabView
            style={this.props.style}
            navigationState={this.state}
            renderScene={this._renderScene}
            renderTabBar={this._renderTabBar}
            tabBarPosition="bottom"
            onIndexChange={this._handleIndexChange}
            swipeEnabled={false}
        />
     </SafeAreaView>
    );
}

if used like this nothing is shown on video

[satya164]

What do you mean by it does not work? Also you probably want to wrap TabBar in SafeAreaView instead of the whole TabView

[steoo]

It does not show anything on video, the TabBar is not visible and neither the Scenes

[satya164]

You probably need flex: 1 on the SafeAreaView. Anyway, you should wrap the individual scenes and TabBar in SafeAreaView instead of the whole TabView.

[steoo]

Going to try it. The problem is that the TabView goes under the "software" button

[steoo]

Setting flex: 1 on SafeAreaView did the trick, thank you :)

[ishigamii]

@steoo close the issue if it is resolved

[originalix]

thanks! flex: 1 resolved my problem 👍

[Champkinz]

@steoo this fixed the issue flex: 1, long live steoooo ✅

[hemantbavle1]

flex: 1 not working!!!

Below is my code
`` return ( <SafeAreaView style={styles.container}> <Text style={styles.headerText}> {Courses: ${userCourses.length}`}

data={userCourses}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => (
this.onCourseItemClick(item)
}} />
)}
/>
tabs={[
{
icon: 'ios-home',
title: 'Home',
onPress: this.selectTab,
isActive: this.state.activeTab === 0,
},
{
icon: 'ios-book',
title: 'Courses',
onPress: this.selectTab,
isActive: this.state.activeTab === 1,
},
{
icon: 'ios-clock',
title: 'Moments',
onPress: this.selectTab,
isActive: this.state.activeTab === 2,
},
{
icon: 'ios-notifications',
title: 'Notifications',
onPress: this.selectTab,
isActive: this.state.activeTab === 3,

                },
            ]}
        />
        </SafeAreaView>
    );

const styles = StyleSheet.create({
loadingContainer: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
container: {
flex: 1,
backgroundColor: '#fff'
},
headerText: {
marginTop: 10,
alignSelf: 'center'
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
paddingBottom50: {
bottom: 50,
}
});

```