application · mobile · cross-platform

Native apps from one codebase,React Native.

Meta's open-source framework for building genuinely native iOS and Android apps from a single React + TypeScript codebase — and, through react-native-web, the same components on the web. This guide covers the core primitives, KBVE's shared @kbve/rn package, running the app with Expo, and a live web island demo.

Core concepts@kbve/rn packageRun the appWeb demo

Write once, render everywhere

React Native maps View and Text to real platform widgets instead of the DOM — and react-native-web maps them back, so one component codebase serves mobile apps and these very docs.

• Primitives — View, Text, Pressable, StyleSheet.
• Expo — managed toolchain, device APIs, Fast Refresh.
• @kbve/rn — shared components across app and docs.

MetaMaintainer

ExpoToolchain

react-native-webWeb target

TypeScriptLanguage

FeaturesFAQRelated

On this page

What this guide covers

Concepts

The native primitives and how they map to the web — View, Text, Image, Pressable, and flexbox-only StyleSheet layout.

@kbve/rn

KBVE's shared component package — write and style a UI component once, reuse it across mobile and web.

Running

Create and run an app with Expo — dev server, Expo Go, simulators, and Fast Refresh in seconds.

Web

The same @kbve/rn component the native app renders, hydrated here as a client-only Astro island.

Start here

Overview

React Native is Meta’s open-source framework for building native iOS and Android apps from a single React codebase in JavaScript or TypeScript. Instead of rendering to the DOM, React Native maps components like View and Text to real platform widgets — so the result is a genuinely native app, not a web view.

The same component model then stretches to the web through react-native-web, letting one codebase target mobile and browser.

This guide covers core concepts, the @kbve/rn package, running the app, and the web island demo.

Native primitives

Concepts

React Native keeps React’s component model, hooks, and JSX, but swaps DOM elements for native primitives:

Primitive	Web equivalent	Purpose
View	<div>	Layout container
Text	<span> / <p>	All text must live in a Text
Image	<img>	Images
Pressable / TouchableOpacity	<button>	Touch handling
ScrollView / FlatList	scroll container	Scrolling / virtualized lists
StyleSheet	CSS	Styling via JS objects

Note

Layout is flexbox only and flexDirection defaults to column (not row like the web). There is no cascade — styles are explicit per component via StyleSheet.create.

Shared components

@kbve/rn

@kbve/rn is KBVE’s shared component package. Its primitives are built on View / Text / Pressable / StyleSheet and are consumed by both the native app and — via react-native-web — these docs. Write and style a UI component once, reuse it across mobile and web, and keep the app and its documentation from drifting apart.

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

export function Greeting({ name }: { name: string }) {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Hello, {name}!</Text>
      <Pressable style={styles.button}>
        <Text style={styles.buttonText}>Tap me</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { padding: 16, gap: 8 },
  title: { fontSize: 18, fontWeight: '600' },
  button: { paddingVertical: 8, paddingHorizontal: 12, borderRadius: 8 },
  buttonText: { fontWeight: '500' },
});

Expo workflow

Running

The fastest path is Expo, which wraps React Native with a managed toolchain, device APIs, and a web target:

1. Create an app

   npx create-expo-app@latest my-app
   cd my-app

2. Start the dev server

   npx expo start

3. Open it Scan the QR code with the Expo Go app on a physical device, or press i / a to launch the iOS Simulator / Android emulator. Edit a file and save to see Fast Refresh update the running app instantly.

Tip

Expo gives you over-the-air updates, a large library of native device APIs, and a react-native-web build target — so the same project runs on iOS, Android, and the browser.

Live island demo

Web

React Native components run in the browser through react-native-web, which maps the native primitives to DOM elements. The block below is a proof of concept: the exact same @kbve/rn component the native app renders, displayed here on the web.

It uses View / Text / Pressable / StyleSheet primitives aliased to react-native-web and hydrated as a client:only Astro island. Its colors are wired to Starlight’s theme tokens, so it tracks light/dark with the rest of the docs.

Questions

Frequently asked

What is React Native?

React Native is Meta's open-source framework for building native mobile apps for iOS and Android from a single React and JavaScript/TypeScript codebase. Instead of rendering to the DOM, it maps components like View and Text to real native platform widgets, so the UI is genuinely native rather than a web view.

What is the difference between React and React Native?

React renders to the DOM for the web using HTML elements like div and span. React Native uses the same component model and hooks but renders to native platform views (View, Text, Image) on iOS and Android. Logic and patterns transfer; the primitives and styling (StyleSheet, flexbox-only layout) differ.

What is react-native-web?

react-native-web maps React Native primitives — View, Text, Pressable, StyleSheet — to their DOM equivalents so the same React Native component code also renders in a browser. It lets a single component codebase target iOS, Android, and the web, and is the foundation of Expo's web support.

What is Expo?

Expo is a framework and toolchain on top of React Native that streamlines building, running, and shipping apps. It provides a managed workflow, a large set of device APIs, over-the-air updates, and a web target via react-native-web, so you can run on a device in seconds without native build setup.

What is the @kbve/rn package?

The @kbve/rn package is KBVE's shared React Native component package. Its View, Text, Pressable, and StyleSheet-based primitives render in the native app and, via react-native-web, inside these docs as an Astro island — so a UI component is written and styled once and reused across mobile and web.

Keep exploring

Related applications

AndroidThe platform half of your React Native builds and emulators.iOSSimulators, signing, and shipping the Apple side of the app.JavaScriptThe language and ecosystem underneath React and React Native.