Expo Router で前の画面へ戻りながら値を渡す方法

こんにちは、モウです。React の開発経験は三年以上ですが、React Native は初心者です。React Native と Expo での開発にあたり、調査した内容を共有させていただきます。

今回の記事では、グローバルステートを使用せずに前の画面へ戻りながら値を渡す方法を紹介します。

グローバルステートを使用しない理由

Context や Redux などのグローバルステートを使って値を渡すこともできますが、シンプルなデータを少量渡す場合には少し大げさに感じることがあります。そのため、より簡単な方法があれば便利だと思いました。

前の画面へ戻りながら値を渡す方法

グローバルステートを使わない場合、基本的にはローカルのサーチパラメータを使用して値を渡す方法しかありません。

前の画面へローカルサーチパラメータで値を渡す方法としては、調べた結果、以下の二つ方法がありました。

• Router の dismissTo を使って渡す
• Router の back を実行した後に setParams を使って渡す

dimissTo

Stack ナビゲーション以外の Tab や Drawer などのナビゲーションでは、この方法は使用できません。

import { useState } from 'react';
import { View, Button, Text, TextInput } from 'react-native';
import { useRouter } from 'expo-router';

export default function TabTwoScreen() {
  const [value, setValue] = useState('');
  const router = useRouter();

  return (
    <View style={{ padding: 8, gap: 8 }}>
      <Text>値を入力してください</Text>
      <TextInput
        onChangeText={setValue}
        value={value}
        placeholder="値"
        style={{ borderWidth: 1, borderRadius: 12 }}
      />
      <Button
        title="戻る"
        onPress={() => {
          router.dismissTo({ pathname: '/', params: { value } });
        }}
      />
    </View>
  );
}

setParams

Stack ナビゲーション以外にも使用できます。たたし、この方法が Expo Router の設計として正しいのか分かりません。

import { useState } from 'react';
import { View, Button, Text, TextInput } from 'react-native';
import { useRouter } from 'expo-router';

export default function TabTwoScreen() {
  const [value, setValue] = useState('');
  const router = useRouter();

  return (
    <View style={{ padding: 8, gap: 8 }}>
      <Text>値を入力してください</Text>
      <TextInput
        onChangeText={setValue}
        value={value}
        placeholder="値"
        style={{ borderWidth: 1, borderRadius: 12 }}
      />
      <Button
        title="戻る"
        onPress={() => {
          router.back();
          router.setParams({ value });
        }}
      />
    </View>
  );
}

下記は共通の index 画面です。

import { View, Text } from 'react-native';

import { Link, useLocalSearchParams } from 'expo-router';

export default function HomeScreen() {
  const { value } = useLocalSearchParams<{ value: string }>();

  return (
    <View style={{ paddingHorizontal: 8 }}>
      <Text style={{ fontSize: 24, paddingVertical: 12 }}>
        前のページに値を渡すについて
      </Text>
      <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
        <Link
          style={{ borderWidth: 1, borderRadius: 12, padding: 4 }}
          href="/DismissTo"
        >
          DismissTo
        </Link>
        <Link
          style={{ borderWidth: 1, borderRadius: 12, padding: 4 }}
          href="/SetParams"
        >
          SetParams
        </Link>
      </View>
      <Text>渡された値：{value}</Text>
    </View>
  );
}

終わりに

以上が、グローバルステートを使わずに前の画面へ戻りながら値を渡す方法です。もし他に良い方法があれば、ぜひ共有してください。

上記のサンプルコードは GitHub にプッシュしたので、ぜひ試してください。