React Native Introduction

By the end of this lesson you will be able to explain what React Native is, how it differs from React on the web, and when a team might pick Flutter instead. You will also read your first React Native screen and know exactly what it shows on a phone.

You already know some JavaScript and React. That is great news. React Native uses the same React you learned on the web, so most of your knowledge carries over. Only the building blocks on screen change.

What is React Native?

React Native is an open-source framework from Meta for building mobile apps with React. You write components in JavaScript (or TypeScript). React Native then shows them as native views: the same buttons, text boxes and scroll areas that apps written in Kotlin or Swift use.

A framework is a set of ready-made tools and rules you build on. A native view is a screen element drawn by the phone's own system, not by a web browser.

Think of a Hindi film dubbed into Tamil. The story (your React logic) stays the same. Only the language on screen changes to suit the audience. React Native "dubs" your components into Android views on Android and iOS views on iOS.

One codebase gives you:

• an Android app (for the Google Play Store),
• an iOS app (for the Apple App Store),
• and, with Expo, a web version of the same app if you want one.

Same React, different building blocks

On the web, React DOM turns your components into HTML elements like <div> and <p>. In React Native there is no HTML and no DOM. Instead you use core components that React Native provides.

Here is a small web React component that you could write today:

function Welcome() {
  return (
    <div className="card">
      <h2>Namaste, Priya</h2>
      <p>Your next train leaves Jaipur at 6:40 AM.</p>
    </div>
  );
}

And here is the same idea in React Native:

import { View, Text, StyleSheet } from "react-native";

export default function Welcome() {
  return (
    <View style={styles.card}>
      <Text style={styles.heading}>Namaste, Priya</Text>
      <Text>Your next train leaves Jaipur at 6:40 AM.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { padding: 16, borderRadius: 12, backgroundColor: "#eef6fb" },
  heading: { fontSize: 20, fontWeight: "bold" },
});

On the phone you see a light blue card with rounded corners. The first line is bold and larger. The second line is normal text below it.

Notice what changed and what did not:

The last row is the important one. useState, useEffect, props and composition work exactly as in the React tutorial.

The logic is plain React

Because the React part is identical, you can practise app logic right here in the browser. The example below is web React, but the state code is exactly what you would write inside a React Native screen. Click the buttons and watch the total.

import { useState } from "react";
import { createRoot } from "react-dom/client";

function ChaiOrder() {
  const [cups, setCups] = useState(1);
  const price = 15;

  return (
    <div style={{ fontFamily: "sans-serif" }}>
      <h3>Rohan's chai order</h3>
      <p>Cups: {cups}</p>
      <p>Total: ₹{cups * price}</p>
      <button onClick={() => setCups((c) => c + 1)}>Add a cup</button>{" "}
      <button onClick={() => setCups((c) => Math.max(1, c - 1))}>Remove a cup</button>
    </div>
  );
}

createRoot(document.getElementById("root")).render(<ChaiOrder />);

In React Native you would swap <div> for <View>, <p> for <Text>, and <button> for a <Pressable>. The useState line does not change at all.

How React Native works (the short version)

When your app runs, three parts cooperate:

1. Your JavaScript runs inside Hermes, a JavaScript engine built for mobile. An engine is the program that runs JavaScript code.
2. React works out what the screen should look like, just as on the web.
3. The renderer (called Fabric) creates and updates real native views to match.

Since version 0.82, React Native always uses this modern design, called the New Architecture. You will study it later in The New Architecture. For now, remember one thing: your JavaScript talks to native code directly and quickly.

React Native vs Flutter

Flutter is the other popular way to build one app for both platforms. Both are good choices. They simply work differently.

A useful comparison: React Native is like a tailor who stitches your design using the local cloth of each city. Flutter brings its own cloth everywhere. If you want to try the other side, see the Flutter tutorial.

What about Expo?

Expo is a framework built on top of React Native. It adds file-based navigation (Expo Router), a large library of device features (camera, location, notifications), and cloud services for building and publishing apps. The React Native team itself recommends starting new apps with a framework like Expo. This course uses Expo throughout, and you will set it up in the next lesson.

Common mistakes

• Expecting HTML to work. <div>, <span> and <img> do not exist. Use View, Text and Image.
• Thinking React Native is a website in an app. It is not a WebView. Your components become real native views.
• Re-learning React from scratch. Components, props, state and hooks are the same. Focus your energy on the mobile parts.
• Using CSS files. Styles are JavaScript objects passed to the style prop.

Key points

• React Native builds Android and iOS apps from one React codebase.
• It shows real native views, not web pages inside an app.
• Use View, Text, Image and Pressable instead of HTML elements; all text must be inside Text.
• Components, props, state and hooks work exactly as in web React.
• Flutter uses Dart and draws its own pixels; React Native uses JavaScript and the platform's views.
• Expo is the recommended framework for starting new React Native apps.

import { View, Text, StyleSheet } from "react-native";

export default function Ticket() {
  return (
    <View style={styles.box}>
      <Text style={styles.name}>Ananya Rao</Text>
      <Text>Seat 42, Coach B3, Pune to Kochi</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  box: { padding: 12 },
  name: { fontWeight: "bold", fontSize: 18 },
});