My Personal Roadmap To Mastering React Native

You do not have to work in front of a computer 24/7 to be considered to be a React Native Expert - just let me instead give you few hints on how to stand out from other React Native developers in long term.

Always use your (unique) background

I came to React Native as former Java and ReactJS engineer. Yes, knowledge of React for web played some role, but thanks to a being Java developer for several years, I had the chance to learn more about LDAP (Active Directory), Keycloak / OpenID, Spring, and its @auto-configuration, HTTP protocol internals, Security, RESTful APIs, system architecture (e.g CQRS) and AWS.

When building a mobile app, always think about the overall solution, instead of being narrow-minded on your mobile app. Always take your background as an advantage - you may come from the art industry, etc - just think about how you can use your unique background.

Spend more time reading tech books

When learning something new in tech, I recommend you to ignore all that noise coming from Facebook, Twitter, Reddit, or social media. Instead, download 2 or 3 technical books about React Native (or topic you want to learn about). The oreilly.com or packtpub.com are quite reliable choices for buying tech books - then just read them from A-Z. Yes, it's that simple.

You will gain A WAY MORE knowledge by doing that than by being another consumer of social media content (that is often re-cycled and created to promote something) you MUST BUY. Trust me, if you want to buy something, buy more tech books from proven publishers than from Gumroad.

I understand, spending time reading books is not as revolutionary as tweeting few lines of code on Twitter, but you will learn a LOT, LOT more.

React Native Basics

Read and learn the architecture of React-Native Apps. You should teach yourself about the Core components of React Native (View, ListView, Image, ScrollView, Dimensions, Text, Touchable, Modal, WebView, Vibration, StatusBar) and their most used props (no need to remembering everything). Also, you should know how to pass props, children to other components, know what are pure components, high-order components, and, lately, hooks.

And last but not least, you should read a lot about styling in RN (also here) and the Flexbox because the design is the thing that sells in 2021 (more about it later).

Know your tooling

You should know what is metro/packager, RN bridge (may soon disappear), watchman, npm, JS Core.

With writing code, you may need to debug your app, using either default Chrome Developer Tools or by accessing system logs (either with Logcat or XCode console) or by using things like Flipper, Reactotron, etc.

TIP: When debugging React Native apps and having problems (Realm was well-known thanks to this for a long time), sometimes the quickest way to solve it, is to run Chrome without security (you can find a lot of examples on the internet for that).

Spend time modeling the Redux States on board

Great docs or book should explain why you may need data-management libraries (like Redux, Mobx, easy-peasy), their React bindings, how to use them properly (state denormalization), and explain when you would not need any of them - yes, as a future React Native expert, you should know, that you do not always need Redux or state-management library (but overall, in many situations it is desirable).

When learning a new state-management library, you should think about handling side-effects (e.g. with Redux Saga or Redux-Thunk).

If you need a database (as working with db is often handled in side effects), you should have a brief overview of a few available possibilities just to identify which one fits your needs better (e.g. Realm for encryption, Firebase Firestore for real-time syncing, DynamoDB,  SQLite,  etc.).

Navigation

You should gain brief knowledge about navigation libraries (React Navigation) and navigation-core components (e.g. StackNavigator, DrawerNavigator, Tabs-like navigation, Switch Navigators).

If you want to develop custom app navigation, gestures and pan-gesture-handler are terms you would Google.

Continue With Native Module and Native Components

For native-platform-oriented projects, you may need to know how to write RN custom modules (platform-dependent code) using different coding styles (callbacks, promises, or event-emitting). With custom modules, you should know how to use branching to separate platform-specific code into “.ios” / “.android” files.

They are not all as straightforward as e.g. vibrating an Android device or displaying an Android toast popup: some 3-rd party libraries require you to have knowledge about the lifecycle of Android apps, and their's internals (activities, intents, broadcast listeners, async tasks, services). By having some knowledge about these things, you could integrate almost any library into React Native (so you do not need to wait until somebody else develops and publishes it).

There are also native UI components - and yes, you can "embed" them into React Native.

Do you think it is hard? Well, to stand out from others, you must do things that LOOK hard - and believe me, integrating native android fragments (example in my other blog post), or native objective-C views only looks hard for the FIRST TIME.

If you are targeting platform-dependent solutions, you will need to learn also basics(?) of native-development languages like Objective C, Swift, Kotlin, or Java.

Just a note - integrating 3rd party libraries requires you to read, study and understand code that other people wrote. It's not that hard - just develop a plan and start executing it step by step.

Also, JSI modules are coming into React Native, so yes, some C++ knowledge will be probably necessary, too.

Try to publish your first NPM package and learn about Pods

Many enterprises use in-house, private npm repositories, so you should know how semantic versioning works, how to structure npm packages and how to create one.

If you want to go one step above that, develop and publish a custom Cocoa pod (I dare to say, that a very small % of RN developers could do that).

Learn how to patch NPM packages / fix bugs in open-source

You can fix bugs in React Native libraries either by forking them, or by using a library called patch-package that allows you to share changes in node modules with your team.

