# What React Native Is — React Native

Source: https://www.skillbyai.com/en/react-native/f-what

> React driving native UI.

## Native views driven by React

React Native is an open-source framework from Meta for building mobile apps with React. You write components in JavaScript or TypeScript, and instead of producing HTML in a browser, React Native renders **real native views**: a `<View>` becomes a `UIView` on iOS and an `android.view.View` on Android, and `<Text>` becomes a native text view. Your JavaScript runs in an engine (Hermes by default) inside the app, React computes what the UI should look like, and the renderer creates and updates the native views. The same component model, hooks and state ideas you know from React on the web apply.

## React components, native views

React Native lets you write React components in JavaScript or TypeScript that render real platform UI on iOS and Android.

![Three ideas: how React Native works, Expo versus the bare CLI, and the core components.](assets/figures/react-native/section-1-map.svg) — Figure 1.1 — From React components to native views.

## The New Architecture in brief

The **New Architecture** replaced the old asynchronous JSON "bridge". **JSI** (JavaScript Interface) is a C++ layer that lets JavaScript hold references to native objects and call them directly. **Fabric** is the new rendering system, built on JSI, which supports concurrent React features and synchronous layout reads. **TurboModules** are native modules loaded lazily and called through JSI with typed interfaces generated by **Codegen**. The New Architecture is the default in recent React Native and Expo SDK releases; check the docs for your version, since older libraries may need updates to be compatible.

## A first component

Plain React with React Native primitives instead of DOM elements.

```tsx
import { useState } from "react";
import { View, Text, Pressable } from "react-native";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <View style={{ padding: 24, alignItems: "center" }}>
      <Text style={{ fontSize: 24 }}>Tapped {count} times</Text>
      <Pressable onPress={() => setCount((c) => c + 1)}>
        <Text style={{ color: "#2563eb" }}>Tap me</Text>
      </Pressable>
    </View>
  );
}
```

## A conductor and an orchestra

React is the conductor deciding what should be played; the native platform is the orchestra that actually makes the sound. React Native passes the score from one to the other.

**Quiz:** What does a React Native `<View>` become at runtime?

- [ ] A canvas drawing made by JavaScript
- [ ] An HTML div inside a WebView
- [x] A real native platform view such as UIView or android.view.View
- [ ] A screenshot of a web page

*Answer:* A real native platform view such as UIView or android.view.View. React Native renders native UI, not a web page.