Search code examples
react-nativemobxmobx-react

React native MobX store - MobX injector: Store is not available

I'm using the following template: https://github.com/cawfree/create-react-native-dapp

I have used the provider component in the top level (parent) component like so:

import { Provider } from 'mobx-react';
import SettingsStore from '../../store/settings';

return (
    <Provider store={SettingsStore}>
      <View style={[StyleSheet.absoluteFill, styles.center, styles.white, !loading && {justifyContent: 'space-between'}]}>
        {loading ? 
          <FadeOutImage /> 
        : 
          <Welcome />
        }
      </View>
    </Provider>
  );

Here's my SettingsStore in file settings.js:

import {makeAutoObservable} from 'mobx';

class SettingsStore {
    darkMode = false

    constructor() {
        makeAutoObservable(this)
    }

    toggleDarkMode = () => {
        this.darkMode = !this.darkMode
    }
}
  
export default new SettingsStore();

The following is where I am injecting the store. It's the child component <Welcome />:

import { inject, observer } from "mobx-react";

const Welcome () => {
  return (<View><Text>test</Text></View>)
}

export default inject("SettingsStore")(observer(Welcome));

I have checked that the paths for the imports is correct (would get another error otherwise). I just cannot understand why I am seeing the following err: enter image description here

What's going wrong and how can I fix this?

Solution

  • You passing in under the name store into Provider (<Provider store={SettingsStore}>), so when injecting you need to use same prop name inject("store"). Or change prop name to SettingsStore: <Provider SettingsStore={SettingsStore}>