nurwadula
nurwadula

Reputation: 109

React Native Tab View bottom space Bug

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;

enter image description here

Upvotes: 0

Views: 737

Answers (1)

Harsh Kukarwadiya
Harsh Kukarwadiya

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

Related Questions