react navigation画面遷移時のパラメーターの渡し方

Question

前提・実現したいこと

react nativeを利用してアプリ開発をしています。

react navigationを利用して画面を遷移させています。
画面Aから画面Bへ遷移する際に、ある値をAからBへ渡してBの画面で表示したいのですが、うまく遷移できない状況です。

解決の方法ご存知の方おりましたら、ご教授いただけないでしょうか？

こちらのreact navigationの公式ドキュメントを参考にしてコードを作成しました。
Passing parameters to routes

発生している問題・エラーメッセージ

TypeError: undefined is not an object (evaluating 'route.params.test')

This error is located at:
    in TestSecond (created by SceneView)
    in SceneView (created by CardContainer)
    in RCTView (created by CardContainer)
    in RCTView (created by CardContainer)
    in RCTView (created by Card)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (created by PanGestureHandler)
    in PanGestureHandler (created by Card)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (created by Card)
    in RCTView (created by Card)
    in Card (created by CardContainer)
    in CardContainer (created by CardStack)
    in RCTView (created by MaybeScreen)
    in MaybeScreen (created by CardStack)
    in RCTView (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by CardStack)
    in CardStack (created by KeyboardManager)
    in KeyboardManager (created by Context.Consumer)
    in RNCSafeAreaView (at src/index.tsx:28)
    in SafeAreaProvider (created by Context.Consumer)
    in SafeAreaProviderCompat (created by StackView)
    in RCTView (created by StackView)
    in StackView (created by StackView)
    in StackView
    in Unknown (created by Navigator)
    in Navigator (created by NavigationContainer)
    in NavigationContainer
    in ExpoRoot (at renderApplication.js:40)
    in RCTView (at AppContainer.js:101)
    in DevAppContainer (at AppContainer.js:115)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)

renderRoot
    [native code]:0
runRootCallback
    [native code]:0
callFunctionReturnFlushedQueue
    [native code]:0

該当のソースコード

App.js

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import TestFirst from "./src/screens/TestFirst";
import TestSecond from "./src/screens/TestSecond";

const App = createStackNavigator(
  {
    TestFirst: { screen: TestFirst },
    TestSecond: { screen: TestSecond },
  }
);

export default createAppContainer(App);

遷移元

import React from "react";
import { Text } from "react-native";
import { TouchableHighlight } from "react-native-gesture-handler";

export default function TestFirst(props) {
  const { navigation } = props;

  return (
    <TouchableHighlight
      onPress={() => {
        navigation.navigate("TestSecond", { test: "test" });
      }}
    >
      <Text>go to TestSecond</Text>
    </TouchableHighlight>
  );
}

遷移先

import React, { useState, useEffect } from "react";
import { Text } from "react-native";

export default function TestSecond(route) {
  const [text, setText] = useState("");
  const { test } = route.params;

  useEffect(() => {
    setText(test);
  }, []);

  return <Text>{text}</Text>;
}

補足情報（FW/ツールのバージョンなど）

node : 12.18.3
react native : 4.10.1
expo : 3.22.3
React Navigation: 4.3.7

Answer 1

遷移先でのパラメーターの受け取り方が違っていました。

正しい書き方は以下の方法です

export default function TestSecond({navigation}) {
  const [text, setText] = useState("");
  const { test } = navigation.state.params;

  useEffect(() => {
    setText(test);
  }, []);

  return <Text>{text}</Text>;
}