Change app background color in React Native

Question

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

I have tried, and all screen became white https://imgur.com/a/faBqkLt — Grigore Budac, May 31 '18 at 09:02
I tried in index.js, where is , i did something like , but it made my screen all white, not only background — Grigore Budac, May 31 '18 at 09:36
Well, by default, on ios device, for example, is a gray background, I want to change it to white — Grigore Budac, May 31 '18 at 09:53

score 41 · Accepted Answer · edited Jul 22 '23 at 11:18

I've solved my problem, it was caused by StackNavigator. To solve it , just add some extra options

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

Mohamed BOUSSAKSSOU · Answer 2 · 2021-11-23T16:00:54.670

26

For React Navigation 6,

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

edited Nov 23 '21 at 16:00

answered Sep 17 '21 at 10:34

Mohamed BOUSSAKSSOU

341
5
5

Thanks, the above options didn't work for me – Louis Jun 23 '22 at 12:34

score 24 · Answer 3 · edited Jul 22 '23 at 11:19

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

score 11 · Answer 4 · answered Mar 02 '19 at 09:49

11

Edit your View tag like this,

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

answered Mar 02 '19 at 09:49

lakjeewa Wijebandara

384
5
7

score 4 · Answer 5 · answered Jan 10 '20 at 14:09

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' },
    },
  },
  **
);

score 3 · Answer 6 · answered May 19 '22 at 22:27

3

The correct prop to be set is sceneContainerStyle:

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

answered May 19 '22 at 22:27

Omer Gurarslan

979
11
15

score 2 · Answer 7 · edited Mar 31 '21 at 07:36

2

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

view: {
  backgroundColor: '#FFFFFF' 
}

edited Mar 31 '21 at 07:36

Orlyyn

2,296
2
20
32

answered Mar 29 '21 at 07:07

Shuma

21
2

score 1 · Answer 8 · edited Aug 26 '23 at 16:32

1

For React Navigation 6 -->

Stack Navigator:

<Stack.Navigator 
    screenOptions={{ contentStyle: {backgroundColor: 'white'} }}
>

Tab Navigator:

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

edited Aug 26 '23 at 16:32

Omar Omeiri

1,506
1
17
33

answered Aug 15 '23 at 09:41

Sherif Samir

259
3
5

Change app background color in React Native

8 Answers8

Linked