CODEWITHSUNDEEP
react-nativereact-native-elements
Boonty
Boonty

Reputation: 63

How can I change the background color of the full header in React Native

I'm using the Header component of react-native-elements, which has a blue background by default. I changed it into green, but the upper piece of the header (with the information of your phone, like hour and wifi) stays in blue.

Header in two colors

Can someone explain me how to modify this part of the header so all of it would be in light green please ?

Here is my App() code :

export default function App() {
  const Stack = createNativeStackNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Connexion"
        screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Connexion" component={ConnexionScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

And this is my page code :

import React from 'react';
import { View, Text, Button } from 'react-native';
import { Header } from 'react-native-elements';

export default function ConnexionScreen({ navigation }) {
  return (
    <View style={{ flex: 1 }}>
      <Header
        containerStyle={{ backgroundColor: '#B5F7D3' }}
        leftComponent={{
          icon: 'menu',
          color: '#fff',
          iconStyle: { color: '#fff' },
        }}
        centerComponent={{ text: 'NURISENS', style: { color: '#fff' } }}
        rightComponent={{ icon: 'home', color: '#fff' }}
        barStyle="light-content"
      />
      <View
        style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: 'green',
        }}>
        <Text>Connexion Screen</Text>
        <Button
          title="Valider la connexion"
          onPress={() => navigation.navigate('Home')}
        />
      </View>
    </View>
  );
}

Upvotes: 0

Views: 3046

Answers (2)

Shoaib Khan
Shoaib Khan

Reputation: 1210

This is your StatusBar. Try to add back backgroundColor: "#B5F7D3" prop to your Header component.

If the statusBar's color does not change then add the StatusBar Component like so:

import { StatusBar } from 'react-native'

and in the return statement do implement it like this before the Header component.

<StatusBar barStyle = "light-content" hidden = {false} backgroundColor = "#B5F7D3" translucent = {true}/>

Hope this works for you.

Upvotes: 2

Himanshu
Himanshu

Reputation: 61

Try this <Header backgroundColor="#B5F7D3" />

Upvotes: 1

Related Questions