React Native

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.

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.

@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' },
});

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.

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.

FAQ

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. 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. React Native uses the same component model and hooks but renders to native platform views 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 component code also renders in a browser. It lets a single codebase target iOS, Android, and the web, and underpins 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 — a managed workflow, 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? @kbve/rn is KBVE’s shared React Native component package. Its 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.