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

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

Answer 2

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