react native パラメータが引き渡せない

Question

##LoginScreenからRecordScreenに遷移させるときにパラメータが引き渡せない

下記のようにLoginScreenからRecordScreenに遷移させるとき、パラメータが引き渡せず、
props.route.paramsがundefinedになってしまいます。
どのようにすればuserパラメータをRecordScreenに引き渡せますでしょうか？

問題の箇所を抜粋。
      .then(function (user) {
        navigation.navigate("Record", { currentUser: user });
      })

詳細は下記

export default LoginScreen = ({ navigation }) => {
  const initialEmail = "";
  const initialPassword = "";
  const [email, esetText] = useState(initialEmail);
  const [password, psetText] = useState(initialPassword);
  const onPress = () => {
    firebase
      .auth()
      .signInWithEmailAndPassword(email, password)
      .then(function (user) {
        navigation.navigate("Record", { currentUser: user });
      })
      .catch(function (error) {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        alert(errorCode);
        alert(errorMessage);
        // ...
      });
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>ログイン</Text>
      <TextInput
        style={styles.input}
        value={email}
        onChangeText={(email) => esetText(email)}
        autoCapitalize="none"
        autoCorrect={false}
        placeholder="Email"
      />
      <TextInput
        style={styles.input}
        value={password}
        onChangeText={(password) => psetText(password)}
        autoCapitalize="none"
        autoCorrect={false}
        placeholder="Password"
        secureTextEntry={true}
      />
      <TouchableHighlight style={styles.button} onPress={onPress}>
        <Text style={styles.buttonText}>ログイン</Text>
      </TouchableHighlight>
    </View>
  );
};

export default RecordScreen = (props) => {

  const { navigation, route } = props;
  const params = route.params;
  console.log(navigation);
  console.log(route);
  console.log(params);
  return (
    <SafeAreaView style={styles.container}>
      <TouchableOpacity style={styles.circleButton} onPress={onPress}>
        <Text style={styles.circleButtonTitle}>＋</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

下記がログです。

console.log(navigation);
↓
Object {
  "addListener": [Function addListener],
  "canGoBack": [Function canGoBack],
  "dangerouslyGetParent": [Function dangerouslyGetParent],
  "dangerouslyGetState": [Function anonymous],
  "dispatch": [Function dispatch],
  "goBack": [Function anonymous],
  "isFocused": [Function isFocused],
  "jumpTo": [Function anonymous],
  "navigate": [Function anonymous],
  "pop": [Function anonymous],
  "popToTop": [Function anonymous],
  "push": [Function anonymous],
  "removeListener": [Function removeListener],
  "replace": [Function anonymous],
  "reset": [Function anonymous],
  "setOptions": [Function setOptions],
  "setParams": [Function anonymous],
}

console.log(route);
↓
Object {
  "key": "Record-23v2YUDv-hWZtJX9yj4T2",
  "name": "Record",
  "params": undefined,
}

console.log(params);
↓
undefined

Answer 1

データを取り出す側(RecordScreen)で、
const params = route.params;
を、
const { currentUser } = route.params;
に変えたら動きますでしょうか？

追記：　上記コメントしましたが、確かに、thenの中からの受け渡しはできないかもですね。
Firebaseから直接currentUserを取得する方法はどうでしょう？

まずRecordScreenでも、firebaseをインポートします。
そして、
const { currentUser } = firebase.auth();
とすれば、取得出来るはずです。

僕はいつもこの方法で取得しています。
試してみてください。以下firebaseのドキュメントです。
https://firebase.google.com/docs/auth/web/manage-users?hl=ja#get_the_currently_signed-in_user

Answer 2

https://reactnavigation.org/docs/params/

こちらをご確認ください。

LoginScreen で 以下のように記載があるので、

navigation.navigate("Record", { currentUser: user });

RecordScreen では、

以下の部分をご変更してみてください

const params = route.params;

↓

const {currentUser} = route.params;

Answer 3

おそらくreact-navigationを使っていると思いますが、バージョンはいくつですか？
3.X,4.X,5.Xで仕様が異なるため、paramの呼び方も異なります。
下記のような取得はできませんか？

navigation.getParam('currentUser')

Comments

[shomy]

お返事ありがとうございます。
バージョンは下記のような感じです。
"@react-navigation/bottom-tabs": "^5.8.0",
"@react-navigation/native": "^5.7.3",
"@react-navigation/stack": "^5.9.0",

navigation.getParam('currentUser')だとうまくいきませんでした汗
下記みたいなエラーがでてきます

```

TypeError: navigation.getParam is not a function. (In 'navigation.getParam("currentUser")', 'navigation.getParam' is undefined)

This error is located at:
in RecordScreen (at SceneView.tsx:122)
in StaticContainer
in StaticContainer (at SceneView.tsx:115)

```

[nekoniki]

となると5.X系なのでnavigateの第二引数でいけそうですが・・・
setparamsを使った場合はどうですか？(下記公式リファレンス参照)
https://reactnavigation.org/docs/navigation-prop/#setparams

[shomy]

出来ませんでした。。。
下記のログインメソッドのthenの中だと使えないとかですかね。。。
signInWithEmailAndPassword(email, password).then(function (user) {

})

[shomy]

難しいですね。。

[nekoniki]

> 下記のログインメソッドのthenの中だと使えないとかですかね。。。
そんなことはないと思いますが・・・
then以外の箇所で同じ記載をすると値が渡るということですか？

[shomy]

そうですね。
navigation.navigate("Record", { currentUser: user });
この書き方で行けるっぽいです