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, opens in a new tab
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud…, opens in a new tabcode.visualstudio.com, opens in a new tab
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, opens in a new tab
Extension for Visual Studio Code — VS Code plugin for prettier/prettier, opens in a new tabmarketplace.visualstudio.com, opens in a new tab
Create React Native App
I kick-off every React Native project using Create React Native App, opens in a new tab. I know a lot of people use Expo, opens in a new tab 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, opens in a new tab
create-react-native-app - Create a React Native app on any OS with no build , opens in a new tab**config., opens in a new tabgithub.com, opens in a new tab
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, opens in a new tab
fastlane is the tool to release your iOS and Android app 🚀 It handles all tedious tasks, like generating screenshots…, opens in a new tabfastlane.tools, opens in a new tab
I’ve written a whole article on Fastlane for React Native, opens in a new tab which although a bit dated is still mostly relevant.
fastlane for React Native iOS & Android app DevOps, opens in a new tab
TLDR => Having lost 2 days down numerous rabbit holes getting a continuous deployment pipeline working for React Native…, opens in a new tabmedium.com, opens in a new tab
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, opens in a new tab
Visual Studio Mobile Center PREVIEW Visual Studio Mobile Center is mission control for your mobile apps Bring your apps…, opens in a new tabwww.visualstudio.com, opens in a new tab
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, opens in a new tab
react-native-google-analytics-bridge - React Native bridge to the Google Analytics libraries on both iOS and , opens in a new tab**Android., opens in a new tabgithub.com, opens in a new tab
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, opens in a new tab or Apollo with GraphQL, opens in a new tab 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, opens in a new tab
If you're coming from Flux, there is a single important difference you need to understand. Redux doesn't have a…, opens in a new tabredux.js.org, opens in a new tab
To minimise the negative impact of side effects I also like to use Redux-Saga.
redux-saga/redux-saga, opens in a new tab
redux-saga - An alternative side effect model for Redux , opens in a new tab**apps, opens in a new tabgithub.com, opens in a new tab
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, opens in a new tab
reactotron — A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and , opens in a new tab**Windows., opens in a new tabgithub.com, opens in a new tab
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, opens in a new tab
NativeBase is an open source framework to build React Native apps over a single JavaScript codebase for Android and , opens in a new tab**iOS, opens in a new tabnativebase.io, opens in a new tab
React Native Elements
react-native-training/react-native-elements, opens in a new tab
react-native-elements - Cross Platform React Native UI , opens in a new tab**Toolkit, opens in a new tabgithub.com, opens in a new tab
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, opens in a new tab 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, opens in a new tab
storybook - 📓 Interactive development & testing environment for React and React-Native UI , opens in a new tab**components, opens in a new tabgithub.com, opens in a new tab
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, opens in a new tab
Extension for Visual Studio Code - Show your React Native Storybooks inline in VS , opens in a new tab**Code, opens in a new tabmarketplace.visualstudio.com, opens in a new tab
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, opens in a new tab
Extension for Visual Studio Code - Helpful tools for snapshot , opens in a new tab**testing, opens in a new tabmarketplace.visualstudio.com, opens in a new tab
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, opens in a new tab
detox — Gray Box E2E Tests and Automation Library for Mobile , opens in a new tab**Apps, opens in a new tabgithub.com, opens in a new tab
Navigation
Coming from an Appcelerator Titanium, opens in a new tab 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, opens in a new tab
Edit , opens in a new tab**description, opens in a new tabreactnavigation.org, opens in a new tab
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, opens in a new tab
Native Directory is a curated list of React Native libraries to help you build your , opens in a new tab**projects., opens in a new tabnative.directory, opens in a new tab