react-native-multidevice-preview

Developer tool to preview React Native UI across multiple device sizes, notches, and orientations — all in a single screen.

Installation

npm install react-native-multidevice-preview react-native-safe-area-context
# or
yarn add react-native-multidevice-preview react-native-safe-area-context

Quick Start

Wrap your application's root component or any individual screen in <DevicePreview> to render it inside a simulated device frame.

import { DevicePreview } from 'react-native-multidevice-preview';
import App from './App';

export default function PreviewScreen() {
  return (
    <DevicePreview device="iPhone14" orientation="portrait">
      <App />
    </DevicePreview>
  );
}

Detailed Examples

These examples demonstrate various ways to use react-native-multidevice-preview effectively:

Example 1: Basic Usage with Controls

By default, the device frame comes with interactive controls to toggle device, orientation, safe areas, and notch visibility on the fly.

<DevicePreview
  device="iPhone14"
  orientation="portrait"
  scale="auto" // Scales automatically to fit parent container 
  showControls={true}
  showNotch={true}
  backgroundColor="#e8e8f0"
>
  <YourApp />
</DevicePreview>

Example 2: Comparing Multiple Devices Side-by-Side

You can compare your application against multiple device sizes at the same time using <DevicePreview.Group>.

<DevicePreview.Group orientation="portrait" scale={0.45} gap={24}>
  <DevicePreview device="iPhoneSE3">
    <YourApp />
  </DevicePreview>

  <DevicePreview device="iPhone14">
    <YourApp />
  </DevicePreview>

  <DevicePreview device="pixel6">
    <YourApp />
  </DevicePreview>
</DevicePreview.Group>

Example 3: Landscape Mode

Simply change the orientation prop to preview your application in landscape mode.

<DevicePreview
  device="iPhone14"
  orientation="landscape"
  showControls={true}
>
  <YourApp />
</DevicePreview>

Example 4: Context and Custom Controls (Advanced)

If you build custom developer tooling, you can interact with the current device sizing using the useDevicePreview() hook.

import { useDevicePreview } from 'react-native-multidevice-preview';

function MyControls() {
  const { toggleOrientation, toggleNotch } = useDevicePreview();

  return (
    <View>
      <Button title="Rotate" onPress={toggleOrientation} />
      <Button title="Toggle Notch" onPress={toggleNotch} />
    </View>
  );
}

API

<DevicePreview />

Wraps any component and renders it inside a simulated device frame.

| Prop | Type | Default | Description | |---|---|---|---| | device | DeviceKey | "iPhone14" | Device to simulate | | orientation | "portrait" \| "landscape" | "portrait" | Screen orientation | | scale | number \| "auto" | "auto" | Scale factor (auto fits container) | | showFrame | boolean | true | Show device chrome | | showNotch | boolean | true | Show notch / Dynamic Island | | showSafeArea | boolean | false | Show safe area guide overlay | | showControls | boolean | true | Show floating device switcher panel | | backgroundColor | string | "#f0f0f5" | Background behind the device | | customDevice | DeviceConfig | — | Fully custom device spec |

<DevicePreview.Group />

Renders multiple device previews in a horizontal scroll row for side-by-side comparison.

| Prop | Type | Default | Description | |---|---|---|---| | orientation | "portrait" \| "landscape" | — | Shared orientation for all devices | | scale | number \| "auto" | 0.5 | Shared scale for all devices | | gap | number | 20 | Gap between devices in px | | wrap | boolean | false | Wrap to next row |

Supported Devices

iPhone

| Key | Name | Size | |---|---|---| | iPhone14 | iPhone 14 | 390 × 844 | | iPhone14Pro | iPhone 14 Pro | 393 × 852 | | iPhone14ProMax | iPhone 14 Pro Max | 430 × 932 | | iPhoneSE3 | iPhone SE (3rd gen) | 375 × 667 | | iPhone8 | iPhone 8 | 375 × 667 |

Android

| Key | Name | Size | |---|---|---| | pixel6 | Pixel 6 | 393 × 851 | | pixel7Pro | Pixel 7 Pro | 412 × 892 | | samsungS22 | Samsung S22 | 360 × 780 | | samsungS22Ultra | Samsung S22 Ultra | 384 × 824 |

Tablets

| Key | Name | Size | |---|---|---| | iPadMini | iPad Mini (6th gen) | 744 × 1133 | | iPadPro11 | iPad Pro 11" | 834 × 1194 | | genericTablet | Generic Tablet | 768 × 1024 |

Custom Device Config

<DevicePreview
  customDevice={{
    name: 'My Custom Device',
    brand: 'generic',
    width: 360,
    height: 760,
    safeArea: { top: 32, bottom: 16, left: 0, right: 0 },
    hasNotch: true,
    hasDynamicIsland: false,
    frameRadius: 24,
    statusBarHeight: 32,
    platform: 'android',
  }}
>
  <YourApp />
</DevicePreview>

License

MIT