React Native Tab Bar white space under tabs

Question

I am using a tab bar navigator with SafeAreaView.

If I comment out the tab bar nav the parent view covers the entire screen. However when I add a Tab bar it shows a small white view under the tab bar section.

const App = () => {
  return (
    <SafeAreaView style={styles.droidSafeArea}>
      <View style={{ backgroundColor: "red", flex: 1 }}>
        <TabNavigator key="MainTabNav" />
      </View>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  droidSafeArea: {
    flex: 1,
    backgroundColor: "#2F3438",
  }
});

Answer 1

Try this

  screenOptions={{
                        tabBarStyle: {
                            paddingBottom:0,         
                        },
                }}