CODEWITHSUNDEEP
javascriptreact-nativemobx
skrite
skrite

Reputation: 327

Mobx injector store not available in React Native app

I am getting an error "MobX injector: Store 'systemStore' is not available! make sure it is provided by some provider. What I really need to do is pass the store to all of my components so that I hace access to them in the this.props.systemStore in like, componentWillMount 

import React from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { AppLoading, Asset, Font } from 'expo';
import { Ionicons } from '@expo/vector-icons';
import {NavigationActions} from 'react-navigation'
import RootNavigation from './navigation/RootNavigation';

import { inject,  observer, Provider } from 'mobx-react';
import { observable, action } from "mobx";
import SystemStore from "./stores/SystemStore";


class Main extends React.Component {

render() {
  return (
      <Provider systemStore={SystemStore} >
          <App />
      </Provider>
    );
   }
 }


@inject("systemStore")
export default class App extends React.Component {



state = {
  isLoadingComplete: false,
};

render() {
 if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
  return (

    <AppLoading
      startAsync={this._loadResourcesAsync}
      onError={this._handleLoadingError}
      onFinish={this._handleFinishLoading}
    />
  );
} else {
  return (
        <View style={styles.container}>
          {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
          {Platform.OS === 'android' &&
            <View style={styles.statusBarUnderlay} />}
          <RootNavigation />
        </View>
  );
}
}





_loadResourcesAsync = async () => {
  return Promise.all([

  Font.loadAsync([
    // This is the font that we are using for our tab bar
    Ionicons.font,
    // We include SpaceMono because we use it in HomeScreen.js. Feel free
    // to remove this if you are not using it in your app
    { 'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf') },
  ]),


  Asset.loadAsync([
    require('./assets/images/robot-dev.png'),
    require('./assets/images/robot-prod.png'),
  ]),
 ]);
};

 _handleLoadingError = error => {
   console.warn(error);
};

  _handleFinishLoading = () => {
   this.setState({ isLoadingComplete: true });
};
}

 const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
 },
 statusBarUnderlay: {
  height: 24,
    backgroundColor: 'rgba(0,0,0,0.2)',
    },
});

Expo.registerRootComponent(Main);

and the store looks like this

import {observable, action, computed} from 'mobx'

class SystemStore {

@observable loggedIn    = false; 
@observable controlAuth = false;
@observable testingKey = "Testing-Yo"

}

export default new SystemStore()

i have been all over looking for a solution, just cannot seem to get my head around this one. thanks

Upvotes: 3

Views: 2547

Answers (1)

A E
A E

Reputation: 1454

So how I deal with this issue is, I create a file called stores.js which looks like this:

import SystemStore from './stores/systemStore';

const systemStore = new SystemStore();

export {
  SystemStore
}

export default {
  systemStore
}

In this file I import and export all my stores, so that I can always call stores.systemStore (and all other stores you have) with just importing my stores.js like this

import React from 'react';
import {observer} from 'mobx-react';
import stores from './../../stores';

@observer
class TestComponent extends React.Component {
  constructor(props){
    super(props);
  }
    
  render() {
    return (
      <div>
        {stores.systemStore.testingKey}
      </div>
    );

  }
}

export default TestComponent;

And my stores look like this then:

import store from 'store';
import {observable, action, computed} from 'mobx';

class systemStore {
  
  @observable loggedIn = false; 
  @observable controlAuth = false;
  @observable testingKey = "Testing-Yo";


}

export default systemStore;

I hope this will help you. It works for me :)

Upvotes: 4

Related Questions