'Change app background color in React Native

I'm trying to change the color of the background in my react native app, from grey to white. I'm using react-navigation to make a TabNavigator after I render it. I tried to put this TabNavigator in a view and set backgroundColor but all screen became white. How can I solve this?

index.js

...
render() {
    return (
        <View style={{ backgroundColor: '#FFFFFF'}}>
            <Tabs />
        </View>
    )
  }
...

Tabs

...
const Tabs = TabNavigator(
  {
    Home: {
      screen: HomeStack,
      navigationOptions: {
        title: 'Acasa',
      },
    },
    ...
    Account: {
      screen: AccountScreen,
      navigationOptions: {
        title: 'Contul meu',
      },
    },
  },
  {
    tabBarComponent: props => <FooterNavigation {...props} />,
    tabBarPosition: 'bottom',
    initialRouteName: 'Home',
  },
);
...

Home Screen

render() {
    const {
      data, refreshing, loading, error,
    } = this.state;

    return (
      <ScrollView>
        <Container>
          {error && <Text>Error</Text>}
          {loading && <ActivityIndicator animating size="large" />}

          <List>
            <FlatList
              data={data}
              renderItem={({ item }) => (
                <ListItem onPress={() => this.props.navigation.navigate('Item', item)}>
                  <Item data={item} />
                </ListItem>
              )}
              // ID from database as a key
              keyExtractor={item => item.title}
              ItemSeparatorComponent={this.renderSeparator}
              ListFooterComponent={this.renderFooter}
              ListHeaderComponent={this.renderHeader}
              refreshing={refreshing}
              onRefresh={this.handleRefresh}
              onEndReached={this.handleLoadMore}
              onEndReachedThreshold={0}
            />
          </List>
        </Container>
      </ScrollView>
    );
  }

Solution 1:^[1]

For React Navigation 5 and above

<Stack.Navigator
    initialRouteName='dashboard'
    screenOptions={{
        headerStyle: { elevation: 0 },
        cardStyle: { backgroundColor: '#fff' }
    }}
>
    <Stack.Screen name="Home" component={HomeStack} />
</Stack.Navigator>

For React Navigation 4 and earlier

const HomeStack = StackNavigator(
{
    Home: {
        screen: HomeScreen,
    },
},
{
    headerMode: 'screen',
    cardStyle: { backgroundColor: '#fff' },
},
);

Solution 2:^[2]

Edit your View tag like this,

  <View style={{flex: 1,backgroundColor: '#6ED4C8'}}></View>

Solution 3:^[3]

For React Navigation 6,

<Stack.Navigator  screenOptions={{
     contentStyle:{
       backgroundColor:'#FFFFFF'
     }
  }}  initialRouteName="Home">

Solution 4:^[4]

The following will no longer work due to deprecation.

 const HomeStack = StackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Item: {
      screen: ItemScreen,
      navigationOptions: ({ navigation }) => ({
        title: `${navigation.state.params.title}`,
      }),
    },
  },
  **
  {
    headerMode: 'screen',
    cardStyle: { backgroundColor: '#FFFFFF' },
  },
  **
);

You now have to use defaultNavigationOptions (see below).

 const HomeStack = StackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Item: {
      screen: ItemScreen,
      navigationOptions: ({ navigation }) => ({
        title: `${navigation.state.params.title}`,
      }),
    },
  },
  **
  {
    headerMode: 'screen',
    defaultNavigationOptions: {
      cardStyle: { backgroundColor: '#FFFFFF' },
    },
  },
  **
);

Solution 5:^[5]

Set in view that's where you want to set background colour

view: {
  backgroundColor: '#FFFFFF' 
}

Solution 6:^[6]

The correct prop to be set is sceneContainerStyle:

  <BottomTab.Navigator
    ...
    sceneContainerStyle={{ backgroundColor: 'white' }}
  >
      ...
   </BottomTab.Navigator>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Akshay I
Solution 2	lakjeewa Wijebandara
Solution 3
Solution 4	PJately
Solution 5	Orlyyn
Solution 6	Omer Gurarslan

'Change app background color in React Native

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]