Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aksonov/react-native-mobx
Make your app reactive with MobX and react-native-router-flux
https://github.com/aksonov/react-native-mobx
Last synced: 26 days ago
JSON representation
Make your app reactive with MobX and react-native-router-flux
- Host: GitHub
- URL: https://github.com/aksonov/react-native-mobx
- Owner: aksonov
- License: mit
- Created: 2016-05-25T07:54:45.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-07-25T15:07:38.000Z (over 7 years ago)
- Last Synced: 2024-10-14T11:30:55.224Z (about 2 months ago)
- Language: Objective-C
- Size: 104 KB
- Stars: 224
- Watchers: 21
- Forks: 38
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-mobx ★220 - Make your app reactive with MobX and react-native-router-flux (Components / UI)
- awesome-reactnative-ui - react-native-mobx - native-router-flux|<ul><li>Last updated : 1 year ago</li><li>Stars : 220</li><li>Open issues : 8</li></ul>|| (Others)
- awesome-react-native - react-native-mobx ★220 - Make your app reactive with MobX and react-native-router-flux (Components / UI)
- awesome-reactnative-ui - react-native-mobx - native-router-flux|<ul><li>Last updated : 1 year ago</li><li>Stars : 220</li><li>Open issues : 8</li></ul>|| (Others)
- awesome-react-native - react-native-mobx ★220 - Make your app reactive with MobX and react-native-router-flux (Components / UI)
- awesome-react-native-ui - react-native-mobx ★138 - Make your app reactive with MobX and react-native-router-flux (Components / UI)
- awesome-react-native - react-native-mobx ★220 - Make your app reactive with MobX and react-native-router-flux (Components / UI)
README
## 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 ``
# react-native-mobx
React Native Reactive programming using [RNRF](https://github.com/aksonov/react-native-router-flux) and [MobX](https://mobxjs.github.io/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](https://github.com/aksonov/react-native-router-flux), so check its docs, install it and then install this module and import it instead of RNRF.
Example of reactive model counter:
Example.js:
```jsx
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 () =>
```
counter.js (model)
```jsx
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)
```jsx
import React from 'react';
import {
View,
Text,
TouchableOpacity,
StyleSheet
} from 'react-native';
import Button from 'react-native-button';
const Counter = ({store}) =>
Welcome to React Native Reactive!
Counter: {store.counter}
Total clicks: {store.total}
+
-
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;
```