[React Navigation]ネストしたscreenから別のネストしたスクリーンにパラメータを渡す方法

はじめに

こんにちは！

タイトルの通り、画面遷移時にパラメータを指定し、次の画面に値を渡す方法です。

同じStack内の場合は、シンプルに渡せますが、ネストしたスクリーンに渡す方法でつまづいたので、記事にしておきます。

一応、公式に載っていますが、それでもつまづきました。

環境

"react-native": "0.64.0",
"@react-native-masked-view/masked-view": "^0.2.3",
"@react-navigation/bottom-tabs": "^6.0.0-next.3",
"@react-navigation/native": "^6.0.0-next.1",
"@react-navigation/stack": "^6.0.0-next.8",

スタック構造

Navigation.tsx

const EventStack = () => (
  <Stack.Navigator>
    <Stack.Screen name="EventList" component={EventListScreen} />
    <Stack.Screen name="EventDetail" component={EventDetailScreen} />
  </Stack.Navigator>
);

const ChallengeStack = () => (
  <Stack.Navigator>
    <Stack.Screen name="ChallengeList" component={ChallengeListScreen} />
    <Stack.Screen name="ChallengeDetail" component={ChallengeDetailScreen} />
  </Stack.Navigator>
);

export const RootNavigator = () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Event" component={EventStack} />
      <Stack.Screen name="Challenge" component={ChallengeStack} />
    </Stack.Navigator>
  </NavigationContainer>

このような構造の時に、同じ<Stack.Navigator>内ならすんなりパラメータを渡せますが、
EventStackからChallengeStackにパラメータを渡す際に少し書き方が変わり、苦戦しました。

結論

<TouchableOpacity
  onPress={() =>
    navigate('Challenge', {
      screen: 'ChallengeList',
      params: { name: 'パン食い競争' }, //　必ずparamsとして渡す！　別名だとundefinedになる！
    })
  }
/>

別の<Stack.Navigator>内のスクリーン名を指定し、パラメーターも指定して渡します。

経緯

同じスタックナビゲーター内の遷移と別のスタックナビゲータへの遷移でパラメータの渡し方が違い、

paramsは別名で指定できると思っていたら、undefinedとなって受け取れなかった。

同じスタック内ならparamsを別名で指定できるが、別のスタックナビゲーターに遷移する時は、paramsって名前は変更してはいけないみたい。

一応、同じ<Stack.Navigator>内の遷移パターン（ChallengeList -> ChallengeDetail）をあげておく。

<TouchableOpacity
  onPress={() =>
    navigate('ChallengeDetail', {
      challengeData: { name: 'パン食い競争' },
    })
  }
/>

最後に

公式にちゃんと載っているが、意外とつまづきポイントな気がする。。

参考

React Navigation