react native, remove stack navigation color from android status bar

Question

I created a stack navigation and customize is background color to black, but I'm getting a problem that stack navigator color is also applying to android status bar element. It's applying color to every detail in my status bar like time battery therefore it's not visible, see image below. How can I fix this

const Stack = createStackNavigator();

export default function AppNavigation ()
{
    return (
        <Stack.Navigator screenOptions={{ headerStyle: { backgroundColor: colors.black } }} >
            <Stack.Screen name="Home" component={Home} options={({ navigation }) =>
            {
                return {
                    headerTitle: () => <Header name="Shop" navigation={navigation} />,
                };
            }} />
        </Stack.Navigator>
    );
}

Answer 1

You have a StatusBar module in react native https://reactnative.dev/docs/statusbar

You can use it to change android statusBar color

for example

<StatusBar backgroundColor="blue" barStyle='light-content' />

Answer 2

You could position your navigation bar below the android bar. I would only do this if you are working on a particular device that you know what the size of the status bar would be though. Else use https://reactnative.dev/docs/statusbar

Example

const styles = StyleSheet.create({
  main: {
    flex: 1,
    backgroundColor: "#FCFCFC",
    marginTop: 24,
  },