Building apps with React Native is great, because it helps create high quality products for both major mobile platforms quickly and cost-effectively.
Getting started on a new app just takes too long, though. Most apps need the same basic building blocks and developer infrastructure, and most of us are bored of reinventing the wheel time and time again.
Sounds good and you just want to see how it works? Here is a quick start guide:
git clone git@github.com:KalebPortillo/react-native-boilerplate.git
cd react-native-boilerplate
yarn install
yarn run ios
For further setup instructions please see our Getting Started section.
- Always up-to-date React Native scaffolding
- Modular and well-documented structure for application code
- Redux with Ducks proposal for state management
- Reselect for compute devided data
- React Navigation for awesome navigation with 60fps transitions
- Redux Persist Disk-persisted application state caching for offline support and snappy startup performance
- Sample app to show how to wire it all together
- React Native Config Multi-environment configuration (dev, staging, production) for iOS and Android
- Automagically update project version in both Android and iOS when running npm version command
- Prettier for consistant code format
- Custom splash screen ready, just change the image asset
- Jest for unit testing application code and providing coverage information.
- Enzyme and fully mocked React Native for unit testing UI components
- Utilities for end-to-end integration testing Redux state, including side effects and asynchronous actions
To build your own app on top of the Boilerplate, fork or mirror this repository. For serious use we recommend mirroring using these instructions, since you can't make a fork of a public repository private on GitHub. To contribute to Boilerplate development or just playing around, forking is the way to go.
First, give your application a name by running ./support/rename.sh YourAppName.
If you dont't want to rename de package name by hand, you can use react-native-rename
Of course, you will need node, npm, yarn(prefereb), Android Studio, Xcode, React Native CLI, and all these basic stuff setup in your machine
After you have set up the project using above instructions, you can use your favorite IDE or text editor to write code, and run the application from the command line. Turn on React Native hot module reloading in the app developer menu to update your application as you code.
$ yarn ios
(If using the stock emulator, the emulator must be running)
$ yarn android
$ yarn test
$ yarn test:watch
$ yarn coverage
$ yarn version
For more awesome yarn commands, refer to package.json scripts section
For standard debugging select Debug JS Remotely from the React Native Development context menu (To open the context menu, press CMD+D in iOS or D+D in Android). This will open a new Chrome tab under http://localhost:8081/debugger-ui and prints all actions to the console.
For advanced debugging under macOS we suggest using the standalone React Native Debugger, which is based on the official debugger of React Native. It includes the React Inspector and Redux DevTools so you can inspect React views and get a detailed history of the Redux state.
You can install it via brew and run it as a standalone app:
$ brew update && brew cask install react-native-debugger
Note: Make sure you close all active chrome debugger tabs and then restart the debugger from the React Native Development context menu.
If you find any problems, please open an issue or submit a fix as a pull request.
We welcome new features, but for large changes let's discuss first to make sure the changes can be accepted and integrated smoothly.
This project was based and motivated by Pepperoni and Ignite, React Native boilerplates by Futurice and InfiniteRed, respectively