React Native + Expo でヘッダーの「戻る」ボタンに独自のスタイルを当てたい

React Native (Expo) でフルでスタイルを当てたアプリを作っているとき、ヘッダーに表示される「戻る」ボタンにスタイルを当てたいケースがあります。 例えば、 iOS 26 端末では戻るボタンだけが Liquid Glass デザインが当てられてすごくダサい感じになるので、それを避けたいケースなどがまさにそうだと思っています。

今回はそんな場合に使える Expo での独自スタイルの当て方を紹介します。

やり方は簡単で、 Stack の screenOptions に次のようなオプションを渡すだけ：

// 
import type { NativeStackHeaderProps } from "expo-router";

<Stack screenOptions={{
    header: ({ back, navigation, options, route }: NativeStackHeaderProps) => {
      const isShownBackButton = !!back;
      const title = typeof options.headerTitle === "string" ? options.headerTitle : (options.title ?? route.name);
      return (
       <View style={{ ... }}>
        {isShownBackButton && <Pressable onPress={navigation.goBack} style={{ ... }}>戻る</Pressable>}
        <Text style={{ ... }}>{title}</Text>
       </View>
      );
    },
    headerShadowVisible: false,
    headerStyle: {
      backgroundColor: "transparent",
    },
    headerTintColor: undefined,
  }}
/>

header に任意のコンポーネントを渡すことで、ヘッダーを自前描画出来るので、その上にバックボタンなどを再実装すれば良い。簡単ですね。 ちなみにコードは Codex 君の Chat で調べさせて (トークンが無料)、それを参照させて、調べた内容を元に実装してください、としました。体感一発でやってくれて良い。

github.com