ERROR [Error: Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/getting-started for setup instructions.]

[cryptobench]

Hello. I'm trying to setup storybook with expo, but i'm facing an issue that no matter what I do it complains about navigation context because one of my components has routing in it.

I've tried wrapping the index.tsx in the NavigationContainer as mentioned, but that just leads to a new error.

 ERROR  Warning: Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, wrap the container in 'NavigationIndependentTree' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them.

This error is located at:
    in BaseNavigationContainer
    in NavigationContainerInner (created by WrappedStorybookUIRoot)
    in WrappedStorybookUIRoot
    in Unknown (created by Route())
    in Suspense (created by Route())
    in Route (created by Route())
    in Route() (created by ContextNavigator)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by wrapper)
    in wrapper (created by ContextNavigator)
    in ThemeProvider
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in NavigationContainerInner (created by ContextNavigator)
    in ContextNavigator (created by ExpoRoot)
    in ExpoRoot (created by App)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (created by withDevTools(ErrorOverlay))
    in withDevTools(ErrorOverlay)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes

I'm quiet lost on what to do from here, so I hope someone can help me. My root _Layout.tsx file simply only contains this line export { default } from '../.storybook';

import AsyncStorage from '@react-native-async-storage/async-storage';
import { NavigationContainer } from '@react-navigation/native';
import React from 'react';
import { view } from './storybook.requires';

const StorybookUIRoot = view.getStorybookUI({
  storage: {
    getItem: AsyncStorage.getItem,
    setItem: AsyncStorage.setItem,
  },
});

// Wrap the Storybook UI with NavigationContainer
const WrappedStorybookUIRoot = () => (
  <NavigationContainer>
    <StorybookUIRoot />
  </NavigationContainer>
);

export default WrappedStorybookUIRoot;

[dannyhw]

I assume this is expo router? I find the simplest thing is to put storybook inside one of your routes, like make a storybook route that is only accessible when storybook is enabled

[cryptobench]

I tried wrapping that part with navigationContainer again

export default function Index() {
    return (
        <NavigationContainer>
            <StorybookUIRoot />
        </NavigationContainer>
    )
}

But then it complains about duplicate navigation again, and if I remove it then it complains there's no navigationContainer...

[cryptobench]

Ok weird thing happened.

If I run the app with

export default function Index() {
    return (
        <NavigationContainer>
            <StorybookUIRoot />
        </NavigationContainer>
    )
}

Then it complains about the duplicate container, but if I hit CTRL + Z to undo it to a state where its just

export default function Index() {
    return <StorybookUIRoot />
}

Then it now renders my storybook.

However

If i restart my app from scratch with just

export default function Index() {
    return <StorybookUIRoot />
}

Then it complains about there being no navigationcontainer. So I can get it to work but incredibly hacky. I'm so lost.

[dannyhw]

I have an example of expo router working if you want to take a look

example is a bit old now but here you go https://github.com/dannyhw/expo-router-storybook-example

I can update it if that would be useful

[cryptobench]

Thanks @dannyhw . I think I might be hit by a bug. I cannot get it to work even if replicating your setup, or adding it later during my app navigation where other routes works just fine. Essentially whatever I do it and no matter how loaded my application already is, then it always complain about the containernavigation, and if I manage to add it then its complaining about it being a duplicate.

I have only managed to get it work with the CTRL + Z hacky method, but it's incredibly annoying I can't have a normal working setup. :/

[dannyhw]

Can you make a reproduction of the problem so i can see what you mean?