📱 Starting a new React-Native app?

After having built many mobile apps, especially with react native, I've noticed some of the following patterns emerge and they hinder productivity and maintenance if not implemented.

Table of Contents

🧱 Abstractions
🌗 Theming
🌍 Internationalisation (i18n)
🧪 Testing

🧱 Abstractions

React is naturally modular. Take advantage of that. Do not build components that are 300 lines long. React lends itself very well to the idea of ATOMIC* design. Build smaller components and compose them together to what will eventually be a screen/page.

Our low level components generally consists of base components and are generally pretty flexible (i.e. buttons, inputs, typography, icons, etc). React Native provides most of these, however they should never be used outside of our UI components.

Once we have our building blocks wrapped and in place, starting composing them together and limit the props that are made available. This both reduces cognitive load and the ease of testing. The more props you expose, the more a developer has to think about what to provide and generally leads to either bugs or inconsistencies within the app.

Pro tip- this methodology works with every thing we do in React Native. Instead of using a library directly in all your files, abstract it away to your own wrapper. It helps when you're changing providers. i.e. storage, auth, analytics, logs, etc

ATOMIC design is atoms, molecules, organisms, templates, and pages concurrently working together to create effective interface design systems.

🌗 Theming

Having a theme in place from early on is highly beneficial. I'm not talking about having a full blown theme, more along the lines of color palette, font family, spacing, etc.

It helps having a designer in place here, but you could use some good defaults and change them as you progress.

Your theme should use semantic naming for colors (i.e. primary100, border, background). Your color palette, which should not be exposed outside of your theme will consist of names like green100, green80, etc.

🌍 Internationalisation (i18n)

Likely the most trivial on this list, is using an i18n library as soon as possible. With minimal setup, the benefits far outweigh the initial effort, especially when the inevitable "we need to support additional locales" conversation starts.

You might argue that you'll not need to support localisation (l10n) ever, however we still benefit from having all our "magic strings" in a single location. Which means it is easy to find and easy to modify. How convenient is that?

🧪 Testing

"Ahhh. Testing. We don't have time. We need to push new features." Is what most of us have experienced at least once in our careers, if not more often. As with comments, if we write tests, we'll need to maintain both the code and the tests.

Start simple and build on them over time. Ensure your components have TestID's set. You'll not necessarily write tests to use them, but they'll be there and ready to be picked up by whomever when the time arises for automated testing.

These are some of my React Native quality of life improvements. Using these tips will make your future-selves extremely happy!

As always, #KeepHavingFun