0% completed
What is React Native?
On This Page
What React Native Is
How Your Code Reaches the Screen
How It Differs from Traditional Mobile Development
Benefits of React Native
When to Use React Native
The code below is JavaScript with React syntax, and it contains no HTML and no reference to a web page.
import { Text, View } from 'react-native'; export default function App() { return ( <View> <Text>Hello from my first app!</Text> </View> ); }
When this code runs on an iPhone, the operating system displays a UIView that contains a UITextView. When the same code runs on an Android phone, the operating system displays a ViewGroup that contains a TextView. These are the same building blocks that an iOS or Android developer uses directly, and they are called native views.
What React Native Is
React Native is an open-source framework for building iOS and Android applications with JavaScript and React. A framework is a set of tools and libraries that gives an application its structure. Facebook (now Meta) created React Native and first released it in 2015. It is widely used, partly because web developers can apply their JavaScript and React skills to mobile work.
React is a JavaScript library for building user interfaces, and you do not need to know it yet, because this course teaches it. If you have seen React on the web, the way of working is the same: you split the screen into components and describe what each one should show. A component is a reusable piece of the interface, written as a JavaScript function. The difference is the output, because React on the web produces HTML elements in a browser while React Native produces native views on a phone.
Each React Native component that displays something corresponds to a view on each platform. The official documentation gives this mapping for the most common ones:
| React Native | Android view | iOS view | Closest web element |
|---|---|---|---|
View | ViewGroup | UIView | a non-scrolling div |
Text | TextView | UITextView | p |
Image | ImageView | UIImageView | img |
ScrollView | ScrollView | UIScrollView | a scrolling div |
TextInput | EditText | UITextField | a text input |
Not every component has a single matching view. The built-in Button, for example, is not an iOS UIButton. Its source code builds it from smaller React Native parts: a touchable wrapper and a Text label, using a different wrapper on Android than on iOS.
How Your Code Reaches the Screen
Follow the App component above from launch to the first visible screen. The following steps happen in order:
- The phone starts your application, and a JavaScript engine loads your code. An engine is the program that runs JavaScript, and React Native uses one named Hermes by default.
- React calls your
Appfunction and receives a description of what the screen should contain: aViewwith aTextinside it. - React Native's renderer, named Fabric, turns that description into real native views and places them on the screen.
- When something changes later, such as a press that updates a value, React calls your function again and compares the new description with the old one. React Native then updates only the native views that differ.
The diagram also shows a second path, which your code takes when it needs a device feature rather than a view. The camera, the GPS, and the sensors belong to the operating system, so JavaScript has to call native code to use them. React Native packages that native code as Turbo Modules, which your JavaScript calls like ordinary functions.
Both paths rest on JSI (JavaScript Interface), a layer that lets JavaScript hold a direct reference to a native object and call its methods. You will rarely touch these three names in daily work, but you will see them in documentation. Older articles describe a "bridge" that passed messages between JavaScript and native code asynchronously. That bridge has been removed from current React Native, so treat those descriptions as history.
How It Differs from Traditional Mobile Development
Traditional mobile development produces two separate applications: one for Android in Kotlin or Java, and one for iOS in Swift or Objective-C. This means two codebases, developers skilled in two sets of technologies, and extra time spent keeping features the same on both platforms.
With React Native, you write one JavaScript codebase, and it creates the correct native views on each platform. Most of your code is shared, but the sharing is not always complete, because the two platforms do differ. For a small difference, your code can check Platform.OS, which is 'ios' on iOS and 'android' on Android. For a larger one, you can write two files, such as BigButton.ios.js and BigButton.android.js, and React Native loads the correct file for each platform.
Benefits of React Native
Shared code. One codebase serves both platforms, which reduces development time and cost compared with building the application twice.
Fast feedback. A feature called Fast Refresh shows your saved changes on the device almost immediately, with no full rebuild. Older articles call this idea "hot reloading".
Native views and good performance. Your interface is made of real native views rather than a web page, so it looks and behaves like other applications on the phone. Your logic still runs as JavaScript, however, so slow JavaScript can still make the application feel slow.
A large community. Many developers use React Native, so tutorials and third-party libraries are easy to find.
Access to native code. When no library provides what you need, you can write your own native code in Kotlin or Swift and call it from JavaScript.
When to Use React Native
React Native is a strong choice when you need an application on both iOS and Android and want to maintain one codebase. It fits especially well when your team already knows JavaScript or React, when the application will receive frequent updates, or when you want to share business logic with an existing React web application. Rich animations and gestures do not rule it out, because libraries that this course covers handle both.
Native development is the better choice in a few situations. A graphics-heavy application, such as a 3D game, draws its own pixels and gains little from native views. An application built mainly around the newest platform features may need more native code than shared code. A team building for only one platform, with developers who already know that platform, also gets less value from a shared codebase.
Reading Progress
0%
On This Page
What React Native Is
How Your Code Reaches the Screen
How It Differs from Traditional Mobile Development
Benefits of React Native
When to Use React Native