{"id":21292933,"url":"https://github.com/soulmachine/react-native-starter-kit","last_synced_at":"2026-05-16T23:12:51.125Z","repository":{"id":68068519,"uuid":"80346819","full_name":"soulmachine/react-native-starter-kit","owner":"soulmachine","description":"My React Native Starter Kit","archived":false,"fork":false,"pushed_at":"2017-01-31T10:23:41.000Z","size":1292,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-22T06:37:11.203Z","etag":null,"topics":["boilerplate","mobx","react-native","starterkit"],"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":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/soulmachine.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-29T13:15:38.000Z","updated_at":"2017-01-29T13:46:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"f2bf661e-2db0-411c-88f9-44f49002a8e3","html_url":"https://github.com/soulmachine/react-native-starter-kit","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/soulmachine%2Freact-native-starter-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soulmachine%2Freact-native-starter-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soulmachine%2Freact-native-starter-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soulmachine%2Freact-native-starter-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/soulmachine","download_url":"https://codeload.github.com/soulmachine/react-native-starter-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243762232,"owners_count":20343972,"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":["boilerplate","mobx","react-native","starterkit"],"created_at":"2024-11-21T13:52:44.041Z","updated_at":"2026-05-16T23:12:46.085Z","avatar_url":"https://github.com/soulmachine.png","language":"Objective-C","funding_links":[],"categories":[],"sub_categories":[],"readme":"This repo shows how to build a react native starter kit step by step.\n\nAll starter kits in this tutorial use ES6 by default.\n\nTable of Contents\n-----------------\n1. [Step1: Create an Empty Project](#1-step1-create-an-empty-project)\n1. [Step2: Step1 + MobX](#2-step2-step1--mobx)\n1. [Step3: Use Provider and Inject to Avoid Singleton](#3-step3-use-provider-and-inject-to-avoid-singleton)\n1. [Step4: Step3 + Bottom Tab Bar](#4-step4-step3--bottom-tab-bar)\n\n\n# 1 Step1: Create an Empty Project\n\nFirst install all dependencies according to the official document, [Getting Started](https://facebook.github.io/react-native/docs/getting-started.html)\n\nLet's create an empty project,\n\n    react-native init Step1\n\n\nThen run it in the iOS simulator,\n\n    cd Step1\n    react-native run-ios\n\n\n# 2 Step2: Step1 + MobX\n\nIn this section we're going to build the classical `Counter` component using MobX.\n\nInstall MobX,\n\n    npm install --save mobx mobx-react\n\nWe need to install the `babel-plugin-transform-decorators-legacy` Babel plugin to use ES7 decorator,\n\n    npm install --save-dev babel-plugin-transform-decorators-legacy\n\nDon't forget to enable it in `.babelrc`,\n\n```json\n{\n  \"presets\": [\"react-native\"],\n  \"plugins\": [\"transform-decorators-legacy\"]\n}\n```\n\nIn the root directory, create a folder named `app`. In `app`, create a folder named `store`. In `store`, create a file named `counter.js`,\n\n```javascript\n// @flow\nimport {observable, action, useStrict} from 'mobx'\nuseStrict(true)\n\nclass CounterStore {\n  @observable counter = 0;\n\n  @action increment() {\n    this.counter++;\n  }\n\n  @action decrement() {\n    this.counter--;\n  }\n\n  @action incrementAsync() {\n    setTimeout(() =\u003e {\n      this.increment();\n    }, 1000);\n  }\n}\n\nexport default new CounterStore();\n```\n\nCreate a component, `app/components/Counter.js`,\n\n```jsx\n// @flow\nimport { observer } from 'mobx-react/native';\n\nimport React, { Component, PropTypes } from 'react';\nimport {\n  StyleSheet,\n  Text,\n  TouchableHighlight,\n  View\n} from 'react-native';\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#F5FCFF'\n  },\n  text: {\n    fontSize: 20,\n    textAlign: 'center',\n    margin: 10\n  },\n  heading: {\n    fontSize: 30,\n    textAlign: 'center',\n    margin: 10\n  }\n});\n\nfunction Counter(props) {\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cText style={styles.heading}\u003eMobx Counter\u003c/Text\u003e\n      \u003cTouchableHighlight onPress={() =\u003e props.store.increment()}\u003e\n        \u003cText style={styles.text}\u003e|   +   | \u003c/Text\u003e\n      \u003c/TouchableHighlight\u003e\n\n      \u003cText style={styles.text}\u003eClicked: {props.store.counter} times\u003c/Text\u003e\n\n      \u003cTouchableHighlight onPress={() =\u003e props.store.decrement()}\u003e\n        \u003cText style={styles.text}\u003e|   -   | \u003c/Text\u003e\n      \u003c/TouchableHighlight\u003e\n\n      \u003cTouchableHighlight onPress={() =\u003e props.store.incrementAsync()}\u003e\n        \u003cText style={styles.text}\u003e|   + Async   | \u003c/Text\u003e\n      \u003c/TouchableHighlight\u003e\n    \u003c/View\u003e\n  );\n}\nCounter.propTypes = {\n  store: PropTypes.object.isRequired\n};\n\nexport default observer(Counter);\n```\n\nChange the content of `index.ios.js` and `index.android.js` to the following:\n\n```jsx\n// @flow\nimport React, { Component } from 'react';\nimport { AppRegistry } from 'react-native';\nimport Counter from './app/components/Counter';\nimport counterStore from './app/store/counter';\n\nexport default class Step2 extends Component {\n  render() {\n    return (\n      \u003cCounter store={counterStore}/\u003e\n    );\n  }\n}\n\nAppRegistry.registerComponent('Step2', () =\u003e Step2);\n```\n\nReferences:\n\n* [React Native + Mobx List App - Github](https://github.com/dabit3/react-native-mobx-list-app)\n* [React Native with MobX — Getting Started](https://medium.com/react-native-training/react-native-with-mobx-getting-started-ba7e18d8ff44#.hkfdy2fgl)\n* [mobx-react-native-counter](https://github.com/bartonhammond/mobx-react-native-counter)\n\n\n# 3 Step3: Use Provider and Inject to Avoid Singleton\n\nIn previous section we created a singleton using `export default new CounterStore();`, and import it where needed. If the number of stores grows, it would become clumpsy, the author of MobX recommends using `Provider`, see \u003chttps://github.com/mobxjs/mobx/issues/300\u003e.\n\nIn `app/store/counter.js` exports a class instead of an instance, and create a root store in `src/store/index.js`,\n\n```javascript\nimport CounterStore from './counter';\n\n// root store\nconst rootStore = {\n  \"counter\": new CounterStore()\n};\nexport default rootStore;\n```\n\nOnly inject the store that is needed by a component, for example, inject the `counter` store to the `Counter` component,\n\n```javascript\nexport default inject(\"counter\")(observer(Counter));\n```\n\nUse `Provider` in the root component, in this case it is the `Step2` component in `index.ios.js` and `index.android.js`.\n\nSee [this commit](https://github.com/soulmachine/react-native-starter-kit/commit/6c0a483054774559bfd87c12de8cebd87541f7c8) for details.\n\nReferences:\n\n* [How to use Provider and inject in MobX](https://gist.github.com/sonaye/8756d1077942b0144767d3de0ded9b16)\n\n\n# 4 Step4: Step3 + Bottom Tab Bar\n\nIn this section we're going to add a tabbar at the bottom, see the demo:\n\n![](./Step4/images/step4-demo.gif)\n\nMake sure you are using react-native version 0.37.0 and react 15.3.2, to achive this you just need to init the project with the following:\n\n    react-native init Step4 --version react-native@0.38.0\n\nWe will use [react-native-navigation](https://github.com/wix/react-native-navigation) to implement the bottom tab bar.\n\n    npm install react-native-navigation@next --save\n\nAnd then run `react-native link` to link your libraries that contain native code.\n\nAdd the `RCTAnimation` library to this project:\n\n1. Open `ios/Step4.xcodeproj` with Xcode, in Project Navigator (left pane), right-click on the `Libraries` and select  `Add files to [project name]`. Add `./node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj.xcodeproj`.\n1. In Project Navigator (left pane), click on your project (top) and select the `Build Phases` tab (right pane). In the `Link Binary With Libraries` section add `libRTCAnimation.a`.\n\n\nUse this file [AppDelegate.m](https://github.com/wix/react-native-navigation/blob/master/example/ios/example/AppDelegate.m) to overwrite `ios/Step4/AppDelegate.m`.\n\nChange the file `android/app/src/main/java/com/step4/MainActivity.java` to the following:\n\n```java\npackage com.step4;\n\nimport com.reactnativenavigation.controllers.SplashActivity;\n\npublic class MainActivity extends SplashActivity {\n\n}\n```\n\nAnd change `android/app/src/main/java/com/step4/MainApplication.java` to the following:\n\n```java\npackage com.step4;\n\nimport android.support.annotation.Nullable;\n\nimport com.facebook.react.ReactPackage;\nimport com.reactnativenavigation.NavigationApplication;\n\nimport java.util.List;\n\npublic class MainApplication extends NavigationApplication {\n    @Override\n    public boolean isDebug() {\n        return BuildConfig.DEBUG;\n    }\n\n    @Nullable\n    @Override\n    public List\u003cReactPackage\u003e createAdditionalReactPackages() {\n        return null;\n    }\n}\n```\n\nCreate a folder `app/screens` and put several screens here.\n\nChange `index.ios.js` and `index.android.js` to the following:\n\n```javascript\n// @flow\nimport {Navigation} from 'react-native-navigation';\n\n// screen related book keeping\nimport {registerScreens} from './app/screens/register_screens';\nregisterScreens();\n\nconst tabs = [\n  {\n    label: 'Home',\n    screen: 'Home', // this is a registered name for a screen\n    icon: require('./images/home.png'),\n    selectedIcon: require('./images/home_selected.png'),\n    title: 'Home'\n  },\n  {\n    label: 'Me',\n    screen: 'Me', // this is a registered name for a screen\n    icon: require('./images/profile.png'),\n    selectedIcon: require('./images/profile_selected.png'),\n    title: 'Me',\n    navigatorStyle: {\n      tabBarBackgroundColor: '#4dbce9',\n    }\n  }\n];\n\n// this will start our app\nNavigation.startTabBasedApp({\n  tabs: tabs,\n  appStyle: {\n    tabBarBackgroundColor: '#0f2362',\n    tabBarButtonColor: '#ffffff',\n    tabBarSelectedButtonColor: '#63d7cc'\n  }\n});\n```\n\nReferences:\n\n* [Usage](https://github.com/wix/react-native-navigation/wiki/Usage)\n* [example](https://github.com/wix/react-native-navigation/tree/master/example)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoulmachine%2Freact-native-starter-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoulmachine%2Freact-native-starter-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoulmachine%2Freact-native-starter-kit/lists"}