React Native Screen Preview

Preview a React Native screen inside VS Code. Open a JSX or TSX component and it renders in a device frame. You do not need Metro, an emulator, or a native build.

Preview a screen

1. Open a .jsx or .tsx file.
2. Run React Native Preview: Preview Current Component from the Command Palette, the editor title icon, or the editor right-click menu.
3. The screen opens beside the file. The phone icon in the activity bar opens the same preview in the side bar.

Editing the component, or a relative file it imports, rebuilds the preview after a short pause. A compile error stays on screen and appears in the Problems list. Refresh Preview compiles the screen again and remounts it.

A .ts file or a Markdown file cannot be previewed. The command shows a warning, and the screen already in the frame stays there.

Change the frame

The preview bar controls the frame around the screen:

• Portrait and Landscape
• Zoom in, zoom out, or Fit the frame to the panel
• Light and Dark
• Safe area guide
• Gestures or Buttons for system navigation
• Screen background: white, gray, ink, black, or a custom color
• Component menu. Automatic uses the default export, then a component named after the file.

On iPhone Duo, the bar also switches Phone, Book, and Flat.

Colors set on the component stay as written. Light, dark, and the background color change the frame.

Devices

Select Device offers these frames. Sizes are logical pixels.

iPhone sizes follow Apple point sizes. Pixel 9, iPhone Duo, and Pixel Fold are preview frames.

Set the default device and the custom size in Settings:

• reactNativeScreenPreview.device
• reactNativeScreenPreview.customDevice.width
• reactNativeScreenPreview.customDevice.height

Components you can preview

Screens can use these React Native exports:

View, Text, Image, TextInput, Pressable, ScrollView, FlatList, SectionList, SafeAreaView, ActivityIndicator, Switch, Modal, StatusBar, KeyboardAvoidingView, StyleSheet, Platform, useWindowDimensions, and useColorScheme.

Common React Native Web components also render, including Button, TouchableOpacity, TouchableHighlight, ImageBackground, Animated, and Alert.

@react-navigation/native and @react-navigation/native-stack use a preview stack. navigate and goBack switch screens inside the frame.

A starter-app set of Expo modules is available in the preview: expo-status-bar, expo-linear-gradient, expo-image, expo-font, expo-router, and @expo/vector-icons.

react-native-maps shows a Google Map inside the phone from initialRegion, region, or the first Marker. Relative .js, .jsx, .ts, and .tsx files in the workspace are included with the screen. Packages installed with npm or yarn are included too, so a library such as react-native-dialog renders in the frame. A package that is not installed, or that has no JavaScript entry, stays listed in the frame. Image sources need an https or data address.

Screens that call fetch or axios can use mock responses. Add entries under reactNativeScreenPreview.apiMocks. Each entry needs a url fragment and can set method, status, and body. A request that matches an entry uses that response. Every other fetch or axios call goes to the network, and setState renders the result, including rows in a FlatList. If the webview cannot reach the URL, the extension makes the request instead. With Safe area on, the screen content starts below the status bar even when the file does not render SafeAreaProvider.

When something cannot render

An import the preview cannot run is listed in the frame, so the panel does not go blank. That includes a package that is not installed, a native module with no JavaScript, image and font files in your own screen, and CSS. React Native Web does not reproduce every iOS or Android behavior. The navigation preview covers stack navigate and goBack.

Logs are written to the React Native Screen Preview output channel.