Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error: There is no route defined for key Location. Must be one of: 'root','modal' #3832

Open
tanerparcali opened this issue Nov 29, 2022 · 2 comments

Comments

@tanerparcali
Copy link

tanerparcali commented Nov 29, 2022

Any ideas on this? Why am I getting this error? It's fine when I don't use Modal, but this is the error I get when I try to generate a Modal window.

"react-native": "0.70.6", with TypeScript template

"react": "18.1.0",
"react-native": "0.70.6",
"react-native-animatable": "^1.3.3",
"react-native-gesture-handler": "^2.8.0",
"react-native-reanimated": "^2.13.0",
"react-native-router-flux": "^4.3.1",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2",

<Router>
      <Modal>
        <Stack key="root" hideNavBar>  
          <Scene key="Control" initial component={Control} type="reset" back={false} />
          <Scene tabs={true} showLabel={false} hideNavBar tabBarStyle={styles.tabBar} type="reset">
            <Scene key="Account" component={AccountPage} hideNavBar icon={AccountIcon} title='Account' lazy on={() => appState.setCurrentScreen('AccountPage')} />
          </Scene>
        </Stack>
        <Scene  key="modal" component={ItemList} /> 
        </Modal>
    </Router>

Simulator Screen Shot - iPhone 14 - 2022-11-29 at 20 08 49

@salorsino
Copy link

You wouldn't want to put your modal as the root element. You should navigate to a page where this navigation stack can be presented in a Modal.

@tanerparcali
Copy link
Author

My App.tsx

<Router>
      <Modal>
              <Stack key="root" hideNavBar>  
                <Scene key="Control" initial component={Control} type="reset" back={false} />
                <Scene tabs={true} showLabel={false} hideNavBar tabBarStyle={styles.tabBar} type="reset">
                  <Scene key="Account" component={AccountPage} hideNavBar icon={AccountIcon} title='Account' lazy on={() => appState.setCurrentScreen('AccountPage')} />
                </Scene>
              </Stack>
        <Scene  key="modal" component={ItemList} /> 
        </Modal>
    </Router>

Actually this was working fine in different projects, I couldn't find what's wrong here.
Opening this page as a modal view when entering the key="modal" page that should be in the router code above.

For example, I'm on the "Account" page and when I try to navigate to this page as Actions.modal(), the application throws an error.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants