react-navigation header has a faint line

Continued from summary at the start of the question...

Once I realized my Xcode test was flawed i started googling for iOS only posts on StackOverflow with the same issue:

• How to remove navigation bar border/shadow?
• How to hide UINavigationBar 1px bottom line

Since these were iOS native solutions only I started looking for ways to re-create them in react. This then led me to looking for the same iOS only problem but with react keywords when I found the solution:

How do I hide the shadow under react-navigation headers?

While this question seems to be targeted at android, the answers also mention iOS:

elevation: 0, // remove shadow on Android shadowOpacity: 0, // remove shadow on iOS

Source: https://stackoverflow.com/a/42709731

I tried this. It didnt work.

Then further down an answer said this:

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

Tried it: It worked.

---

TL;DR

If you want to hide the header while using a StackNavigator in modern versions of react native without having to use a <SafeAreaView>, use the following code either in createStackNavigator({...}) or in your Screen classes' static navigationOptions = {...}:

headerStyle: {
        backgroundColor: colors.background,
        borderBottomWidth: 0,
        height: 0,
    },

Use { elevation: 0 } as a headerStyle screen-option. I confirmed this works in React Navigation V5. I think this (or similar) may work in React Navigation V4 as well.

<Stack.Navigator
  screenOptions={{
    headerStyle: { elevation: 0 }
  }}
  <Stack.Screen
    name="Home"
    component={HomeScreen} 
  />
</Stack.Navigator>

In navigation v5, in your stack screen add in your options object:

 <Stack.Screen
      name="Whatever"
      component={SomeScreen}
      options={{
        title: "Whatever",
        headerTitleStyle: { fontSize: 22, color: "#fff" },
        headerStyle: { shadowColor: "transparent" } // This is the important bit
    }}
    // whatever else you need in the screen header
  />