How change background color in React Native when NOT using SafeAreaView?

Question

How can I change the color of the “iPhone app switcher” bottom bar here:

I want to build a fullscreen app so I’m not using SafeAreaView.

This is my main screen/layout component:

const Screen = (props: any): React.ReactElement => {
  const { backgroundColor = 'white' } = props
  return (
    <>
      <View
        style={[styles.container, { backgroundColor }]}
      >
        <StatusBar
          backgroundColor={backgroundColor === 'black' ? 'black' : 'white'}
          barStyle={backgroundColor === 'black' ? 'light-content' : 'dark-content'}
        />
        {props.children}
      </View>
    </>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  }
})

Answer 1

just need to change the tab bar backgroundColor like this

 <MainTab.Navigator
      screenOptions={{
        tabBarStyle:{
          backgroundColor:"black" //like this
        }
      }}>

  {...MaintabScreens}

</MainTab.Navigator>

Answer 2

Flex:1 should work in this case however you can Try Giving device height as the height it might solve the issue

const styles = StyleSheet.create({
  container: {
    height: Dimensions.get('screen').height,
    width: Dimensions.get('screen').width,
    justifyContent: 'center'
  }
})

Edit: on second thought did you give SafeAreaView to your bottom tab? can you share your bottom tab code?

also, you have your background color set to "white" so it should display white if you don't pass any background color try changing it to "black"

const { backgroundColor = 'white' } = props