I am creating an app using expo by starting the commands npx create-expo-app@latest projectName.

Then I got "Looks like you have nested a navigation container inside another.. " error. I know it's because Expo already used/added a default navigation container, so I don't need to use it.

So right now, I am trying to migrate my navigation through expo route, but not quite sure how.

I have tried to wrap them by "Stack" from expo-router, no errors, but it's a blank page which I suspect it's because I missed "navigationRef" or I shouldn't use ```const Stackk = createStackNavigator();`` at all.
I am not sure where I should put "navigationRef" in Expo Route though.

If some one can give me some hints how to migrate my code to expo route would be really appreciated.

import { createStackNavigator } from '@react-navigation/stack';
import React, { useEffect } from 'react';
import name1 from './name1';
import name2 from './name2';
import { NavigationContainer } from '@react-navigation/native';
import { useSelector, useDispatch } from 'react-redux';
import { navigationRef } from './navigationRef';
import { Stack , useNavigation} from 'expo-router';


const Stackk = createStackNavigator();

export default function RootNavigator({ }) {

  return (

      <Stack >
     {/* <NavigationContainer ref={navigationRef} independent={true} > */}
      <Stackk.Navigator screenOptions={{ headerShown: false }}>
        <Stackk.Screen  name="name1" component={name1} />
        <Stackk.Screen  name="name2" component={name2} />
      </Stackk.Navigator>

    {/* </NavigationContainer> */}
     </Stack> 
  );
}

My navigationRef file

import * as React from 'react';

export const navigationRef = React.createRef();

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}

I am creating an app using expo by starting the commands npx create-expo-app@latest projectName.

Then I got "Looks like you have nested a navigation container inside another.. " error. I know it's because Expo already used/added a default navigation container, so I don't need to use it.

So right now, I am trying to migrate my navigation through expo route, but not quite sure how.

I have tried to wrap them by "Stack" from expo-router, no errors, but it's a blank page which I suspect it's because I missed "navigationRef" or I shouldn't use ```const Stackk = createStackNavigator();`` at all.
I am not sure where I should put "navigationRef" in Expo Route though.

If some one can give me some hints how to migrate my code to expo route would be really appreciated.

import { createStackNavigator } from '@react-navigation/stack';
import React, { useEffect } from 'react';
import name1 from './name1';
import name2 from './name2';
import { NavigationContainer } from '@react-navigation/native';
import { useSelector, useDispatch } from 'react-redux';
import { navigationRef } from './navigationRef';
import { Stack , useNavigation} from 'expo-router';


const Stackk = createStackNavigator();

export default function RootNavigator({ }) {

  return (

      <Stack >
     {/* <NavigationContainer ref={navigationRef} independent={true} > */}
      <Stackk.Navigator screenOptions={{ headerShown: false }}>
        <Stackk.Screen  name="name1" component={name1} />
        <Stackk.Screen  name="name2" component={name2} />
      </Stackk.Navigator>

    {/* </NavigationContainer> */}
     </Stack> 
  );
}

My navigationRef file

import * as React from 'react';

export const navigationRef = React.createRef();

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}

• android
• react-native
• expo

1 Answer 1

For now, I follow the suggest https://stackoverflow.com/a/79393511/10981623 that removed the "main": "expo-router/entry" in package.json and used regular App.js method.

I know it's not recommended if I intended to use Expo route, but it solved my current problem.