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>