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
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>