To see this working, head to your live site.

Change the background color of a screen with react native

I navigate to a view with stack navigator. The new screen has a different background color #E9E9EF, I do not know where it comes from. I figured out that this color is set in react-navigation/lib/views/CardStack/Card.js. I tried to change the view background color but it didn't worked

return (
  <View style={{backgroundColor: '#F5FCFF'}}></View>
)

I also tried to change the card style with this code in StackNavigator and the color didn't changed

Other: {
    screen: AppOtherContainer,
    cardStyle: {backgroundColor: 'red'},
    navigationOptions: ({navigation}) => ({
      title: navigation.state.params.title
    })
  }

1 comment

Answers (1)

AnswerDeveloper

Dec 30, 2022

To customize the style of the card in a StackNavigator, you can use the cardStyle option in the route configuration of your navigator.

Here's an example of how you can change the background color of the card to red:


const AppStackNavigator = createStackNavigator({
  Other: {
    screen: AppOtherContainer,
    cardStyle: {backgroundColor: 'red'},
    navigationOptions: ({navigation}) => ({
      title: navigation.state.params.title
    })
  },
});

Note that the cardStyle option only applies to the screen component of the route, not the entire screen. If you want to change the background color of the entire screen, you can set the backgroundColor style on the container component that surrounds the StackNavigator.


<View style={{ flex: 1, backgroundColor: 'red' }}><AppStackNavigator /></View>