Skip to content
This is an essential example to build react-native app using Javascript and Mobx
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
README.md
app.json
babel.config.js
index.js
jsconfig.json
metro.config.js
package.json

README.md

react-native-javascript-mobx-example

This is an essential example to build react-native app using Javascript and Mobx

  1. Clone the repo
  2. yarn install OR npm install
  3. react-native eject
  4. react-native run-ios OR react-native run-android

Define store:

import { observable, action, runInAction, computed, autorun } from 'mobx';
import ajax from '../util/ajax'

export default class AppStore {
    @observable isLoading = true
    @observable isFailure = false
    @observable searchTerm = observable.box("")
    @observable deals = []
    @observable currentDealId = null

    constructor() {
        this.searchTerm.observe( (value) => {
            this.fetchDeals(value.newValue)
        }, true)
    }

    async fetchDeals() {
        ajax.fetchDealSearchResults(this.searchTerm).then(data => {
            runInAction(() => {
                this.isLoading = false
                this.deals = data
            })
        })
    }

    @action setSearchTerm(searchStr) {
        this.searchTerm.set(searchStr)
    }

    @action
    setCurrentDeal(dealId) {
        this.currentDealId = dealId
    }

    @action
    unsetCurrentDeal() {
        this.currentDealId = null
    }

    @computed get currentDeal() {
        return this.deals.find((deal) => deal.key === this.currentDealId)
    }
}

Call in components:

@inject("appStore") @observer
class App extends React.Component {

  searchDeals = (searchTerm) => {
    this.props.appStore.setSearchTerm(searchTerm)
  }

  setCurrentDeal = (dealId) => {
    this.props.appStore.setCurrentDeal(dealId)
  }

  unsetCurrentDeal = () => {
    this.props.appStore.unsetCurrentDeal()
  }

  render() {
    const appStore = this.props.appStore
}
}

If you see any issue, please do not hesitate to create an issue here or can contact me via email cao.trung.thu@gmail.com or Linkedin

Thanks

references

  1. https://facebook.github.io/react-native/docs/tutorial
  2. https://github.com/jscomplete/react-native-essential-training
  3. https://mobx.js.org
  4. https://www.tutorialspoint.com/es6
You can’t perform that action at this time.