Wrapping SafeAreaView creates a white gap between the navbar and status bar

[Qasim Albaqali]

To support iPhone X I am using SafeAreaView from 'react-native'. When wrapping the View that holds the NavigationBar and right under it some content, leaves me with a white gap that is 20 in height. Removing NavigationBar gives the outcome that is needed. Anyone came across this kind of issue?

When using the inspector on the gap it shows that the height 20 is coming from the package.

<SafeAreaView style={styles.container}>
                <Navbar
                    editMode={this.state.editMode}
                    imageSource={
                        strings.getLanguage() === 'en'
                            ? require('../../../assets/images/logos/wordmark_english.png')
                            : require('../../../assets/images/logos/ar_text_logo.png')
                    }
                    onPressFilter={this.onPressFilter.bind(this)}
                />
                <View style={styles.content}>
                    <PoolListView
                        refreshing={this.state.refresh}
                        refreshPools={this.refreshPools}
                        favourites={this.state.favourites}
                        pools={this.state.pools}
                        navigation={this.props.navigator}
                    />
                </View>
            </SafeAreaView>

Navbar is a custom component that just returns NavigationBar, it is not wrapped with any other View, it just returns NavigationBar. Here is the styles that I am using

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: colors.softLavender,
    },
    content: {
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 80,
        backgroundColor: colors.softLavender,
    },
    filterButton: {
        marginRight: 30,
        marginLeft: 30,
        marginTop: 0,
        justifyContent: 'center',
    },
    noPoolsContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    noPoolsText: {
        fontFamily: 'SSTArabic-Roman',
        textAlign: 'center',
        color: colors.black,
    },
});

EDIT

By removing the status bar style in styles.js the issue is fixed.

[deepak28]

Where this file located? styles.js

[Marry Jin]

@qasimalbaqali is using thischanges but nothing is happening

[Marry Jin]

@deepak28 you can give backgroundColor to safeareaview to achieve this