Can't find Variable: NavigationContainer-CodePudding

I've been having a problem with NavigationContainer from react-navigation/native. I keep getting an error saying:

ReferenceError: Can't find variable: NavigationContainer

I have import { NavigationContainer } from '@react-navigation/native'; imported at the top but I still get the same error. I checked the package.json and it's installed. I have also uninstalled node_modules twice and I still have the same problem.

"dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/native": "^5.9.8",
    "@react-navigation/stack": "^5.3.5",

Here is my app.js code :

import React from 'react';
import { Text, View } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import Screen from './app/components/Screen';
import { NavigationContainer } from '@react-navigation/native';


const Tweets = () => (
  <Screen>
    <Text>Tweets</Text>
  </Screen>
);

const TweetDetails = () => (
  <Screen>
    <Text>Tweet Details</Text>
  </Screen>
);

const Stack = createStackNavigator();

const StackNavigator = () => (
  <StackNavigator>
    <Stack.Screen name="Tweets" component={Tweets} />
    <Stack.Screen name="TweetDetails" component={TweetDetails} />
  </StackNavigator>
);

export default function App() {
  return (
    <NavigationContainer>
      <StackNavigator />
    </NavigationContainer>
    )
}

Please help me find the source of the problem, thanks!

CodePudding user response：

This block has StackNavigator as being recursive.

const StackNavigator = () => (
  <StackNavigator>
    <Stack.Screen name="Tweets" component={Tweets} />
    <Stack.Screen name="TweetDetails" component={TweetDetails} />
  </StackNavigator>
);

Changing the inner StackNavigator to Stack.Navigator should resolve the problem.

const StackNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen name="Tweets" component={Tweets} />
    <Stack.Screen name="TweetDetails" component={TweetDetails} />
  </Stack.Navigator>
);