{"id":4068,"url":"https://github.com/aksonov/react-native-mobx","last_synced_at":"2025-04-09T09:06:57.317Z","repository":{"id":57338418,"uuid":"59642577","full_name":"aksonov/react-native-mobx","owner":"aksonov","description":"Make your app reactive with MobX and react-native-router-flux","archived":false,"fork":false,"pushed_at":"2017-07-25T15:07:38.000Z","size":107,"stargazers_count":224,"open_issues_count":8,"forks_count":38,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-04-02T07:08:43.813Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aksonov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-25T07:54:45.000Z","updated_at":"2024-09-02T01:09:12.000Z","dependencies_parsed_at":"2022-09-07T11:50:43.218Z","dependency_job_id":null,"html_url":"https://github.com/aksonov/react-native-mobx","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aksonov%2Freact-native-mobx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aksonov%2Freact-native-mobx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aksonov%2Freact-native-mobx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aksonov%2Freact-native-mobx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aksonov","download_url":"https://codeload.github.com/aksonov/react-native-mobx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248008630,"owners_count":21032556,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:17:00.087Z","updated_at":"2025-04-09T09:06:57.295Z","avatar_url":"https://github.com/aksonov.png","language":"Objective-C","funding_links":[],"categories":["Components","Others"],"sub_categories":["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 `\u003cRouter\u003e`\n\n# react-native-mobx\nReact Native Reactive programming using [RNRF](https://github.com/aksonov/react-native-router-flux) and [MobX](https://mobxjs.github.io/mobx/)\n\n## What is it?\nThin 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.\n\n\n## How to use it?\nThis 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.\n\nExample of reactive model counter:\n\n![demo](https://cloud.githubusercontent.com/assets/1321329/15446716/b4639f86-1f29-11e6-960d-5ba0c6f8fc47.gif)\n\nExample.js:\n```jsx\nimport React from 'react';\nimport {Router, Scene} from 'react-native-mobx';\n\n// view and model for Counter scene\nimport Counter from './components/Counter';\nimport store from './model/counter';\n\nexport default () =\u003e\n  \u003cRouter store={store}\u003e\n    \u003cScene key=\"launch\" component={Counter} hideNavBar/\u003e\n  \u003c/Router\u003e\n```\n\ncounter.js (model)\n```jsx\nimport {reaction, observable, observe, computed, autorun} from 'mobx';\nimport autobind from 'autobind-decorator'\n\n@autobind\nclass CounterStore {\n  @observable counter = 0;\n  total = 0;\n\n  constructor(){\n    reaction(()=\u003ethis.counter, ()=\u003ethis.total++);\n  }\n\n\n  increase(){\n    this.counter++;\n  }\n\n  decrease(){\n    this.counter--;\n  }\n}\n\nexport default  new CounterStore();\n```\n\nCounter.js (view)\n```jsx\nimport React from 'react';\nimport {\n  View,\n  Text,\n  TouchableOpacity,\n  StyleSheet\n} from 'react-native';\nimport Button from 'react-native-button';\n\nconst Counter = ({store}) =\u003e\n  \u003cView style={styles.container}\u003e\n    \u003cText style={styles.welcome}\u003e\n      Welcome to React Native Reactive!\n    \u003c/Text\u003e\n    \u003cText\u003eCounter: {store.counter}\u003c/Text\u003e\n    \u003cText\u003eTotal clicks: {store.total}\u003c/Text\u003e\n    \u003cButton onPress={store.increase}\u003e+\u003c/Button\u003e\n    \u003cButton onPress={store.decrease}\u003e-\u003c/Button\u003e\n  \u003c/View\u003e\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#F5FCFF',\n  },\n  welcome: {\n    fontSize: 20,\n    textAlign: 'center',\n    margin: 10,\n  },\n  instructions: {\n    textAlign: 'center',\n    color: '#333333',\n    marginBottom: 5,\n  },\n});\n\nexport default Counter;\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faksonov%2Freact-native-mobx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faksonov%2Freact-native-mobx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faksonov%2Freact-native-mobx/lists"}