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;