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