React Native - навигация с функциональными компонентами

Question

Я установил Navigation, чтобы взять некоторые данные со страницы и отправить на другую (надеюсь, я сделаю). Но это не работает, и я получаю

"We couldn't find a navigation object. Is your component inside a navigator?"

Вставка файла. js

import React, { useState } from "react";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { useNavigation } from "@react-navigation/native";


import ViewData from "./ViewData";

const MainNavigator = createStackNavigator({
  ViewDataPage: ViewData
});

...

const Insert = props => {

...

  createAppContainer(MainNavigator);

  const navigate = useNavigation();

  return (
    <TouchableWithoutFeedback
      onPress={() => {
        Keyboard.dismiss();
      }}
    >
      <View style={styles.inputContainer}>
        <Input
          placeholder="Your Name"
          onChangeText={text => setEnteredName(text)}
          value={enteredName}
        />


...


        <View>
          <Button
            title="Submit"
            onPress={() => sendValues(enteredName, enteredSurname)}
          />
          <Button
            title="Click"
            onPress={() =>navigate("ViewDataPage", { name: "Jane" })
            }
          />
        </View>
      </View>
    </TouchableWithoutFeedback>

Я думаю, что сделал беспорядок, я даже не могу получить страницу "ViewData". Я хотел бы изменить страницу, посылая некоторые значения в хуках. Есть идеи, где я ошибся?

Answer 1

"@react-navigation/native" для React Navigation 5. Вы не можете использовать его с React Navigation 4.