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

Naumann

<View style={{backgroundColor : "white"}}> <Tabs/> </View> – Ancestral

I have tried, and all screen became white imgur.com/a/faBqkLt – Naumann

Can you show the home screen code? – Cranmer

where you have added background color : white ? – Cantor

I tried in index.js, where is <Tabs />, i did something like <View style={{ backgroundColor: "#FFFFFF"}}><Tabs /></View>, but it made my screen all white, not only background – Naumann

what's your expected result? – Ancestral

Well, by default, on ios device, for example, is a gray background, I want to change it to white – Naumann

Answer 1

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

Naumann

Answer 2

For React Navigation 6,

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

Conversationalist

Thanks, the above options didn't work for me – Krell

Answer 3

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

Manipulator

Answer 4

Edit your View tag like this,

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

Beowulf

Answer 5

For React Navigation 6 -->

Stack Navigator:

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

Tab Navigator:

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

Jenevajeni

Answer 6

The correct prop to be set is sceneContainerStyle:

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

Shanghai

Answer 7

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

Subsidy

Answer 8

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

view: {
  backgroundColor: '#FFFFFF' 
}

Regularize