Cannot style shadow in react navigation header on android (React native)

Question

Hopefully I can find some help in here. So for the last day I have been struggling in react native trying to style the shadow on the react navigation header. Problem is that shadow does not display at all on android. As an example here is the ios display (device: iphone 11 pro max simulator):

And here the android display (device: pocophone f1):

And please find also a code snippet. I tried to style the Stack.screen trough the options prop, and while it works on IOS it doesnt in android.

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import Home from "./components/Home";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import Logo from "./components/Logo";
import Bar from "./components/Bar";

export default function App() {
  const Stack = createStackNavigator();
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{}}>
        <Stack.Screen
          name="Home"
          options={{
            headerTitle: () => <Logo></Logo>,
            title: "home",
            headerTitleAlign: "center",
            headerStyle: {
              backgroundColor: "#48CFAD",
              height: 100,
              shadowOffset: {
                width: 0,
                height: 2,
              },
              shadowColor: "black",
              shadowOpacity: 1,
              shadowRadius: 3.84,
              elevation: 3,
            },
          }}
          component={Home}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Is anybody else having this issue or asked about it? Anyway thanks for the help in advance!

Answer 1

Try increasing the elevation a bit,

I set it to 15 and the shadow is showing.

But you might have to use different values to ios and android ans the same value is showing the varying results.

...
<NavigationContainer>
      <Stack.Navigator screenOptions={{}}>
        <Stack.Screen
          name="Home"
          options={{
            headerTitle: () => <Logo></Logo>,
            title: 'home',
            headerTitleAlign: 'center',
            headerStyle: {
              backgroundColor: '#48CFAD',
              height: 100,
              shadowOffset: {
                width: 0,
                height: 3,
              },
              shadowColor: 'black',
              shadowOpacity: 1,
              shadowRadius: 3.84,
              elevation: 15,
            },
          }}
          component={Home}
        />
      </Stack.Navigator>
    </NavigationContainer>
...

You can try the working code here: Expo Snack

Snapshot: