{"id":15547361,"url":"https://github.com/charlesmangwa/react-native-simple-kit","last_synced_at":"2025-04-23T18:24:29.828Z","repository":{"id":92236867,"uuid":"80535226","full_name":"CharlesMangwa/react-native-simple-kit","owner":"CharlesMangwa","description":"🚀 Get started with React Native and Redux with no effort!","archived":false,"fork":false,"pushed_at":"2018-08-31T19:30:56.000Z","size":1485,"stargazers_count":23,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"react-navigation","last_synced_at":"2025-03-30T02:22:15.923Z","etag":null,"topics":["android","apollo-client","graphql","ios","react-native","redux","starter-kit"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/CharlesMangwa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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-31T15:53:11.000Z","updated_at":"2019-07-23T14:39:58.000Z","dependencies_parsed_at":"2023-06-08T02:45:41.435Z","dependency_job_id":null,"html_url":"https://github.com/CharlesMangwa/react-native-simple-kit","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesMangwa%2Freact-native-simple-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesMangwa%2Freact-native-simple-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesMangwa%2Freact-native-simple-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesMangwa%2Freact-native-simple-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CharlesMangwa","download_url":"https://codeload.github.com/CharlesMangwa/react-native-simple-kit/tar.gz/refs/heads/react-navigation","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250488571,"owners_count":21438809,"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":["android","apollo-client","graphql","ios","react-native","redux","starter-kit"],"created_at":"2024-10-02T13:08:54.634Z","updated_at":"2025-04-23T18:24:29.804Z","avatar_url":"https://github.com/CharlesMangwa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-simple-kit\n\n[![CircleCI](https://circleci.com/gh/CharlesMangwa/react-native-simple-kit.svg?style=shield\u0026circle-token=7207fcf84efb2248759b3c51536c57a61d074712)](https://circleci.com/gh/CharlesMangwa/react-native-simple-kit)\n[![Coverage Status](https://coveralls.io/repos/github/CharlesMangwa/react-native-simple-kit/badge.svg?branch=react-navigation)](https://coveralls.io/github/CharlesMangwa/react-native-simple-kit?branch=react-navigation)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![License MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://img.shields.io/badge/License-MIT-brightgreen.svg)\n[![GitHub package version](https://img.shields.io/badge/version-1.1.0-blue.svg)]()\n[![Code style: Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![RNSK branch: react-navigation](https://img.shields.io/badge/ℹ_RNSK-react--navigation-7020f5.svg)]()\n\n`react-native-simple-kit` is a starter boilerplate for mobile apps using React Native, Redux and a bunch of other cool tools. This starter is compatible with both iOS and Android out of the box, and provides both JS \u0026 native-based navigation solutions! 🤙\n\n## Introduction\n\nRNSK currently provides 3 different navigation libraries: [React Router Navigation](https://github.com/LeoLeBras/react-router-navigation), [React Navigation](https://github.com/react-navigation/react-navigation) \u0026 [React Native Navigation](https://wix.github.io/react-native-navigation/v2/). The reason behind this is that they are respectively a JavaScript and a native-based solution. They all have pros \u0026 cons so you'll have to pick the one you like the most.\n\nThe 1st JavaScript library (on [master](https://github.com/CharlesMangwa/react-native-simple-kit/tree/master/)), has a way more flexible API and it's easier to grasp; while the native one (on [native-navigation](https://github.com/CharlesMangwa/react-native-simple-kit/tree/native-navigation/) branch) is a little bit more cumbersome to use, but offers a better navigation experience to your end consumer.\n\nYou have the [react-navigation-graphql](https://github.com/CharlesMangwa/react-native-simple-kit/tree/react-navigation-navigation/) branch that implements the 3rd navigation library, React Navigation, coupled with [GraphQL](https://graphql.org/) through [Apollo Client](https://www.apollographql.com/docs/react/). And last but not least, this current branch where you still have React Navigation, but without GraphQL.\n\n## Requirements\n\n- [Node](https://nodejs.org) `8` or newer\n- [React Native CLI](http://facebook.github.io/react-native/docs/getting-started.html) for development\n- [Xcode](https://developer.apple.com/xcode/) `9.3` or newer for iOS development\n- [Android Studio](https://developer.android.com/studio/index.html) `3.0` or newer for Android development\n- [Android SDK](https://developer.android.com/sdk/) `25` for Android development\n- [Android](https://www.android.com/) `7.0` or newer on your Android device to test properly\n- [ESLint](http://eslint.org/) `4.11.0` or newer to lint your code on fly\n- [flow-typed](https://github.com/flow-typed/flow-typed/) `2.5.0` or newer to add/create third-party libraries interface definitions.\n\nSee [React Native's Getting Started](https://facebook.github.io/react-native/docs/getting-started.html) to install requirement tools.\n\n## Stack\n\n- [React Native](https://facebook.github.io/react-native/) `0.55.4` for building native apps using React\n- [Redux](http://redux.js.org/) `4.0.0` a predictable state container for JavaScript apps\n- [Babel](http://babeljs.io/) `6.x.x` for ES6+ support\n- [React Navigation](https://github.com/react-navigation/react-navigation) `2.5.2`, for routing and navigation\n- [Flow](http://flowtype.org/) `0.75.0` a static type checker for JavaScript\n- [Jest](https://facebook.github.io/jest/) `23.1.0` delightful JavaScript testing\n\n## Make the magic happen\n\nJust clone the repo and start (assuming you're using [Yarn](https://yarnpkg.com)):\n\n```shell\n$ git clone https://github.com/CharlesMangwa/react-native-simple-kit.git myAwesomeApp\n$ cd myAwesomeApp\n$ git checkout react-navigation\n$ yarn\n$ yarn start\n```\n\n## Build app\n\n### iOS\n\nYou can use Xcode directly to build your app and get the `.IPA` or send it to iTunesConnect.\n\n### Android\n\nYoou need to follow the steps listed [here](https://facebook.github.io/react-native/docs/signed-apk-android) and then run this command fromthe root:\n\n```shell\n$ cd android \u0026\u0026 ./gradlew assembleRelease --stacktrace\n```\n\n## Motivations\n\nThere are mainly 2 reasons why this project exists. One of them is: **evolution**. I've been using React Native since `v0.5` back in mid-2014, and my conception of the \"best\" project structure has always been evolving.\n\nThat's why from one project to another, I used to copy/paste the whole previous project, remove all the business logic, and then use it as my starter. Then another project. More modifications. Copy/paste. Start all over again. As you can understand: I really needed something that I can just fork, use for a project, modify at the root when needed, and...that's it! No need to waste my time removing project specific code, and I'll still have what I consider as a good starter kit.\n\nThat was the first reason. The second one is just: **community**. I think there are some people out there who probably feel the same need. So enjoy!\n\n## Project structure\n\nThis project structure is by no means \"**THE**\" perfect project structure. It's just the one which is currently making more sense to me than any other else, after several tries. Long story short: I divide my apps by scenes, subdivided into \"modules\" that can use that scene's `components` (ie: `src \u003e app \u003e Auth \u003e SignIn \u003e component`). That's it. Give it a try, you might be surprised how intuitive it could be. Anyhow: feel free to modify this structure and even send some PRs if you find a way to improve it! Btw, you'll also notice that given on the branch you're, the structure isn't always the same: I took whatever makes more sense to me given the context (mainly the navigation library used).\n\n```\n...\nsrc\n├── app\n│   └── xxx\n│        ├── xxx\n│        │   ├── components\n│        │   │   └──  xxx\n│        │   │        ├── index.js\n│        │   │        └── styles.js\n│        │   ├── connect.js\n│        │   ├── index.js\n│        │   └── styles.js\n│        ├── connect.js\n│        ├── index.js\n│        └── styles.js\n├── config\n│   └── index.js\n├── helpers\n│   └── xxx\n│       └── index.js\n├── navigation\n│   ├── xxx.js\n│   └── index.js\n├── redux\n│   ├── modules\n│   │   └── xxx\n│   │       ├── index.js\n│   │       └── types.js\n│   ├── actions.js\n│   ├── index.js\n│   └── reducers.js\n├── shared\n│   ├── assets\n│   ├── components\n│   └── theme\n├── types\n│   └── index.js\n└── index.js\n...\n```\n\n## Components\n\n`react-native-simple-kit` (RNSK) comes with a bunch of components, ready to use right out the box! You can have fun with:\n\n- [`🔘 \u003cButton /\u003e`](https://github.com/CharlesMangwa/react-native-simple-kit/tree/react-navigation/src/shared/components/Button)\n- [`📱 \u003cDevice /\u003e`](https://github.com/CharlesMangwa/react-native-simple-kit/tree/react-navigation/src/shared/components/Device)\n- [`💠 \u003cIcon /\u003e`](https://github.com/CharlesMangwa/react-native-simple-kit/tree/react-navigation/src/shared/components/Icon)\n- [`🔲 \u003cModal /\u003e`](https://github.com/CharlesMangwa/react-native-simple-kit/tree/react-navigation/src/shared/components/Modal)\n- [`✍️ \u003cTextInput /\u003e`](https://github.com/CharlesMangwa/react-native-simple-kit/tree/react-navigation/src/shared/components/TextInput)\n- [`👇 \u003cTouchable /\u003e`](https://github.com/CharlesMangwa/react-native-simple-kit/tree/react-navigation/src/shared/components/Touchable)\n\nMake sure to check their individual documentation if you want to see more: [`/src/shared/components`](https://github.com/CharlesMangwa/react-native-simple-kit/tree/react-navigation/src/shared/components).\n\n## Helpers\n\nJust like the components, you also have a bunch of helpers that can be useful to you as a React Native developer. You have access to:\n\n- [`🎨 Colors (rgba)`](https://github.com/CharlesMangwa/react-native-simple-kit/tree/react-navigation/src/helpers/colors)\n- [`💠 Icon`](https://github.com/CharlesMangwa/react-native-simple-kit/tree/react-navigation/src/helpers/icon)\n- [`🔗 Linking (call, email, openURL, share, startNavigation)`](https://github.com/CharlesMangwa/react-native-simple-kit/tree/react-navigation/src/helpers/linking)\n- [`📱 Responsive (mq, rem, vh, vw)`](https://github.com/CharlesMangwa/react-native-simple-kit/tree/react-navigation/src/helpers/responsive)\n\nMake sure to check their individual documentation if you want to see more: [`/src/helpers`](https://github.com/CharlesMangwa/react-native-simple-kit/tree/react-navigation/src/helpers).\n\n## Tests\n\nTests have been split into several tools \u0026 steps. Basically, with RNSK you'll deal with:\n\n- **Prettier/ESLint**, which makes sure that you keep the same code formatting inside the app\n- **Flow**, which enables static type checking in your JavaScript\n- **Jest**, which runs your unit tests\n\nThey all constitute the backbone of the command ran before each commit:\n\n```shell\n$ lint-staged \u0026\u0026 yarn lint \u0026\u0026 yarn flow \u0026\u0026 yarn jest\n```\n\nThis is run by [CircleCI 2.0](https://circleci.com/gh/CharlesMangwa/react-native-simple-kit) to make sure that we keep everything clean \u0026 harmonious: ![CircleCI](https://circleci.com/gh/CharlesMangwa/react-native-simple-kit.svg?style=shield\u0026circle-token=7207fcf84efb2248759b3c51536c57a61d074712). So let's break it down piece by piece.\n\n### Prettier\n\n_This config lives inside `.prettierrc`_\n\n```shell\n$ prettier --config .prettierrc --parser flow --write \\\"*.js\\\"\n```\n\nBased on the ESlint \u0026 its own config, Prettier will be running on every single `.js` \u0026 `.jsx` file inside the codebase in order to format your code.\n\n### ESLint\n\n_This config lives inside `.eslintrc`_\n\n```shell\n$ eslint . --fix\n```\n\nThe lint rules are based on **Airbnb, Flow \u0026 React configs**, plus some custom tweaks. The purpose of this tool is to keep a constant style in the codebase. Make sure to keep it in the green, and watch out while using [Prettier](https://github.com/prettier/prettier): it may bring unforeseen changes.\n\n### Flow\n\n_This config lives inside `.flowconfig`_\n\n```shell\n$ flow --show-all-errors\n```\n\nFlow is used to type check our JavaScript statically, make sure to use the same version as React Native!\n\n⚠️ Each time you add a new library to the project, don't forget to add its interface definitions if they exist (check here) like this: `flow-typed install foo@1.2.3` or just create it if they don't as follow: `flow-typed create-stub foo`.\n\n##### Use\n\nThe idea is: whenever you use a function, a module, a class, etc, you have to type both its input and output. For instance:\n\n```jsx\n/* @flow */\n\nimport React, { Component } from 'react'\nimport { View, Text } from 'react-native'\n\nimport type { Navigation } from '@types'\n\ntype Status = boolean\n\ntype Component = {\n  onPress: Function,\n  status: Status,\n}\n\ntype Props = {\n  navigation: Navigation,\n}\n\ntype State = {\n  isMounted: Status,\n}\n\nconst MyComponent = ({ onPress, status }: Component): React$Element\u003c*\u003e =\u003e (\n  \u003cView\u003e\n    \u003cText\u003e{`MyClass is mounted: ${ownProps.status}`}\u003c/Text\u003e\n    \u003cText onPress={onPress}\u003eGo to settings\u003c/Text\u003e\n  \u003c/View\u003e\n)\n\nexport class MyClass extends Component\u003cProps, State\u003e {\n  state: State = {\n    isMounted: false,\n  }\n\n  componentDidMount() {\n    this.setState(state =\u003e ({ isMounted: !state.isMounted }))\n  }\n\n  render() {\n    const { navigation } = this.props\n    const { isMounted } = this.state\n    return (\n      \u003cMyComponent\n        status={this.state.isMounted}\n        onPress={() =\u003e navigation.navigate('Settings')}\n      /\u003e\n    )\n  }\n}\n```\n\nI personally use these 3 tools to keep my code clean, homogeneous, (sometimes 😅) performant and kinda organized. Obviously, this is just a starter kit: it's up to you to make any changes you'd like!\n\n### Jest\n\n_The tests live inside `/__tests__` \u0026 the config in `package.json`_\n\n```shell\n$ jest --verbose\n```\n\nRNSK uses Jest to manage unit testing inside the project. The goal is to test at least all the helpers functions \u0026 generic components. Make sure to always update your snapshots before pushing your work to the CI runner!\n\n##### Continuous Integration (CI)\n\n_This config lives inside `.circleci/config.yml`_\n\n```shell\n$ jest --verbose --coverage \u0026\u0026 cat ./__tests__/__coverage__/lcov.info  | ./node_modules/coveralls/bin/coveralls.js\n```\n\nThis whole test suite is implemented inside CircleCI 2.0 as mentioned earlier. A new job is run in the pipeline after each commit. The output of the latest job is displayed at the top of the current README and lets you know if it `passed` or `failed`. No need to say that the goal is to keep it ✅!\n\nMoreover, RNSK uses `jest --verbose --coverage` output to generate a code coverage report that you can use with tools like [Coveralls.io](htps://coveralls.io). Then, we can get a badge which shows our coverage status: [![Coverage Status](https://coveralls.io/repos/github/CharlesMangwa/react-native-simple-kit/badge.svg?branch=react-navigation)](https://coveralls.io/github/CharlesMangwa/react-native-simple-kit?branch=react-navigation).\nPretty cool, heh?\n\n## Use\n\nFrom this point, it's up to you! This is the part where I stop writing and let you explore \u0026 have some fun 👍\n\n## Questions\n\nIf you have any questions, feel free to get in touch on Twitter [@Charles_Mangwa](https://twitter.com/Charles_Mangwa)!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharlesmangwa%2Freact-native-simple-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcharlesmangwa%2Freact-native-simple-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharlesmangwa%2Freact-native-simple-kit/lists"}