https://drive.google.com/file/d/1456izDo_zxkFxqAti7Kd4Reaer5mwzOh/view?usp=sharing

I want to hide the shadow of the header but can't do that. I tried to use navigationOptions but couldn't find a way to hide the shadow of the header. backgroundColor is working fine but shadow is not. Please identify the mistake. Thank You.

const Stack = createNativeStackNavigator();

<Stack.Navigator
    defaultNavigationOptions={{}}
    screenOptions={({navigation}) => ({
      headerBackTitleVisible: false,
      title: '',
      headerStyle: {
        backgroundColor: 'papayawhip',
        elevation: 0,
        shadowOpacity: 0,
        borderBottomWidth: 0,
      },
      headerLeft: () => (
        <AppMaterialIcon
          onPress={() => navigation.goBack()}
          name={'chevron-left'}
          style={{marginLeft: -10}}
          size={35}
          color={colors.kermitGreen}
          backgroundColor={colors.white}
        />
      ),
    })}>
    <Stack.Screen
      name="ForgotPasswordEmail"
      component={ForgotPasswordEmailScreen}
    />
</Stack.Navigator>

CodePudding user response：

You can use StatusBar to change its color.

import { StatusBar } from "react-native";


<StatusBar
        backgroundColor={Colors.colorTop}
      />

CodePudding user response：

The thing I just did is setting the headerShadowVisible: false. It worked!!