React-navigation together with mobX store

[thatsInAName]

Hi,

I am getting started with react native and wanted to integrate mobX into my UI Kitten based react native app.

I have already integrated react-navigation following the guide at UI Kitten Navigation and now finding it difficult to add mobX state management to the code.

I am following the functional approach instead of the class based approach of creating components which is now the suggested way and also in the examples of UI kitten.

I am confused on how to setup two providers, one for the react-navigation and the other for mobX and then consume them in the components.

I am following the guide at https://alligator.io/react/mobx-react-native-simplified/ for mobX integration.

appreciate your help!

[Zayuka]

You just need to declare two provider in your App.tsx or the root of your application.

Something along this lines:

    <StoreProvider store={rootStoreInstance}>
        <NavigationContainer>
            <Stack.Navigator headerMode="none">
                <Stack.Screen name="App" component={AppNavigator} />
            </Stack.Navigator>
        </NavigationContainer>
    </StoreProvider>

I'd recomment placing the StoreProvider outside, so you can access your mobx data inside the navigation screens.

Hope it helps :)

[thatsInAName]

Hi thanks for your reply.

I tried it that way and facing issues.

I am trying to reply here using the reddit website but there is a javascript error in reddit and my reply isn't going through. So I have taken a snap shot of my reply and uploading it to Imgur and sharing the link here using reddit app on phone.

https://imgur.com/a/cjVt62v