React Native: change bottom android notch color

Question

I have been stuck with this issue for a few days, I want to change the color of the bottom notch on android phones to red, to no success...

Notice the highlighted bottom https://i.stack.imgur.com/bxaxH.jpg

I use react native navigation V6

Things I tried:

1) Changing the background color of tab navigator

tabBarStyle: [
    { 
        width:'100%',height:60,backgroundColor:'transparent' },

2) changing default theme of NavigationContainer

const MyTheme = {
        ...DefaultTheme,
        colors: {
          ...DefaultTheme.colors,
          background: 'red',
          primary: 'red',
        },
      };

<NavigationContainer theme={DefaultTheme}>
            <ROOTSTACK1></ROOTSTACK1>
        </NavigationContainer>

3) Changing backgroundColor of rootstack

<RootStack.Navigator screenOptions={{ gestureEnabled: true, navigationBarColor:'red' }}>

None of this worked.

Answer 1

I fixing it making my screen like this:

<View style={{flex: 1, background: '#FFF'}}>
  <StatusBar backgroundColor="#FFF" barStyle="dark-content" />
  <SafeAreaView style={{ flex: 1 }}>
  {...components}
  </SafeAreaView>
</View>