0

I am using react-native-paper along with react-navigation and the notification tray background color is not a darker shade of the AppBar color as shown in the documentations of react-native-paper and I cannot figure a way out to do that.

I have a basic project implemented and the snack of it can be seen in the following link: https://snack.expo.dev/@throwawayacc/grumpy-milkshake

Expected Output:

Current Output

As it can be seen above the notification tray color is the same as the AppBar color. How do I get it to work like the expected output. You can see the current implementation on the link above.

dracarys
  • 1,071
  • 1
  • 15
  • 31

1 Answers1

0

You can use this https://reactnative.dev/docs/statusbar#backgroundcolor-android to change the status bar to a different color.

Just import the StatusBar from react-native. And put this code in your screens components like this. e.g.

// codes...

function HomeScreen(props) {
  return (
    <View style={style.container}>

      <StatusBar
        animated={true}
        backgroundColor="#3B008F"
         />

      <Text>Home Screen</Text>

// codes...
Kamal Hossain
  • 530
  • 7
  • 18