ReactNavigationのborderを消す方法

概要

ReactNavigationを使ってヘッダーを入れているのですが
どうしてもヘッダー下のborderが消せず...
ネットにある解決方法では対応できなかったので、備忘録として投稿します。

やりたいこと

• ReactNavigationの下線を消したい

解決方法

headerShadowVisible: falseを入れるだけ！！
headerStyleなど、スタイルを入れている場所に追加すればOKでした。

<Stack.Navigator initialRouteName="Home" screenOptions={{
    headerStyle: {
      backgroundColor: '#f5f5f5'
    },
    headerTintColor: '#333',
    headerTitleStyle: {
      fontWeight: 'bold'
    },
    headerShadowVisible: false
    }}>

消えたー！

解説

• スタイルでどうにかするのかなと思っていましたが、公式でオプションがあったのですね。
• 公式ドキュメントに書いてありました。
  • https://reactnavigation.org/docs/native-stack-navigator/#headershadowvisible

headerShadowVisible​
Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header.
（ヘッダーの標高の影 (Android) または下の境界線 (iOS) を非表示にするかどうか。）

まとめ

• 公式ドキュメントをまず読もう