TabNavigator covers content - reactjs

Question

I have this component that contains a list that is covered on the bottom side by the TabNavigator. Any ideas how to fix it? Is there only a styling way?
render() {
return (
<Container style={{ paddingBottom: 5 }}>
<Header
backgroundColor={'#1E6EC7'}
placement="left"
leftComponent={{ icon: 'menu', color: '#fff' }}
centerComponent={{ text: 'Programul Zilei', style: { color: '#fff', fontWeight: 'bold', fontSize: 22 } }}
rightComponent={<Icon name="ios-add" style={{ color: 'white' }} onPress={() => {
const {students}=this.props;
this.props.navigation.navigate('AddClass', {students})}} />}
/>
<List>
<FlatList
data={this.props.classes}
keyExtractor={(item, index) => `${index}`}
extraData={this.state}
renderItem={({ item }) => {
<ListItem
leftIcon={<View style={{ flexDirection: 'row' }}><Icon1 name="times" size={24} style={{ paddingRight: 10, color: 'red' }} onPress={() => {
this.setState({ currentStudent: wantedEmployee })
this.setState({ currentClass: item })
this.props.classDeleteModalShowUp();
}} />
}
/>
</List>
</Container>

Answer 1

You can hide the tab navigator for that specific screen setting
tabBarVisible as false in navigationOptions.
But I think the issue is because of the header, you can try using the react navigation header bar.
Otherwise you could add to the container a paddingBottom of the same height as the header