Mobx store changes are not updated in other components (React-Native)

Package.json file

{
  "name": "gyftm",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/netinfo": "5.9.4",
    "@react-native-community/picker": "1.6.5",
    "@react-native-community/toolbar-android": "0.1.0-rc.2",
    "axios": "0.19.2",
    "formstate": "1.3.0",
    "lodash": "4.17.19",
    "mobx": "5.9.0",
    "mobx-persist": "0.4.1",
    "mobx-react": "5.4.3",
    "mobx-state-tree": "3.13.0",
    "native-base": "2.13.12",
    "react": "16.11.0",
    "react-native": "0.62.2",
    "react-native-config": "1.3.1",
    "react-native-device-info": "5.6.1",
    "react-native-extra-dimensions-android": "1.2.5",
    "react-native-gesture-handler": "1.6.1",
    "react-native-iphone-x-helper": "1.2.1",
    "react-native-reanimated": "1.9.0",
    "react-native-router-flux": "4.2.0",
    "react-native-screens": "2.9.0",
    "react-native-splash-screen": "3.2.0",
    "react-native-vector-icons": "6.7.0",
    "validator": "13.1.1"
  },
  "devDependencies": {
    "@babel/core": "7.6.2",
    "@babel/plugin-proposal-decorators": "7.3.0",
    "@babel/preset-flow": "7.0.0",
    "@babel/preset-stage-0": "7.8.3",
    "@babel/runtime": "7.0.0-beta.55",
    "@react-native-community/eslint-config": "0.0.5",
    "babel-jest": "24.9.0",
    "eslint": "6.5.1",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.58.0",
    "react-test-renderer": "16.11.0"
  },
  "jest": {
    "preset": "react-native"
  },
  "rnpm": {
    "assets": [
      "./src/assets/fonts/"
    ]
  }
}

Store.js

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

export default class HomeStore {
    @persist('object') @observable selectedProvider
    @persist('object') @observable Providers
    @observable selectedService

    @action
    setProviders(providers) {
        this.Providers = providers
    }

    @action
    setSelectedService(serviceId) {
        this.selectedService = serviceId
    }

    @action
    setSelectedProvider(provider) {
        this.selectedProvider = provider
    }

    @computed
    get getService() {
        return this.selectedService
    }

    @computed
    get getProviders() {
        return this.Providers
    }

    @computed
    get getSelectedProvider() {
        return this.selectedProvider
    }
}

setData in Store (Home.js)

 componentWillMount(){
        const {setProviders,setSelectedProvider} = this.props.homeStore
        getProviders().then((data)=>{
            setProviders(data)
            setSelectedProvider([])

        }).catch((error)=>{
            console.log(error)
        })
    }

Show Data from Store Code

import React, { Component } from 'react'
import { inject, observer } from 'mobx-react'

@inject('navigationStore','homeStore')
@observer
export default class Home extends Component {
  render() {
        const { homeStore } = this.props
        console.log("HomeStore ",homeStore);
        return (
            <Page>
            </Page>
)}
}

Output

Capture_log

mobxjs / mobx-react

Mobx store changes are not updated in other components (React-Native) #885

Package.json file