Adopting React Native as a web developer

Promising portfolio

Tesla, Discord, Uber Eats and Oculus all have one thing in common - you've guessed it - they are all built using Facebook's cross-platform library React Native.

Obviously, Facebook also use React Native but not for the entire app, rather for subdomains where it makes sense for them, for instance Marketplace as well as their Ads Manager and Analytics. Later, Instagram integrated it in their existing native app as well, starting small by rewriting their Push notification view. With between 85-99 % of code being shared between their iOS and Android apps, the team could now deliver cross-platform changes much faster. Pinterest experienced even better results, converting their native apps to React Native in about 10 days for iOS and two days for Android with 100 % shared code. Additionally, one of Pinterest's web developers stated that "Working on the web side of things, it was pretty easy to pick up".

Web developers can adapt/adopt fast

Which brings us to one of my main points; as a web (or even better: React) developer, React Native might just be the easiest way for you to enter mobile development. Don't worry about starting from scratch by learning Dart to master Flutter or brush-up your .NET to start your Xamarin journey. React Native lets you "Learn once, write anywhere.", i.e. just keep using those amazing React skills that you worked so hard for already. 🌐📲

Extending an existing React web app

If you have an existing React web app that you want to extend with native mobile platforms, look no further, as this is one of the features where React Native allows you to do some cool things. It is possible to share modules between your web app and cross-platform mobile app by using native-specific extensions. You basically extend a given modules name with .native.js to allow sharing it between your web app and React Native app.

Container.js # picked up by Webpack, Rollup or any other Web bundler
Container.native.js # picked up by the React Native bundler for both Android and iOS (Metro)

Imports work exactly as before, so that shouldn't be causing you any issues.

On a somewhat related note and to turn things upside down for a bit, there are even libraries to make your React Native code run on the web. So, if you really get the hang of it, you might even start developing for the web using React Native. Well, wasn't that a turn of events?

Anyways, back on track.

You don't have to start from scratch

As a React developer you know very well how to import third-party libraries into your app with your favourite package manager, be it NPM or Yarn. With React Native it works almost similarly, but you start your search for libraries at the React Native Directory.

Pro tip: Sort by "quality" or "recommended" to make sure you don't just grab the most recently updated library. 🥇

And as with any third-party library; consider if what you've found could be solved by you building it from scratch and not relying on somebody else to avoid breaking it in the future.

If you're out of luck in finding that specific niche library that has all the functionality you could ever dream of in the React Native Directory, then you do what you usually do as a web developer in search of some open source gold: you turn to the NPM registry where you can find many libraries also compatible with React Native.

It just keeps getting better

Initially with React Native it was quite a hassle to include third-party libraries as easily as for web development, since React Native libraries involve an extra step of linking to the native Android/iOS modules in order for the code to function on each platform. Linking to the native modules through the JSBridge was to be done manually for most third-party libraries in an app I built back in 2018. This required getting my hands dirty with podfiles and gradle configuration - which often resulted in me banging my head against the wall. But fear not fellow developers - with the release of RN 0.60 in early July 2019, native modules are now autolinked! All it requires from you as a developer is simply to build binaries again and then you're up and running with that new crisp third-party library of yours.

# install
yarn add react-native-webview
cd ios && pod install && cd .. # CocoaPods on iOS needs this extra step
# run
yarn react-native run-ios
yarn react-native run-android

No more npm react-native link and messing with podfiles and gradle!

This is a major improvement for you as an upcoming React Native developer, since many of your headaches are now handled automagically. ✨

Types, types, types

And for all of you typed JS lovers out there, React Native comes with built-in Typescript and Flow support. With TypeScript support, your React Native app will scale much better allowing you to catch and fix errors while the hot reload is doing its thing. It can easily be added when creating your new app using the react-native-template-typescript template.

I suggest you head over to this blog post if you want to read a great walkthrough guide to setup Typescript with your new React Native app, including invaluable linting and testing configuration. When importing third-party libraries from the React Native Directory make sure to check if they include type definitions or allow you to add types as a dev dependency, as shown in the code block below.

Similarly to your React web app, Typescript can be added to your existing app.

Run the following command to start type-checking your code:

yarn add --dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer
# or for npm
npm install --save-dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer

Next up define a tsconfig.json in the root of your project and then start fixing errors until the compiler is happy and lets you build your app with new power.

"Once you go Typescript you never go back"
- Unknown, highly proficient TS developer.

CI/CD

When it comes to continuously integrating new code and deploying new versions to production there are many ways to go about it with React Native. In the app that I mentioned previously, our team used Microsoft's App Center for CI/CD, which allows you to integrate with your favourite repo, be it Azure, Bitbucket, GitLab or Github. If your code is on Github, you might just want to make use of their Actions Workflows. If you are starting out small, consider taking a look at Codemagic - they provide a free tier with ~8hrs of build time per month, which should be enough to get you started. 🚀

This was my brief React Native intro to you as a web developer. If you have any questions, feel free to reach out to me at [e-mail] or comment below.