CODEWITHSUNDEEP
react-nativereact-navigationstyling
Grigore Budac
Grigore Budac

Reputation: 1461

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

Upvotes: 46

Views: 165954

Answers (9)

Nziranziza
Nziranziza

Reputation: 49

This worked for me

  <Tab.Navigator
      initialRouteName="Support"
      screenOptions={{
        sceneStyle: {
          backgroundColor: colors.white,
        }
      }}> 
  </Tab.Navigator>

Upvotes: 0

Sherif Samir
Sherif Samir

Reputation: 685

For React Navigation 6 -->

Stack Navigator:

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

Tab Navigator:

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

Upvotes: 9

Akshay I
Akshay I

Reputation: 4185

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

Upvotes: 26

Grigore Budac
Grigore Budac

Reputation: 1461

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

Upvotes: 44

Omer Gurarslan
Omer Gurarslan

Reputation: 1027

The correct prop to be set is sceneContainerStyle:

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

Upvotes: 5

Mohamed BOUSSAKSSOU
Mohamed BOUSSAKSSOU

Reputation: 421

For React Navigation 6,

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

Upvotes: 32

Shuma
Shuma

Reputation: 21

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

view: {
  backgroundColor: '#FFFFFF' 
}

Upvotes: 2

PJately
PJately

Reputation: 477

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

Upvotes: 4

lakjeewa Wijebandara
lakjeewa Wijebandara

Reputation: 572

Edit your View tag like this,

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

Upvotes: 11

Related Questions