Change app background color in React Native - 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' },
},
);

Answer 3

For React Navigation 6,
<Stack.Navigator screenOptions={{
contentStyle:{
backgroundColor:'#FFFFFF'
}
}} initialRouteName="Home">

Answer 4

Edit your View tag like this,
<View style={{flex: 1,backgroundColor: '#6ED4C8'}}></View>

Answer 5

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

Answer 6

The correct prop to be set is sceneContainerStyle:
<BottomTab.Navigator
...
sceneContainerStyle={{ backgroundColor: 'white' }}
>
...
</BottomTab.Navigator>

Answer 7

Set in view that's where you want to set background colour
view: {
backgroundColor: '#FFFFFF'
}