Ошибка: похоже, что вы вложили «контейнер навигации» в другой при вызове GoToButton в дочернем файле React Navigation 5

Question

Я создал GoToButton по рекомендации React Navigation v5 для перехода с одного дочернего экрана на другой

function GoToButton({ screenName }) {
const navigation = useNavigation();

return (
    <TouchableOpacity
        title={`${screenName}`}
        onPress={() => navigation.navigate(screenName)}  style={styles.buttonLogin}> 
        <Text style={{color: '#ffcc00', fontWeight: 'bold'}}>Start!</Text>
    </TouchableOpacity>
);
} 

Я хотел перейти с экрана входа в систему, который был импортирован внутри функции:

function LoginScreen({navigation}) {
return (
    <View>
        <Login />
        <View style={{alignContent:'center' , alignItems:'center'}}>
            <GoToButton screenName="TabNavigator" />
        </View>

    </View>

);

}

На TabNavigatorScreen:

function TabNavigatorScreen({ navigation }) {
return (
    <TabNavigator/>
);

}

Когда я размещаю ссылку на GoToButton следующим образом, ссылка работает:

function LoginScreen({navigation}) {
return (
    <View>
        <Login /> //imported earlier from the file Login.js
        <View style={{alignContent:'center' , alignItems:'center'}}>
            <GoToButton screenName="TabNavigator" /> //next to the imported Login
        </View>

    </View>

);

}

Но моя цель - разместить GoToButton внутри логина. js как показано:

import GoToButton from '../navigation/SwitchNavigator' class Login extends React.Component  {
login = () => {
 this.props.login(this.props.email)
   }
     render() {
        return (
  <View style={{ position: 'absolute', justifyContent: 'center', alignItems: 'center', flex: 1,  justifyContents: "flex-end", width: screenWidth, height: screenHeight, backgroundColor: 'white', }}>
    <View style={styles.box}>

      <TextInput value={this.props.user} style={styles.textarea} onChangeText={input => this.props.updateEmail(input)}
      placeholder='Email'/>
      <TextInput value={this.props.user} style={styles.textarea} onChangeText={input => this.props.updatePassword(input)}
        placeholder='Password' />  

      <GoToButton screenName="TabNavigator" onPress={() => this.login()}/>
    </View>

  </View>
);

}}

К сожалению , это приводит к ошибке: ooks, как вы вложили «контейнер навигации» внутри другого. Как мне решить эту проблему?