Nested Navigation in React Native not compiling

I’m new to nested navigation. I have tried to follow the principles here – however I am getting the error

Couldn’t find a navigation object. Is your component inside NavigationContainer?

I have brought the ‘Screens’ into the main App.js for ease of debugging and sharing code. Below is my code.

I am trying to have a home screen with a Nav Drawer, on two of the screens (‘Patterns’ and ‘One Step’) I’m then trying to implement Stacked Navigation as they will have lists and detail screens within.

import { Button, View, Text } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { createStackNavigator} from '@react-navigation/stack';
import { useNavigation } from '@react-navigation/native';
// import HomeScreen from './screens/HomeScreen';
// import PatternsScreen from './screens/patterns/PatternsScreen';
// import OneStepScreen from './screens/one_step/OneStepScreen';
import { Ionicons } from '@expo/vector-icons';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();



function HomeScreen(){
  return(
      <View>
          <Text>This is the Home Screen. This will contain two large Squares which are buttons to access Patterns and One Step</Text>
      </View>
  );
}

function PatternsScreen(){
  return(
    <View>
      <Text>This is the Patterns Screen. This will contain Stacked navigation of all patterns</Text>
    </View>
  );
}

function OneStepScreen(){
  return(
      <View>
          <Text>This is the OneStep Screen. This will contain Stacked navigation of all OneStep</Text>
            <Button title="Go To Details" onPress={navigation.navigate('One Step Details', )}></Button>
            <Stack.Navigator>
                <Stack.Screen name="One Step Details" component={OneStepDetail} />
            </Stack.Navigator>
      </View>
  );
}

export default function App() {
  const navigation = useNavigation();
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Patterns" component={PatternsScreen} />
        <Drawer.Screen name="One Step" component={OneStepScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  )
}

Answer

You are calling useNavigation before you define NavigationContainer, that should not work. Make component, for example <AppNavigator /> as a children of NavigationContainer, then try to build your navigation in that component.

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

And your NavigationContainer is also fairly confusing to me. So you either can have screens in your parent navigator or another navigators.

this is CORRECT:

<Drawer.Screen name="Home" component={HomeScreen} /> 

I would rename this, as you are trying to have StackNavigator here:

<Drawer.Screen name="One Step" component={OneStepScreen} /> 

to something like this example:

<Drawer.Screen name="One Step" component={OneSctepStack} /> 

And then in OneStepStack(former oneStepScreen) you can’t have normal JSX mixed with Stack.Navigator.

function OneStepStack(){
  return(
            <Stack.Navigator>
                <Stack.Screen name="One Step Details" component={OneStepDetail} />
            </Stack.Navigator>
  );
}