Access mobx stores from any component in react-native

Viewed 32

I'm new to react-native and react world, I'm using mobx store for state management as a single source of truth, I want to be able to access globalStore object from ANY component in my application without having to import globalStore, I think this MIGHT be possible with react Context-Provider API but I'm still a newbie.

My globalStore (I access all stores from this root store):

import { PostStore }  from '../stores/PostStore.js'
import { VenueStore }  from '../stores/VenueStore.js'


class GlobalStore
{
    
    postStore;
    venueStore;


    constructor()
    {
        this.postStore = new PostStore(this);
        this.venueStore = new VenueStore(this);
    }


}

export default new GlobalStore;

In my functional components I want to be able to to something simple like:

onPress={ globalStore.userStore.loggedUser }

without having to import globalStore into my components

My App.js component:

import React, { useEffect } from 'react'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import ROOTSTACK1 from '@components/navigators/ROOTSTACK1';
import { SafeAreaView, AsyncStorage } from "react-native";
import global from '@styles/Global';


const Stack = createStackNavigator();

function App()
{


    return (
    <SafeAreaView style={[ global.androidSafeArea ]}>
        <NavigationContainer>
            <ROOTSTACK1></ROOTSTACK1>
        </NavigationContainer>
    </SafeAreaView>
    );
}


export default App;
0 Answers
Related