1 of 22

React Native

James Walker, Will Scurria,

Soumya Mahavadi, Osoo Kwon

April 8, 2025

2 of 22

Introduction

01

3 of 22

4 of 22

5 of 22

React v/s React Native

Runs in a web browser

Processed by browser’s single threaded event loop

Runs in a mobile app runtime

Processed in its own engine (e.g. Hermes)

6 of 22

Why React Native

02

7 of 22

Why React Native?

Native-Like Performance

Allows developers to use the same code to build apps for both iOS and Android

Allows developers to instantly see code changes in the app without losing its current state

Delivers an app experience that feels just like a fully native app no matter which platform via native components:

Developed and backed by Meta: extensive resources, libraries, and community support

Single Codebase

Hot Reloading

Large Community

React Native offers a range of benefits that make mobile app development more efficient.

Biggest advantage is the ability to use a single codebase for both iOS and Android
Rather than learning both Swift and Kotlin and writing separate code for each platform, you can write your app once in JavaScript, and React Native will handle rendering it for you
Dramatically reduces development time, ensures consistency in user experience across platforms

Another major developer-friendly benefit is hot reloading
With hot loading, when you make changes to code, React Native will only refresh and update the part of the app that has changed while preserving the apps current state, like your scroll position in the screen or input field values
This allows you to see your changes instantly without having the rebuild the app, which allows for a much faster iteration cycle

React Native is also capable of delivering an app experience that feels native and familiar on both iOS and Android by using native components
The UI is built using components like <View> <Text> and <Button> which serve as an abstraction layer
React Native then maps these components to their platform-specific counterparts such as UIView and UIButton on iOS or simply View and Button on Android for you
This allows React Native to run platform-specific code under the hood while keeping the development experience consistent

Backed by Meta
Steady flow of updates and a ton of third-party libraries, tools, and resources available
The large community makes it easy for developers to find solutions to common problems and share knowledge

8 of 22

Understanding JSX

A syntax extension for JavaScript that allows developers to write HTML-like code directly within JavaScript files

Now let's talk about JavaScript XML or JSX
JSX is a syntax extension for JavaScript that allows you to write HTML-like code directly within your JavaScript files

One of the biggest advantages of JSX is how it integrates JavaScript logic directly into the UI structure
In traditional web development, HTML, CSS, and JavaScript are often kept in separate files, which can make the code feel fragmented. What’s nice about JSX is that it allows you to write the structure, the logic, and the styling all in one place
This makes it easier to manage components and visualize the UI

Here’s a simple example of JSX on the left—just a <View> component with a <Text> component inside it
On the right, you can see how React Native transpiles that into regular JavaScript
This shows how JSX is just a more readable and intuitive way to write your UI, while React Native handles rendering everything properly

9 of 22

React Native vs Other Cross-Platform Tools

Backed by Google
Uses Dart
Own rendering engine

HTML, JavaScript, CSS
Relies on WebView

Flutter

Ionic

NativeScript

Uses JavaScript
Native performance
Native APIs

Now that we’ve talked about the strengths of React Native, it’s worth mentioning a few other cross-platform frameworks

Flutter is a framework developed by Google, which means it comes with a large community of libraries and resources like React Native
It uses a language called Dart, also created by Google, which isn’t as widely adopted as JavaScript and would require developers to learn something new.
Flutter uses its own rendering engine to create a smooth UI that looks the exact same across platforms, and while this offers a lot of flexibility and control, it also means Flutter doesn't use native UI components, so apps can sometimes feel less like native to their platform

Ionic takes a different approach by using standard technologies like HTML, CSS, and JavaScript which makes it easy for web developers to learn, use, build, and deploy
However, it renders the UI inside a WebView, which means that it is essentially running in a browser inside the app, which can lead to lower performance speeds and a less smooth UI
So, it’s best to use for simple, uncomplicated apps

NativeScript is similar to React Native in that it uses JavaScript and delivers native-like performance
But the key difference lies in how that performance is achieved
As mentioned earlier, React Native provides a clean abstraction: you code using native components that are later mapped to the platform and rendered behind the scenes
On the other hand, Native Script provides you direct access to platform-specific APIs, like UIImagePickerController on iOS and Camera2 API on Android for accessing the camera
While this provides flexibility, it also comes with a steeper learning curve as developers have to learn how to use these APIs

Overall, React Native provides an ideal balance between all of these frameworks. It’s beginner-friendly, uses a language most developers already know, and still gives you the performance and feel of a native app.

10 of 22

Demo

03

11 of 22

List Rendered With JavaScript .map()

12 of 22

List Rendered with React Native Flatlist

Note: Stuttering caused by computer simultaneously screen recording and simulating a virtual phone and is not inherent to this implementation.

13 of 22

How React Native works

04

14 of 22

What’s in an app

15 of 22

Building the app for production

Babel - Transpiles React code to plain JavaScript
Metro bundler - Bundles all the .js files to one optimized, production-ready .js file
React Native’s hermesc - Compiles the .js to bytecode
Packaging - .ipa/.apk containing everything iOS/Android needs to run your app

16 of 22

Running an app

17 of 22

What the device needs

Something to execute the JavaScript bytecode that the developer wrote
Something that knows how to display native components like <Text /> and <Image />
Something to perform native operations like accessing the camera, using GPS, or accessing the file system

18 of 22

So when you run your React Native mobile app on your phone, a program gets started up. It creates several JavaScript threads and C++ threads.

Some threads run the Hermes JavaScript engine, which execute the JavaScript bytecode line-by-line. Meanwhile, the React Native developers provide the Fabric renderer and TurboModules, which expose functions to the JavaScript thread for rendering the UI and calling native functions like camera access.

You can think of the source code as the recipe, Hermes as the brain, and the C++ runtime as the muscles that actually do the work. In this analogy, JSI connects JavaScript to C++, and is like the nerves.

Hermes:

Takes the transpiled, bundled, compiled JS byte code and runs it
You can actually use any JS engine like Google Chrome’s and Safari’s, but Hermes is targeted at React Native and therefore improves startup time and manages memory better
Hermes runs the bytecode, starting with some function definitions. Then, Hermes calls the entry point of the app, which creates a root container on the screen to hold everything else

In a hello world example, Hermes would execute some JavaScript code that calls a function to render a Text component containing the string Hello World. This function gets run in the C++ layer by Fabric render, and the C++ runtime renders this React element.
In a photo-taking example, Hermes would execute some JavaScript code that calls a function to take a photo. This function gets run in the C++ layer by TurboModules, and the C++ runtime takes a photo.

In other words, the React Native developers provide a C++ runtime that actually knows how to create components on the screen and perform native operations.
So what responsibilities does Fabric have?

Displaying text, views, links, etc.
Laying out the screen, so determining what x and y to display on

TurboModules

If your app accesses the camera, then React Native bundles in pre-written C++ code for calling native operations on iOS or Android to access the camera.

All in all, this architecture is what accomplishes the cross-platform-ness of React Native. Done in October 2024

19 of 22

Wrapping up

20 of 22

Q/A

21 of 22

Sources

22 of 22

Thanks!

Do you have any questions?

beforeido.dev@gmail.com

https://tarheels.live/beforeido/

CREDITS: This presentation template was created by Slidesgo, and includes icons by Flaticon, and infographics & images by Freepik