Futurice React Native Starter Kit
We 💚 building apps with React Native, because it helps us create high quality products for both major mobile platforms quickly and cost-effectively.
Getting started on a new app just takes too damn long, though. Most apps need the same basic building blocks and developer infrastructure, and we are bored of reinventing the wheel time and time again.
This Starter Kit reflects the best practices of React Native development we have discovered while building real-world applications for our customers. It is opinionated about tooling, patterns and development practices. It might not be a one-size-fits-all solution for everyone, but feel free to customize it for your needs, or just take inspiration from it.
React Native Starter Kit is a part of Pepperoni, a framework for kickstarting digital product development.
Contents
Not all of the below is yet fully implemented
Application Blueprint
- Always up-to-date React Native scaffolding
- Modular and well-documented structure for application code
- Redux and ImmutableJS for safe and Reasonaboutable™️ state management
- Redux Loop for Elm-style controlled side effects
- Redux-managed Navigators for Stack-based and Tabbed navigation with NavigationExperimental
- Disk-persisted application state caching for offline support and snappy startup performance
⚠️ Sample app to show how to wire it all together⚠️ Clean and testable service layer for interacting with RESTful APIs- ⭐ JSON Web Token authentication
- ⭐ Multi-environment configuration (dev, staging, production) for iOS and Android
- ⭐ Built-in error handling and customizable error screens
Testing Setup
- Mocha for unit testing application code
- Enzyme and fully mocked React Native for unit testing UI components
- Istanbul code coverage
- Utilities for end-to-end integration testing Redux state, including side effects and asynchronous actions
Development & Deployment Infrastructure
- Auth0 for ready-to-use login and signup screens, user authentication and identity management
- Bitrise.io configurations for Continuous Integration and beta app distribution
⚠️ Google Tag Manager analytics- ⭐ Microsoft Code Push for Continuous Deployment and instant app updates
Roadmap
- TODO Crash reporting
- TODO Android and iOS UI Testing with Calaba.sh?
- TODO Feature flags?
Getting started
To build your own app on top of the Starter Kit, fork or mirror this repository. Because you can't rename a fork, for serious use we recommend mirroring using these instructions. To contribute to Starter Kit development or just playing around, forking is the way to go.
Once you have the code downloaded, follow the Setup guide to get started.
Development workflow
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.
To learn how to structure your application and use the Redux application architecture, read the Architecture guide for more details.
Start the application in iOS simulator
$ react-native run-ios
Start the application in Android simulator
(If using the stock emulator, the emulator must be running)
$ react-native run-android
Run unit tests
$ npm test
Run tests every time code changes
$ npm run test:watch
Read the Testing guide for more information about writing tests.
Deployment
Read the Deployment guide to learn how to deploy the application to test devices, app stores, and how to use Code Push to push updates to your users immediately.
Contributing
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.
License
Credits
This project was initially motivated by Snowflake, a React Native boilerplate by Barton Hammond. It shares some features and design principles for Pepperoni, but it wasn't the right fit for our needs. At this time Snowflake is more mature, so if you like Pepperoni but didn't agree with something we are doing, you should check it out to see if it's a good fit for your app.