Skip to content

React Native Notes

Why web-view is bad?⚑

  • Less performent compared to native and native-like technologies
  • Does not follow OS's UI design pattern. Same design in both android and iOS

Why React Native⚑

  • Big community. Makes development process easier as support can be expected from community when stuck
  • Battle-tested framework. Used by companies like Facebook, Uber Eats, Discord, Skype. And invested by Shopify, Microsoft (despite having Xamarin) etc
  • Cross-Platform. Write code once, and run it in three platform (Android, Web and iOS)

React Native can't beat Native App's performence⚑

To understand this, we first gotta understand how React Native works internally. When we ship an app, it gets shipped with three things:

  • React Native components compiled to Native Code
  • JavaScript bundle
  • JavaScript Virtual Machine (JavaScriptCore, powers Safari)

React Native must ship a JavaScript engine in order to run JavaScript bundles. This VM works as a Message Broker. When an event happens in View, OS will communicate with JavaScript engine to understand how to handle the event.

We have two things to take into consideration. First, the boot-up time of that JavaScript engine. Second, time require to communicate through the Message Broker and execute code from JavaScript bundle containing business logic.

An app built with purely native technologies(like Java, Kotlin, Swift or Objective-C) whon't have to undergo these tasks(communicating and VM boot-up). Hence, the performence gain.

Note that, a React Native app running in iOS will be a bit faster than its Android counterpart. JavaScriptCore is already available in iOS.

  • Hermes is a new JavaScript which is going to replace JavaScriptCore in coming days (one could opt-in for it). Hermes is written specifically for running React Native apps. It boosts performence, reduces memory usage and improves start-up time.

The downside of using React Native is that it ships a Virtual Machine along with the Release APK which makes the app relatively slow and bigger in size.

  • export const ComponentName > export default ComponentName. Former will make sure that import namings are consistent throughout the project codebase.