gregfenton
44 supporters
What is React-Native? What is Expo?

What is React-Native? What is Expo?

Jul 17, 2022

TL ; DR

To me, if you are a developer just getting into the mobile scene.....go with Expo and avoid having to work with the "native bits" (i.e. go with the Managed Workflow).

You can go a long way with just using the libraries that are part of Expo (and built into Expo Go). You can go a LOOOONNNNGGGG way using EAS Build to develop your own "dev client" -- where EAS Build automatically builds a custom "native app" for you -- and you can focus on building functionality entirely in "React" (JavaScript) space.

What is React-Native?

React-Native comprises two parts:

  1. the "Native part" is an app that gets compiled and installed on phones:

    ◇ at its core, this is the "app" you install on a phone to give you an app name, an icon, a splash screen, and (most importantly!) starts up its JavaScript engine to run the "React part".
    ◇ typically the app is uploaded to the Apple and Google app stores so users can install it to their phones
    ◇ the app comprises "native code" built with XCode (for iOS) and Android Studio (for Android)

  2. the "React part" is a pure JavaScript "bundle" that gets deployed to the native app
    ◇ an initial version of the "bundle" is added to the "native app" and gets uploaded to the app stores
    ◇ with Expo you can push updates to the "bundle" using Over-The-Air (OTA) publication


What is Expo?

Expo is developer tooling and NPM libraries built on top of React-Native. The Expo team has developed and/or wrapped many NPM libraries that work with React-Native, many of which require changes to the "native code" in order to use them (think: using your phone's camera, bluetooth, pedometer sensors, etc.)

Expo has many parts. Let me highlight some key ones here:

  • npx create-expo-app - a command that generates a new Expo/React-Native project for you and installs all the needed NPM modules you need to get started

  • Expo Go - a native app available from the app stores and will be installed to your simulator/emulator by the Expo development system. Expo Go has all of the Expo libraries (NPMs) built into it, so any JS code (your "React" app) that uses an Expo library can run with Expo Go (see the "Native part" above). Expo Go has its own app icon, app name, splash screen, and a bunch of developer tools embedded to help you in building your own "React part". A pro to Expo Go is that it is already built and deployed to the app stores; two cons to Expo Go is that it does not have your branding (icon, name, splash screen) and it contains all of the Expo libraries even if your app does not require them.

  • Expo Libraries - a long and growing collection of NPMs that have been put together by the Expo team. Many of these are re-bundling of popular RN libraries such that they are compiled into Expo Go and/or can easily be added to a custom development client.

  • eas build - the system that lets you build your own native app, a "custom client". With EAS Build you get to:
    1. use your own app name, icon, splash screen, etc.
    2. upload the app to your own product in each of the app stores
    3. only build in the libraries that your app uses, optimizing the size and performance of your app
    4. (optional) include the Development Client

  • Development Client - the library built into Expo Go (and that you can optionally include -- and almost certainly will include -- into your own custom client.) This library allows your custom client (or your "custom app") to connect to the Expo Development System

  • Expo Development System (i.e. Metro) - provides many capabilities to improve and simplify the developer experience (DX) in building a React-Native app such as hot reloading (change some JS code and the app automatically updates with the changes) and console log viewing (your console.log() messages in JS code are displayed in the terminal where you ran expo start

  • Over The Air (OTA) Updates - the ability to update the "JavaScript bundle" of your product using capability of the expo publish command (coming soon: eas update ). This enables you to update the JavaScript part of your app and push it to all of your users without having to update the app in the app stores (which is a tedious process). In a matter of a few seconds, you can push bug fixes and/or new functionality to your users via OTA. (Note: you cannot use OTA to push updates that require changes to the "native bits"...for that you'd need to update the app in the app stores)

Summary

A fundamental goal of Expo is to dramatically reduce (and even eliminate) the need for developers to do anything with the "native" part. Let Expo handle all of the internal mucky stuff for you.

The React Native folks also strive for that, but RN on its own is a long way from achieving the goal. Expo has nearly accomplished it especially with the advancements added in the past year or so (EAS Build, EAS Submit and soon EAS Update), in addition to all of the work that Expo has put into the libraries that they support which have "native bits" in them.

Enjoy this post?

Buy gregfenton a coffee

More from gregfenton