How to Pass Mobx store in React Native using Provider?
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: 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>
);
}
}