How I set up my React Native Projects
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.
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.
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.
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
I’ve written a whole article on Fastlane for React Native which although a bit dated is still mostly relevant.
Microsoft Mobile Center is a noteworthy alternative for Continuous Deployment (and a lot more) that I will be trying out in future.
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.
Redux
When it comes to state management I choose Redux. 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.
To minimise the negative impact of side effects I also like to use Redux-Saga.
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.
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
React Native Elements
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.
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.
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.
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.
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!
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.
That’s it! I’d love to hear other peoples thoughts and what you use when starting a new React Native projects.
My name is Dave Hudson, I’m a product building UX pedant who leads development teams & also writes code.
A Certified Scrum Master, I enjoy facilitating the creation of environments that allow developers to actually code and when coding myself I specialise in writing clean, tested Javascript in React & React Native.
I consult under Applification Ltd and I’m available for all things React, agile and product development!
