No history yet

Introduction to React Native

From Web to Mobile

React Native lets you build mobile apps for both iOS and Android using JavaScript and the React library. Instead of writing code in Swift or Kotlin, you use a language you might already know from web development. But these aren't just websites wrapped in an app. React Native uses your code to create real native user interface elements.

React Native translates React components into native UI elements, ensuring apps have the look, feel, and performance of native applications.

This means you get the best of both worlds: a single codebase for two different platforms and an app that feels smooth and responsive because it uses the device's native UI building blocks.

Building with Components

If you've used React for the web, the component-based approach will feel familiar. You build your user interface by creating small, reusable pieces called components and nesting them together. However, you don't use web elements like <div> or <span>.

Instead, React Native provides its own set of core components that correspond to native UI elements. The most basic are <View>, which is like a flexible container similar to a <div>, and <Text>, which is used for displaying text.

import React from 'react';
import { Text, View } from 'react-native';

const WelcomeMessage = () => {
  return (
    <View>
      <Text>Hello, world!</Text>
    </View>
  );
};

export default WelcomeMessage;

This simple component, WelcomeMessage, uses a View to contain a Text element. On an iPhone, this would render a native UIView with a native UILabel inside. On an Android device, it would render a native ViewGroup with a TextView. You write the code once, and React Native handles the platform-specific translation.

The Architecture

So how does JavaScript code, which normally runs in a browser, control native mobile components? It happens through a clever architecture that involves a few key parts.

Virtual DOM

noun

A programming concept where a virtual representation of a UI is kept in memory and synced with the 'real' UI.

First, React Native uses a Virtual DOM. When you change something in your app, React creates a new virtual tree representing the UI. It then compares this new tree to the old one to find what changed. This process, called "diffing," is very fast. Instead of re-rendering the entire screen, React Native sends only the necessary updates to the native side. This makes the app feel snappy.

The second key part is called the Bridge. This is the communication channel between your JavaScript code and the native platform. When the Virtual DOM calculates changes, it sends a serialized message across the bridge to the native side. The native code then interprets this message and updates the actual UI elements on the screen.

This communication is asynchronous, meaning your JavaScript code doesn't have to wait for a response from the native side before continuing. This prevents the UI from freezing. When a user interacts with the app, like tapping a button, the event is sent back across the bridge from the native side to your JavaScript code, where your app's logic can handle it.

Quiz Questions 1/5

What is the primary advantage of using React Native for mobile app development?

Quiz Questions 2/5

Which React Native component is the most direct equivalent to an HTML <div> for structuring and containing other elements?

Understanding this architecture is the key to building effective React Native apps. You write your logic in JavaScript using components, and the framework takes care of the complex task of communicating with the underlying native platform.