まだDrawerのハンバーガーメニュー自分で書いてんの？

お断り

煽り気味なタイトルは嫌いなのですが本日とてもおもしろいことを知ったので勢いのままに書きます。

まえがき

React Nativeで画面遷移を行う際にデファクトスタンダードとして使われるReact Navigation。その中のDrawer navigationを使う場合、ハンバーガーメニューはStack Navigationと組み合わせて実装するというのが常識でした。

React Navigation自体最近v5が出て書き方ががっつり変わっているのですが、先人が書かれたv4までの知見を参考に「えー、こんな典型的な機能用意しといてよー」とぶーたれながら「引数のコンポーネント（画面）をハンバーガーメニュー付きStackNavigatorでラップしたコンポーネントを返す関数」を書き、さてこの高階関数どう説明しようかと悩んでいたところ、

本題

ちょっと改めて本家のAPIドキュメントを見てみました。
https://reactnavigation.org/docs/drawer-navigator#options

title
Generic title that can be used as a fallback for headerTitle and drawerLabel

あれ？headerTitleってどういうこと(。´･ω･)?

headerShown
Whether to show or hide the header for the screen. The header is not shown by default. Setting this to true shows the header.

え？まさか

// https://reactnavigation.org/docs/drawer-based-navigationのサンプルコードです
export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home"
        // ↓これだけ追加
        screenOptions={{
          headerShown: true
        }}
      >
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

( ﾟДﾟ)
ハンバーガーメニュー！お前ハンバーガーメニューじゃないか！元気だったか？少し痩せたか？（錯乱）

説明

headerShownについての説明記事がないのも無理はない。
headerShownは2020/11/10に実装されたばかりなのだ。

超意訳：StackNavigator使えって言ってたけどまあいろいろ問題あるしヘッダ実装したわ。

まとめ

headerShownは@react-navigation/drawer@5.11.0から使えるようになっています。最新のバージョンに上げられる人はheaderShownを使いましょう。StackNavigatorと同じヘッダのカスタマイズもできるよ。試してないけど。