Skip to content

aksonov/react-native-mobx

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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;

About

Make your app reactive with MobX and react-native-router-flux

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •