Remove bottom border of header in React Native using useLayoutEffect hook

user_15284270 0
Viewed 6423

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

react-native react-hooks border javascript
4 Answers

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,
  })}
/>
user_19522870

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
},
user_19977460

Pass the headerShadowVisible: false to navigation.setOptions({}).

In the example i am doing it with useLayout to avoid any UI issues with updates, i recommmend that you also do that if you need to set this in your screen.

Example:

  useLayoutEffect(() => {
    navigation.setOptions({
      headerTitle: () => <Image source={source} />,
      headerShadowVisible: false,
    })
  }, [navigation])

Heres some documentation i found in the type file

   /**
     * Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header.
     */
    headerShadowVisible?: boolean;
    /**
     * Boolean indicating whether the navigation bar is translucent.
     * Setting this to `true` makes the header absolutely positioned,
     * and changes the background color to `transparent` unless specified in `headerStyle`.
     */
user_112394920 
headerStyle: {
  borderWidth: 0,
  elevation: 0,
  shadowOpacity: 0,
},
user_91665290
Related