Remove bottom border of header in React Native using useLayoutEffect hook

Question

I want to remove the faint border from the bottom of the header in React Native. I'm using useLayoutEffect() hook to modify the header but unable to remove the border. I've tried using borderBottomWidth: 0 inside headerStyle but it's not working.

    useLayoutEffect(() => {
        navigation.setOptions({
          title: "Signal",
          headerStyle: { backgroundColor: "#fff", borderBottomWidth: 0 },
          headerTitleStyle: { color: "#000" },
          headerTintColor: "#000",
        });
      }, [navigation]);

Emulator screenshot showing the border line to be removed

Answer 1

Recently ran across this in React Navigation 6 but found there is another way. Per the docs there is headerShadowVisible

Docs:

Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header. This is a short-hand for the following styles:

{
  elevation: 0,
  shadowOpacity: 0,
  borderBottomWidth: 0,
}

If the above styles are specified in headerStyle along with headerShadowVisible: false, then headerShadowVisible: false will take precedence.

Example:

<Stack.Screen
  name="Example"
  component={Example}
  options={({ route }) => ({
    title: route.params.title,
    headerTintColor: '#fff',
    headerStyle: {
      backgroundColor: route.params.color,
    },
    headerShadowVisible: false, // applied here
    headerBackTitleVisible: false,
  })}
/>

Answer 2

If you are using react-navigation you remove the bottom border by specifying the following for the headerStyle in your navigationOptions:

headerStyle: {
  shadowColor: 'transparent', // this covers iOS
  elevation: 0, // this covers Android
},