TLDR => Having set up a number of React Native projects, learnt the quirks and pitfalls, I’ve started to settle on a stack that works for me. These are essentially the steps I take when setting up a new React Native project and the resulting app architecture.
Code Editor
First up my development environment. I used to use Atom but I’m now a complete convert to Visual Studio Code. It provides a fantastic development environment on Mac and has some incredibly useful plugins that make Javascript and React Native development a lot more fun.
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud…code.visualstudio.com
The one must install extension for me is Prettier for Javascript code formatting which I configure this with ESLint, it saves so much time and improves your code with the latest ES6 syntax.
Prettier — JavaScript formatter — Visual Studio Marketplace
Extension for Visual Studio Code — VS Code plugin for prettier/prettiermarketplace.visualstudio.com
Create React Native App
I kick-off every React Native project using Create React Native App. I know a lot of people use Expo and it is great if you want to do a spike / PoC or are new to native app development but to me Expo feels too restrictive and I prefer the freedom of choosing my own stack and making my own architectural choices.
react-community/create-react-native-app
create-react-native-app - Create a React Native app on any OS with no build **config.github.com
Fastlane
One of the first things I do is ensure my Continuous Deployment pipeline is configured correctly as I’ve found through experience that if you don’t do this upfront, you end up having pain when you least want it and you are up against a deadline.
Fastlane is a fantastic tool for continuous deployment of your native mobile apps for beta testing and app stores production deployment. At the beginning of a project you can also use it automatically create and download your:
- App Certificates
- Push Certificates
- Apple Pay Certificates
fastlane - iOS and Android Automation for Continuous Delivery
fastlane is the tool to release your iOS and Android app 🚀 It handles all tedious tasks, like generating screenshots…fastlane.tools
I’ve written a whole article on Fastlane for React Native which although a bit dated is still mostly relevant.
fastlane for React Native iOS & Android app DevOps
TLDR => Having lost 2 days down numerous rabbit holes getting a continuous deployment pipeline working for React Native…medium.com
Microsoft Mobile Center is a noteworthy alternative for Continuous Deployment (and a lot more) that I will be trying out in future.
Mobile Center | Mobile App Development | Visual Studio
Visual Studio Mobile Center PREVIEW Visual Studio Mobile Center is mission control for your mobile apps Bring your apps…www.visualstudio.com
Analytics
Always a good idea to embed analytics into your app at the start too. I use the excellent React Native Google Analytics Bridge module.
idehub/react-native-google-analytics-bridge
react-native-google-analytics-bridge - React Native bridge to the Google Analytics libraries on both iOS and **Android.github.com
Redux
When it comes to state management for mobile apps I choose Redux. In web projects I lean on URL state but in mobile apps a centralised store like Redux makes sense. I know there are many alternatives these days such as Mobx or Apollo with GraphQL and I’m keen to look into those in future but I find Redux does exactly what I want it to. I appreciate it has some extra boilerplate but I like the structure it provides to an app architecture.
Read Me · Redux
If you're coming from Flux, there is a single important difference you need to understand. Redux doesn't have a…redux.js.org
To minimise the negative impact of side effects I also like to use Redux-Saga.
redux-saga/redux-saga
redux-saga - An alternative side effect model for Redux **appsgithub.com
Reactotron
Knowing what is going on under the hood with your Redux State is critical to effective development, so it follows I’m a big fan of Reactotron. It allows me to have great insight into my Redux store state, actions, sagas, logs and more without having to have a browser tab open for debugging all the time.
infinitered/reactotron
reactotron — A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and **Windows.github.com
UI
When it comes to native mobile apps you need native UI components that are specific to each platform. Two of the best libraries I’ve found to help in this regard are:
Native Base
NativeBase | Essential cross-platform UI components for React Native
NativeBase is an open source framework to build React Native apps over a single JavaScript codebase for Android and **iOSnativebase.io
React Native Elements
react-native-training/react-native-elements
react-native-elements - Cross Platform React Native UI **Toolkitgithub.com
The final choice depends upon the specific app requirements, I’ve found both incredibly helpful in kickstarting an app and ensuring the UI stays consistent. I am selective about which elements I use though, as some I feel go beyond what I require or don’t provide the native cross platform experience I’m looking for.
I’ve also had a fair amount of pain with Native Base and breaking changes in new releases but hopefully that will settle down in future.
Storybook
I’m a huge fan of Pure UI and the concept of application UI as a pure function of application state. Putting my Scrum Master hat on it provides the ability to align the design and development process into an almost seamless flow, something I find rarely happens!
So it follows that I’m a huge fan of Storybook and the ability it provides for developing and testing React Native components.
storybooks/storybook
storybook - 📓 Interactive development & testing environment for React and React-Native UI **componentsgithub.com
As I’m using Visual Studio Code I’ve got the excellent React Native Storybook extension installed which means I once again do not have to have a browser tab open and I can switch between my React components from within my code editor.
React Native Storybook - Visual Studio Marketplace
Extension for Visual Studio Code - Show your React Native Storybooks inline in VS **Codemarketplace.visualstudio.com
The added bonus of working with the Pure UI + Storybook approach is that as your components are developed bypassing in of various props, your tests end up becoming almost exactly aligned to the Storybook components. So there is a lovely flow into the writing of tests which are completely aligned to the designed components and various states.
Jest & Snapshot Testing
To write my tests I use Jest and Snapshot testing. I like the way Snapshots allow you to write tests very quickly with a standard approach that you can re-use across tests.
To view my snapshot changes when I update my code I use the snapshot-tools extension in Visual Studio Code so I can hover over the toMatchSnapshot() function in my test code and view snapshot results inline. This provides me with a really nice feedback flow from writing failing tests and making them pass.
snapshot-tools - Visual Studio Marketplace
Extension for Visual Studio Code - Helpful tools for snapshot **testingmarketplace.visualstudio.com
Detox
Completing my testing approach is Detox which I use for end-to-end testing. Although Detox is iOS only at the moment I like the way it is going, it is incredibly easy to get started writing tests and Android support is on the way.
wix/detox
detox — Gray Box E2E Tests and Automation Library for Mobile **Appsgithub.com
Navigation
Coming from an Appcelerator Titanium background where the navigation I used was native, the options available in React Native were underwhelming. The idea of using a Javascript based navigation system, which I had seen the performance issues of doing so in Appcelerator first hand was concerning.
As it happens React Navigation has proved capable, though I’ve had a few battles with it I do now quite like it and performance in production builds is adequate if you manage your interactions properly. Still I do hope for a stable native navigation option in the future!
React Navigation
Edit **descriptionreactnavigation.org
Native Directory
Beyond this it’s pretty much all dependent on the product I’m building but my goto resource is Native Directory to find whatever I need.
Native Directory
Native Directory is a curated list of React Native libraries to help you build your **projects.native.directory