Pebellslearn by building
0%
RoadmapsMatrixCoursesSandboxSign in
Introduction to React Native  ›  Lesson

What React Native Is

What is React Native? 12 minReact Native lets you write React components in JavaScript while the phone displays real native iOS and Android views.

What React Native Is

Throughout this course you will build Sprout, a small app that reminds you when each houseplant needs water. It should feel at home on an iPhone and on an Android phone. The obvious route is to write it twice, once in Swift and once in Kotlin. React Native offers another route, and this lesson shows what it actually is.

The rule

Write React in JavaScript; the phone draws real native views.

React Native is a framework from Meta for building mobile apps with React, the same component model used on the web. Instead of HTML elements, you use components such as View, Text and Image. At run time, React Native turns each of those into the platform's own widget: a Text becomes a native text view on iOS and a TextView on Android.

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

export default function App() {
  return (
    <View>
      <Text>Sprout: 3 plants need water today</Text>
    </View>
  );
}

Two pieces run side by side inside the app:

  • Your JavaScript runs in a JavaScript engine (Hermes by default) bundled into the app. It holds your components, state and logic.
  • The native side is the ordinary iOS or Android app shell. It creates the real views, handles touches and talks to the camera, storage and sensors.

React Native connects the two. When your state changes, React works out what should be on screen, and the native side updates the real views to match. There is no browser and no web page involved. That is the key difference from apps that wrap a website.

The shortcut

When you meet a new React Native idea, ask "which side does this live on?" Logic and layout decisions live in JavaScript. Drawing pixels, scrolling and hardware live on the native side.

One tap in Sprout, followed through both sidesStep 1 of 4

  1. The touch

    You tap "Watered" on the fern. The native side detects the touch and reports it to JavaScript.

A common mix-up is to think React Native runs your app inside a hidden web page. It does not. If it did, you could use <div> and CSS files. You can not, and that is the clue.

Drills

Answer fast — trust the rule.

quick drill

What does a React Native <Text> become on an Android phone?

quick drill

Where does your component and state logic run in a React Native app?

quick drill

Which element can you NOT use in a React Native screen?

quick drill

In Sprout, the user scrolls a long list of plants. Which side does the actual scrolling of pixels?

Remember

  • React Native: you write React in JavaScript, and the phone shows real native views.
  • Ask "which side?": logic in JavaScript, drawing and hardware on the native side.
  • Trap: it is not a web page in disguise, so there is no div and no CSS file.

Practice — level up

0/1 solved

Write your answer, then compare it with a rubric and a model answer.

ExplainFollow a tap through both sides

Explain what happens, step by step, when a user taps a 'Watered' button in a React Native app. Say which work happens in JavaScript and which happens on the native side.