Reputation: 109
this is my code. and below the code, u can see the view. I can't get rid of that empty space. what is wrong here? I'm using this library https://www.npmjs.com/package/react-native-tab-view.my react-native version is 0.68.1. what I found is something wrong with SafeAreaView, if I remove it then there is no empty space but the top search bar mess with top area. is this problem bc of Bottom tab?
import {
View,
StyleSheet,
Dimensions,
StatusBar,
SafeAreaView,
Text,
} from 'react-native';
import {TabView, SceneMap} from 'react-native-tab-view';
import {Theme} from '../../../util/styles';
const FirstRoute = () => (
<View style={[styles.scene, {backgroundColor: '#ff4081'}]}>
<Text>sdssd</Text>
</View>
);
const SecondRoute = () => (
<View style={[styles.scene, {backgroundColor: '#673ab7'}]} />
);
const initialLayout = {width: Dimensions.get('window').width};
const renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
});
const TestHomTab = () => {
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{key: 'first', title: 'First'},
{key: 'second', title: 'Second'},
]);
return (
<SafeAreaView
style={{
flex: 1,
backgroundColor: Theme.palette.DUSTYROSE,
justifyContent: 'center',
}}>
<StatusBar
translucent
barStyle="dark-content"
backgroundColor="transparent"
/>
<TabView
navigationState={{index, routes}}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
style={styles.container}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
marginTop: StatusBar.currentHeight,
},
scene: {
flex: 1,
},
});
export default TestHomTab;
Upvotes: 0
Views: 737
Reputation: 508
It is because of the <SafeAreaView>
which is imported from 'react-native'
.
Please import the <SafeAreaView>
from react-native-safe-area-context
.
This might get rid of that space at the bottom.
Thanks!!
Upvotes: -1