CODEWITHSUNDEEP
reactjsreact-native
j.doe
j.doe

Reputation: 4869

How to change the background color of a screen?

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

Upvotes: 8

Views: 12050

Answers (3)

Sargis Tovmasyan
Sargis Tovmasyan

Reputation: 123

To change the background color of a screen in React Native to color #F5FCFF, you can set the background color in a View component as follows:

<View style={{backgroundColor: '#F5FCFF', flex: 1}}>
  ...
</View>

The flex: 1 style in React Native makes the View component take up all available space in its parent container. It tells the component to grow and fill the available space, ensuring it expands to fill the screen or its parent container, providing a flexible layout.

Upvotes: 0

Ashwin Mothilal
Ashwin Mothilal

Reputation: 2532

If you want to change the header color, then try this.

static navigationOptions = {
     title: navigation.state.params.title,
     headerStyle: {backgroundColor:"red"}}

If you want to change the background color of the screen that is rendered then set

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

Upvotes: 0

nhoxbypass
nhoxbypass

Reputation: 10162

Try adding tintColor to your navigation options 

static navigationOptions = {
    title: navigation.state.params.title,
    header: navigation => ({
      titleStyle: {
        color: '#FFFFFF'
      },
      tintColor: '#F5FCFF'
    })
}

Upvotes: 0

Related Questions