React native Mobx with navigation and decorator throws an error

Question

When im trying to use React Native Single Store. After injecting into Home Component the store is not visible in props of Home component.

By displaying the props of Home component im not able to access the store that was passed to Home component from App.js using Provider.

GitHub Link: https://github.com/FreelancerAnkit/Mobx1

Please do help!

Store.js


import {observable, action} from 'mobx';

class TestStore {
  @observable loading = true;
  @observable count = 123 ;

  @action loadingCompleted() {
    this.loading = false;
  }

  @action toggleLoading() {
    this.loading = this.loading ? false : true;
  }
}

export default new TestStore();

App.js



import React, {Component} from 'react';
import { Provider, inject, observer  } from "mobx-react/native";
import Home from './app/Home';
import store from "./app/TestStore";

class App extends Component{

  render(){
    return (
      <Provider {...{store: store}}>
        <Home />
      </Provider>
    )
  }
}

export default App;

Home.js


import {inject, observer} from "mobx-react/native";
import React from "react";
import { ActivityIndicator,View, Text } from "react-native";

@inject('store') @observer
export default class Home extends React.Component {

   componentDidMount() {
     alert(JSON.stringify(this.props))
   }
   render() {
      return (
         <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <Text>Landing Page</Text>
         </View>
      );
   }

}

Expected Result: alert this.props should show my store but it does not have my store passed by Provider of Mobx

M ilham M ilham · Accepted Answer · 2019-07-31T06:33:04

it's better to use this

update May 2021

import { Provider } from 'mobx-react'//no need native

import { Provider } from 'mobx-react/native'

<Provider { ...Store }>
    <Login />
  </Provider>

React native Mobx with navigation and decorator throws an error

1 Answers