Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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
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,
                is there a way to style the default header so that headerShadowVisible: false is automatically applies to any screen?
– Phil Lucks
                Aug 19, 2022 at 22:01
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
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`.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.