Mobx

React Native Mobx integration

Install dependencies

$ npm install mobx mobx-react

Mobx uses decorators so we have to make a few configuration changes because React Native doesn't support them natively.

$ npm install @babel/plugin-proposal-decorators

Modify our babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [['@babel/plugin-proposal-decorators', {legacy: true}]],
};

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React from 'react';
import {SafeAreaView, StatusBar} from 'react-native';
import Main from './src/containers/Main/Main';
import {Provider} from 'mobx-react';
import AppStore from './src/store';

const store = (window.store = new AppStore());

const App = () => {
  return (
    <>
      <Provider store={store}>
        <StatusBar barStyle="dark-content" />
        <SafeAreaView style={{flex: 1}}>
          <Main />
        </SafeAreaView>
      </Provider>
    </>
  );
};

export default App;

import {observable, action} from 'mobx';

class AppStore {
  @observable title = 'Hello world';
  @action onChangeText = val => {
    this.title = val;
  };
}

export default AppStore;

import React, {Component} from 'react';
import {View, Text, TextInput} from 'react-native';
import {inject, observer} from 'mobx-react';

@inject('store')
@observer
class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View>
        <Text>{this.props.store.title} </Text>
        <TextInput
          style={{height: 40, borderColor: 'gray', borderWidth: 1}}
          onChangeText={this.props.store.onChangeText}
        />
      </View>
    );
  }
}

export default Main;