Make your app reactive with MobX and react-native-router-flux
Objective-C JavaScript Python Java
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Example Updated to react-native 0.33 Sep 19, 2016
.gitignore initial version May 25, 2016
.npmignore initial version May 25, 2016
LICENSE Initial commit May 25, 2016
README.md Update README.md Jul 25, 2017
index.d.ts Create index.d.ts Oct 31, 2016
index.js Remove decorators dependency Jul 4, 2017
package.json Update package.json Oct 31, 2016

README.md

Package is obsolete with latest react-native-router-flux v4 - RNRF allows now wrapping all scenes and navbar by passing wrapBy param (equal to MobX observer) to <Router>

react-native-mobx

React Native Reactive programming using RNRF and MobX

What is it?

Thin wrapper around Mobx allows to use all power of reactive programming but leave your React Native Components 'framework free' i.e doesn't depend from MobX, Redux, etc.

How to use it?

This component is just thin wrapper around RNRF, so check its docs, install it and then install this module and import it instead of RNRF.

Example of reactive model counter:

demo

Example.js:

import React from 'react';
import {Router, Scene} from 'react-native-mobx';

// view and model for Counter scene
import Counter from './components/Counter';
import store from './model/counter';

export default () =>
  <Router store={store}>
    <Scene key="launch" component={Counter} hideNavBar/>
  </Router>

counter.js (model)

import {reaction, observable, observe, computed, autorun} from 'mobx';
import autobind from 'autobind-decorator'

@autobind
class CounterStore {
  @observable counter = 0;
  total = 0;

  constructor(){
    reaction(()=>this.counter, ()=>this.total++);
  }


  increase(){
    this.counter++;
  }

  decrease(){
    this.counter--;
  }
}

export default  new CounterStore();

Counter.js (view)

import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet
} from 'react-native';
import Button from 'react-native-button';

const Counter = ({store}) =>
  <View style={styles.container}>
    <Text style={styles.welcome}>
      Welcome to React Native Reactive!
    </Text>
    <Text>Counter: {store.counter}</Text>
    <Text>Total clicks: {store.total}</Text>
    <Button onPress={store.increase}>+</Button>
    <Button onPress={store.decrease}>-</Button>
  </View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

export default Counter;