🚀 Get started with React Native and Redux with no effort!
MIT License
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 & native-based navigation solutions!
RNSK currently provides 3 different navigation libraries: React Router Navigation, React Navigation & React Native Navigation. The reason behind this is that they are respectively a JavaScript and a native-based solution. They all have pros & cons so you'll have to pick the one you like the most.
The 1st JavaScript library (on master), has a way more flexible API and it's easier to grasp; while the native one (on native-navigation branch) is a little bit more cumbersome to use, but offers a better navigation experience to your end consumer.
You have the react-navigation-graphql branch that implements the 3rd navigation library, React Navigation, coupled with GraphQL through Apollo Client. And last but not least, this current branch where you still have React Navigation, but without GraphQL.
8
or newer9.3
or newer for iOS development3.0
or newer for Android development25
for Android development7.0
or newer on your Android device to test properly4.11.0
or newer to lint your code on fly2.5.0
or newer to add/create third-party libraries interface definitions.See React Native's Getting Started to install requirement tools.
0.55.4
for building native apps using React4.0.0
a predictable state container for JavaScript apps6.x.x
for ES6+ support2.5.2
, for routing and navigation0.75.0
a static type checker for JavaScript23.1.0
delightful JavaScript testingJust clone the repo and start (assuming you're using Yarn):
$ git clone https://github.com/CharlesMangwa/react-native-simple-kit.git myAwesomeApp
$ cd myAwesomeApp
$ git checkout react-navigation
$ yarn
$ yarn start
You can use Xcode directly to build your app and get the .IPA
or send it to iTunesConnect.
Yoou need to follow the steps listed here and then run this command fromthe root:
$ cd android && ./gradlew assembleRelease --stacktrace
There 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.
That'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.
That 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!
This 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 > app > Auth > SignIn > 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).
...
src
app
xxx
xxx
components
xxx
index.js
styles.js
connect.js
index.js
styles.js
connect.js
index.js
styles.js
config
index.js
helpers
xxx
index.js
navigation
xxx.js
index.js
redux
modules
xxx
index.js
types.js
actions.js
index.js
reducers.js
shared
assets
components
theme
types
index.js
index.js
...
react-native-simple-kit
(RNSK) comes with a bunch of components, ready to use right out the box! You can have fun with:
Make sure to check their individual documentation if you want to see more: /src/shared/components
.
Just 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:
Colors (rgba)
Icon
Linking (call, email, openURL, share, startNavigation)
Responsive (mq, rem, vh, vw)
Make sure to check their individual documentation if you want to see more: /src/helpers
.
Tests have been split into several tools & steps. Basically, with RNSK you'll deal with:
They all constitute the backbone of the command ran before each commit:
$ lint-staged && yarn lint && yarn flow && yarn jest
This is run by CircleCI 2.0 to make sure that we keep everything clean & harmonious: . So let's break it down piece by piece.
This config lives inside .prettierrc
$ prettier --config .prettierrc --parser flow --write \"*.js\"
Based on the ESlint & its own config, Prettier will be running on every single .js
& .jsx
file inside the codebase in order to format your code.
This config lives inside .eslintrc
$ eslint . --fix
The lint rules are based on Airbnb, Flow & 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: it may bring unforeseen changes.
This config lives inside .flowconfig
$ flow --show-all-errors
Flow is used to type check our JavaScript statically, make sure to use the same version as React Native!
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 [email protected]
or just create it if they don't as follow: flow-typed create-stub foo
.
The idea is: whenever you use a function, a module, a class, etc, you have to type both its input and output. For instance:
/* @flow */
import React, { Component } from 'react'
import { View, Text } from 'react-native'
import type { Navigation } from '@types'
type Status = boolean
type Component = {
onPress: Function,
status: Status,
}
type Props = {
navigation: Navigation,
}
type State = {
isMounted: Status,
}
const MyComponent = ({ onPress, status }: Component): React$Element<*> => (
<View>
<Text>{`MyClass is mounted: ${ownProps.status}`}</Text>
<Text onPress={onPress}>Go to settings</Text>
</View>
)
export class MyClass extends Component<Props, State> {
state: State = {
isMounted: false,
}
componentDidMount() {
this.setState(state => ({ isMounted: !state.isMounted }))
}
render() {
const { navigation } = this.props
const { isMounted } = this.state
return (
<MyComponent
status={this.state.isMounted}
onPress={() => navigation.navigate('Settings')}
/>
)
}
}
I 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!
The tests live inside /__tests__
& the config in package.json
$ jest --verbose
RNSK uses Jest to manage unit testing inside the project. The goal is to test at least all the helpers functions & generic components. Make sure to always update your snapshots before pushing your work to the CI runner!
This config lives inside .circleci/config.yml
$ jest --verbose --coverage && cat ./__tests__/__coverage__/lcov.info | ./node_modules/coveralls/bin/coveralls.js
This 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 !
Moreover, RNSK uses jest --verbose --coverage
output to generate a code coverage report that you can use with tools like Coveralls.io. Then, we can get a badge which shows our coverage status: .
Pretty cool, heh?
From this point, it's up to you! This is the part where I stop writing and let you explore & have some fun
If you have any questions, feel free to get in touch on Twitter @Charles_Mangwa!