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

Thank you for your help :-)

CodePudding user response：

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

CodePudding user response：

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.