10 things to keep in mind when switching from React to React Native

Today, web developers take a great interest in mobile development, sometimes without realizing that this is a completely different world. However, working with React-Native is a little easier for React developers, but with some caveats. In this post, I’ll share what mobile developers can face on the journey from React to React Native.


First, let me remind you that React Native (RN) is a cross-platform technology for building mobile apps. Many people think that its main advantage is the use of a single codebase for two applications, but I do not consider this to be the most valuable in RN. The core value is using React with all its benefits, including the wider web development community. It makes perfect sense for React developers to start building mobile apps with React Native after having a solid experience with React. But the mobile world is very different from the web. Today I want to share what to keep in mind as you dive into the world of mobile development.

1. SCREEN COMPACT

CSS assumes that you are working with a pixel as a physical unit of 1 / 96th of an inch. This is useful if you are creating a website only for desktop computers, but when working on a site for mobile devices, you need to consider different screen densities. That’s why you need different margins, padding for different devices, and different assets (like images) for them. There is a good articleexplaining the mobile approach. Alternatively, you can refer directly to the resource Android Developer

2. NAVIGATION

A web browser usually has the current page, a back button for storing history, and other anchors. In the mobile version of the site, instead, we have screens, and navigation between them, acting in clear patterns: navigation through tabs, along the stack, and backtracking. You can’t use React-router for this, but you can use instead React navigation library for responsive navigation.

Animated tab navigation in React-Native

3. STYLES

Here in the mobile world, CSS won’t work, and none of the solutions that work with it work. You cannot use CSS-in-JS, LESS, or anything else. Instead, you can use JSON objects to define component styles.
Note:

  • always use StyleSheet.create ({})so that React-Native can cache styles;
  • Flexbox is still here, only it has a different name.


Styles example of React-Native

4. NETWORK

If you are building a website or desktop application with React (say Electron), then you can rely on a good and reasonably stable internet connection. But now we are talking about mobile devices, and here the Internet can be very slow, unstable, or even absent. Therefore, it is necessary to develop an application with this peculiarity in mind: connection requests, working offline (caching, for example). The connection can also break during the operation, so you need to be prepared for this.

5. SIGNATURE

Unlike a website, which can simply be deployed to an S3-compatible storage, a mobile app must be digitally signed in order for the phone to verify that the developer is trusted. This process can be really laborious, especially for iOS, where you need to buy a program for a developer, create application id, profile, generate and export a signing certificate… On the Android platform it looks simpler: you can generate all the data you need with one command line or with Android Studio and distribute the application right away.

6. DISTRIBUTION

Again: you can’t just upload content to S3 or a virtual machine. You need to go through Google Play and the App Store or distribute your application outside the official store, for example, if the application is corporate, intended only for employees of one organization. The App Store, however, simply will not allow publishing the application directly to the App Store, you will have to use some kind of MDM solution or simply distribute it via MS App Center, Firebase Distribution, etc.
In addition, there are many rules in stores that must be followed. These include icons, graphics, user interface guidelines, permissions, security and more.

7. TOOLS

You can also use VSCode or WebStore or even Vim to edit your code and Chrome as a debugger, or you can use Xcode and Android Studioto get more benefits like logs, monitoring tools, file editing and other things. You’ll also love Flipper, Reactotron, and other tools that will speed up your work with React-Native.

React-Native in WebStorm IDE

8. EMULATORS, SIMULATORS AND DEVICES.

For web development, multiple browsers are sufficient. For mobile development, you need to run the code on a mobile device: you can use your phone, but you are unlikely to have devices with both Android and iOS at your fingertips.
Good news: you can use Android emulators (which can be downloaded and run from Android Studio) or iOS simulators built from Xcode if you’re on a Mac (no, you can’t have iOS simulators on any other hardware, at least legally ). It’s a totally new experience, but fun.

9. COMMUNICATION WITH NATIVE CODE.

Your js code will stay with you, but it will also interact with native code (Kotlin, Swift). The application must be properly linked, otherwise it may crash or malfunction. The good news is that when working with React-Native since version 0.60, linking happens automatically for most external libraries.

Architecture of a React-Native application

10. REPEATING THE CODE

Great news, finally! If you are building both a web application and a mobile application, then you can reuse some of the code. You can definitely reuse the entire domain and network code, since there is no specificity for the Internet or mobile devices. You will most likely be able to reuse business logic as well, but this is less likely.

In future articles, I hope to take a closer look at each of these points.

Similar Posts

Leave a Reply