CODEWITHSUNDEEP
react-nativesafeareaview
Tom Söderlund
Tom Söderlund

Reputation: 4747

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

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

app switcher bar

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'
  }
})

Upvotes: 1

Views: 1495

Answers (2)

Muhammad Numan
Muhammad Numan

Reputation: 25413

just need to change the tab bar backgroundColor like this

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

  {...MaintabScreens}

</MainTab.Navigator>

Upvotes: 1

Bhavya Koshiya
Bhavya Koshiya

Reputation: 1806

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

Upvotes: 0

Related Questions