CODEWITHSUNDEEP
react-nativereact-navigation
Felipe
Felipe

Reputation: 89

Hide shadow under react-navigation header

I tried to hide the header shadow using the elevation 0 attribute.

On Android 10, it doesn't work. The header is gray. In other versions, it works.

I'm using React Navigation V5.

Android 10 with elevation 0:

enter image description here

Android 10 without elevation 0: enter image description here

Android 8.1 with elevation 0: enter image description here

My code:

<Stack.Navigator>
      <Stack.Screen
        name="DiscountsReleaseDetail"
        component={DiscountsReleaseDetail}
        options={({ navigation, route }) => {
          const { numSeq, codMaquina } = route.params.order;
          return {
            headerTitle: `Pedido ${numSeq}/${codMaquina}`,
            headerTitleAlign: 'center',
            headerBackTitleVisible: false,
            headerTintColor: '#fff',
            headerStyle: {
              backgroundColor: colorCompany,
              shadowOpacity: 0, // remove shadow on iOS
              elevation: 0, // remove shadow on Android
            },
            headerLeft: () => (
              <HeaderButtonBack
                onPress={() => {
                  navigation.reset({
                    index: 0,
                    routes: [{ name: 'DiscountsRelease' }],
                  });
                }}
              />
            ),
          };
        }}
      />
</Stack.Navigator>

Upvotes: 2

Views: 1551

Answers (1)

MDK
MDK

Reputation: 141

try this setting. worked for me.

headerStyle: {
backgroundColor: "black",
shadowOpacity: 0,
shadowOffset: {
    height: 0,
},
shadowRadius: 0,
elevation: 0}

Upvotes: 6

Related Questions