Working thru a React Native tutorial and got to a part on Routing between various components. It looks like it doesnt like the "Menu" component and its asking, as the title says,

Is your component inside NavigationContainer?

As far as I can tell yes. I tried asking the author but this was on Pluralsight and I dont't think they've checked back in ages. I checked their code though, and it works just like I have it. So not sure what may have changed with the framework since that series was made.

Here is the full output when the error pops:

This error is located at:
    in Menu (created by Home)
    in RCTView (created by View)
    in View (created by Home)
    in RCTView (created by View)
    in View (created by Home)
    in Home (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in GloboTicket(RootComponent), js engine: hermes

The Menu component (minus StyleSheet)

import React from 'react';
import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
import {useNavigation} from '@react-navigation/native';

const Menu = () => {
  const navigation = useNavigation();

  return (
    <View style={styles.menu}>
      <TouchableOpacity
        onPress={navigation.navigate('Tickets')}
        style={styles.button}>
        <Text style={styles.buttontext}>Events</Text>
      </TouchableOpacity>
    </View>
  );
};

export default Menu;

Code from "Home" where the Menu is used (minus StyleSheet):

import React from 'react';
import {View, Image, Text, StyleSheet} from 'react-native';
import Menu from './Menu';

const Home = props => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.globologo}
        source={require('./images/globologo.png')}
      />
      <Text style={styles.title}>Welcome to GloboTicket</Text>
      <Text style={styles.subtitle}>{props.username}</Text>
      <Image
        style={styles.concertimage}
        source={require('./images/concert.jpg')}
      />
      <View style={styles.textcontainer}>
        <Text style={styles.content}>{introText}</Text>
      </View>
      <View style={styles.menu}>
        <Menu />
      </View>
    </View>
  );
};

App file (where all lies within a NavigationContainer):

import 'react-native-gesture-handler';
import React from 'react';
import { StatusBar } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './Home';
import Tickets from './Tickets';

const Stack = createStackNavigator();

function App(): JSX.Element {
  return (
    <>
      <StatusBar barStyle='dark-content' hidden />
      <NavigationContainer>
        <Stack.Navigator
          initialRouteName='Home'
        >
          <Stack.Screen
            name='Home'
            options={{
              headerShown: false,
            }}
          >
            {props => <Home {...props} username='Bella' />}
          </Stack.Screen>
          <Stack.Screen
            name='Tickets'
            component={Tickets}
            options={{
              headerTitleAlign: 'center',
              headerTitleStyle: { fontFamily: 'Ubuntu-Regular' }
            }}
          />

        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
}

export default App;

I have checked the documentation to make sure I set it correctly and that I wasnt doing something blatantly wrong, and I cant find anything suggesting that I did.

What I expected was for my code to not have an error I guess? Or at least for the error to be something that tells me what to do in more detail so I can fix it. There is an image that shows on the emulator where it throws the error, but its literally where the error is thrown and not what caused it.

Seen Here

I have seen people mention the below, but I seem to have this covered to my knowledge:

useNavigation only works if your component is inside of a NavigationContainer and a Navigator

I have also looked at this page, as multiple SO answers have suggested. I dont truly understand it, but from a surface level I dont think it applies if I AM navigating with navigation prop: Link Here

I cant just get rid of the component, thats not a viable option. So I'm hoping someone here has some advice.

CodePudding user response：

Stumbled into an answer. Not sure if it is THE answer but it worked. Detailed below:

In my Menu file, I had this:

onPress={navigation.navigate('Tickets')}

But I suppose what it wanted, or what ended up working at least was:

onPress={navigation.navigate(Tickets)}

Notice the lack of single quotes.

What I did was import the Tickets component to the Menu file and used that for the Navigate call.