Learn Mobile Design, and  how UX and UI work

To be an expert in the mobile development world, knowledge of basic principles of UX and UI is a must. And how do you gain this knowledge?

Yes, again. Start with reading books. I can recommend this:

If you do not have much time to develop the next MVP, and your team is missing UX person, take an inspiration from dribble.com or behance.com and use their search for keywords you are interested in (medical app, coffee app, etc).

However, be aware, that not all published design at Dribble or Behance (and even from some graphic studios) is good and usable, no matter how pretty it looks. And remember, even designers make mistakes. Always think about accessibility and simplicity.

Learn to work with designers tools

If you / your team does not have a UX person, open Figma, or Sketch and try to develop mobile design by yourself. By mastering this, the overall quality of the app would be on a much, much higher level than you would deliver by starting using a well-known and often-practiced approach called "coding-first". Creating reusable components in Figma gives you another thing: UX / UI consistency (buttons have the same font, same colors are used across the screens, etc.) and makes you think about how the app should work (it is far easier and faster now, as later when you will need to re-write some code).

Learn how to export SVGs from design tools, so you would know what to do when your company would hire a graphic studio to develop a custom app design (just a note: as the prices for a mobile design reach several thousand, it is not always recommended for smallest startups).

If you have resources, always do UX research (take a small group of people who will be your future users, and make them use your clickable prototype of a mobile app created with design tools) and then make decisions based on data, not emotions or feelings (either yours or those coming from your boss or boss of your boss in your company).

DRY (Do not repeat yourself): Build design system w/ Storybook

React (and React Native) is a component-driven framework. You should build re-usable components and Storybook is a great tool for that. Moreover, you can easily distribute work across your team, as a Storybook components are developed completely isolated from business logic.

Easier maintenance, better UI consistency, work distributed across the team. Still not using Storybook?

Incorporate and learn about analytics

Launching mobile apps into production without analytics would be considered as a huge faux-pas.

So if you are serious about building apps with React Native and pushing them to production, you should also learn about how to collect analytics and so-called "crashlytics" data (stack traces from crashes, both from JS and native side). Firebase Analytics and Crashlytics are pretty solid tools, Sentry is another tool I could recommend.

Animations

I recommend you to not spend too much time developing heart-touching animations in React Native - they are not so appreciated by users. If you are building MVP, build a product that sells first, has a stable release process (things are not breaking with each new release) and then add a few, minor animations - the easiest way is to use a Lottie (animations delivered in .json).

AGAIN, build MVP that sells itself first - then play with animations. And remember, that you also need to invest in marketing and promoting your app.

Mobile App Localization

If you plan to expand across several countries, you would probably need to add more language variants to your app.

You could use several strategies for that:

• set app localization based on device language
• allow customizing language in the app (with no relation to the device language)

Google Translate (as a cloud service that can translate JSON files), i18n-js, and moment (even when deprecated) are choices that never disappoint.

Just remember, that translations from Google Translate are not always 100% correct.

Code Obfuscation, App Decompiling,  Cert Pinning

If you will push the app into production, Proguard will become your friend too. To see what the decompiled React Native / Android app source code would look like,  you could use this APKLab VSCode extension.

Certificate pinning is also common for mobile apps: (in short, you take the hash of the SSL certificate from the domain your app makes HTTP requests to, and put them into the mobile app).

Performance Optimization: RAM bundles, and Hermes

When working on a bigger project, you have 2 choices in general to improve React Native performance: turn Hermes on or use RAM bundling.

NOTE: As some libraries rely on JSCore internals - e.g. Realm and libraries for localizations  - it is not always possible to turn Hermes on.

I also recommend you to monitor your React Native app performance continuously, in CI / continuous delivery process. How to do that exactly and more details about CI for React Native, you can read in my other blog posts here on stefan-majiros.com.

So CI (build process w/ app signing) is another thing of which you should have a brief overview - how it works, and how it could be customized if needed.

Shell-scripting

One of the biggest pains for React Native developers could be shell/bash scripting Wonderful thing is, that with each shell script written by you, you are gaining more and more knowledge in the shell - and having basics(!) of shell-scripting never killed anybody - especially when you want/need to build world-class build pipelines or modify parts of your app in the build process.

Working with Google Play and Apple Store

This is also related to the CI process, but having your own developer account for Google Play Console and Apple Store - as typically, company accounts are often restricted - gives you the ability to gain a competitive advantage against other developers.

In-App Purchases

And it also allows you to experiment with features that deliver company money called In-App purchases.

As you could notice, there is a growing pressure on Google and Apple to reduce their fees - so my guess is that we can see more apps to be built that will sell some kind of digital items.

Jest and framework for E2E testing

Some companies have a Q/A process, some do not. Regardless of that, writing meaningful unit tests w/ Jest and developing E2E tests for the core functionality of your app would save you a lot of angry customers, negative reviews in the stores, and embarrassing moments for your company.

Appium, Detox, or Cavy are all proven E2E testing frameworks for React Native (just spend some time learning about the capabilities of each one).