Online React Native playground with TypeScript, View, Text, StyleSheet, Pressable and FlatList components, local imports, and a live web preview powered by react-native-web. No install, no sign-up.
Choose a source file from the explorer and edit it with Monaco.
Edit package.json to add browser-compatible npm packages or change versions. Preview packages load from esm.sh. Successful previews save resolved versions for ranges and tags with your draft and shares; change the range to resolve again. Scripts and build plugins run only in downloaded projects.
Auto-run updates the browser preview as you type. Turn it off to run your changes manually.
Use the console for browser logs and errors, or evaluate a command against the preview.
Share creates a snapshot link. Download exports the source so you can continue locally.
import { AppRegistry } from 'react-native'
import App from './App'
// The same registration an Expo or bare React Native app uses. On the web,
// react-native-web mounts the app into #root.
AppRegistry.registerComponent('App', () => App)
AppRegistry.runApplication('App', {
rootTag: document.getElementById('root'),
})
import { useState } from 'react'
import {
FlatList,
Platform,
Pressable,
SafeAreaView,
StyleSheet,
Text,
TextInput,
View,
useWindowDimensions,
} from 'react-native'
import { GoalRow, type Goal } from './components/GoalRow'
import { colors, spacing } from './theme'
const STARTER_GOALS: Goal[] = [
{ id: '1', title: 'Sketch the onboarding screen', done: true },
{ id: '2', title: 'Wire up the FlatList', done: false },
{ id: '3', title: 'Try it on a phone with Expo', done: false },
]
export default function App() {
const [goals, setGoals] = useState(STARTER_GOALS)
const [draft, setDraft] = useState('')
const { width } = useWindowDimensions()
const doneCount = goals.filter((goal) => goal.done).length
const addGoal = () => {
const title = draft.trim()
if (!title) return
setGoals((current) => [...current, { id: String(Date.now()), title, done: false }])
setDraft('')
}
const toggleGoal = (id: string) =>
setGoals((current) =>
current.map((goal) => (goal.id === id ? { ...goal, done: !goal.done } : goal)),
)
return (
<SafeAreaView style={styles.screen}>
<View style={styles.header}>
<Text style={styles.eyebrow}>
React Native · {Platform.OS} · {Math.round(width)}px wide
</Text>
<Text style={styles.title}>Plan your day</Text>
<Text style={styles.subtitle}>
{doneCount} of {goals.length} done
</Text>
</View>
<View style={styles.composer}>
<TextInput
style={styles.input}
placeholder="Add a goal"
placeholderTextColor={colors.muted}
value={draft}
onChangeText={setDraft}
onSubmitEditing={addGoal}
returnKeyType="done"
/>
<Pressable
accessibilityRole="button"
onPress={addGoal}
style={({ pressed }) => [styles.addButton, pressed && styles.addButtonPressed]}
>
<Text style={styles.addButtonText}>Add goal</Text>
</Pressable>
</View>
<FlatList
data={goals}
keyExtractor={(goal) => goal.id}
contentContainerStyle={styles.list}
renderItem={({ item }) => <GoalRow goal={item} onToggle={() => toggleGoal(item.id)} />}
/>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
screen: {
flex: 1,
backgroundColor: colors.background,
},
header: {
paddingHorizontal: spacing.lg,
paddingTop: spacing.xl,
paddingBottom: spacing.md,
},
eyebrow: {
color: colors.accent,
fontSize: 12,
fontWeight: '700',
letterSpacing: 1.2,
textTransform: 'uppercase',
},
title: {
marginTop: spacing.xs,
color: colors.text,
fontSize: 34,
fontWeight: '800',
letterSpacing: -0.5,
},
subtitle: {
marginTop: spacing.xs,
color: colors.muted,
fontSize: 16,
},
composer: {
flexDirection: 'row',
gap: spacing.sm,
paddingHorizontal: spacing.lg,
paddingBottom: spacing.md,
},
input: {
flex: 1,
height: 44,
paddingHorizontal: spacing.md,
borderRadius: 12,
borderWidth: 1,
borderColor: colors.border,
backgroundColor: colors.card,
color: colors.text,
fontSize: 16,
},
addButton: {
justifyContent: 'center',
paddingHorizontal: spacing.md,
borderRadius: 12,
backgroundColor: colors.accent,
},
addButtonPressed: {
opacity: 0.8,
},
addButtonText: {
color: '#ffffff',
fontSize: 15,
fontWeight: '700',
},
list: {
paddingHorizontal: spacing.lg,
paddingBottom: spacing.xl,
gap: spacing.sm,
},
})
The editor uses Monaco, the engine behind VS Code, with language-aware editing tools and familiar keyboard controls.
Edit a source file from the project explorer — the live preview recompiles automatically.
Add, rename, duplicate or delete project files as needed. Update affected imports after renaming or moving a file.
Use the console for logs and errors, and Format to tidy the active file.
Share the complete project or download a Vite project ZIP with its source files and package.json.
React Native Components
react-native-web 0.21
React 19 + TypeScript
StyleSheet & Flexbox
Pressable, FlatList, TextInput
Local Component Imports
Live Web Preview
Vite Project Export
Auto-run is on by default and updates the preview as you type. Turn it off in the editor settings to run manually with Run or Ctrl/⌘ + Enter.
The Console prompt can inspect browser globals and the rendered DOM, but not variables scoped inside ES modules or component state.
Console shortcuts apply when its prompt is focused. Editor shortcuts apply inside the code editor.
Code runs in a sandboxed browser preview, without Node.js, a backend, or private environment variables.
Download the project when you need build plugins, server APIs, native modules, or a production dependency workflow.
The preview renders your components with react-native-web 0.21 on React 19: imports from react-native resolve to react-native-web, so View, Text, StyleSheet, Pressable, FlatList and TextInput work as they do on a device. Platform.OS is "web", and native-only modules such as Alert, Vibration and StatusBar do nothing here.
Yes, with Expo: create an app with npx create-expo-app, copy the src folder in and use App.tsx as the root component. The download here is a Vite web project with the react-native alias configured, not an Expo project.