1. Introduction
2. Installation
3. How to use
4. Props
5. Demo
6. License

react-native-device-mockup provides frame mockups for Android and iOS devices.
You can use this library when you need a device demo for your app.
Every mockup is rendered as a pure react-native View component.

react-native-device-mockup provides the following mockups:

You can check out the 🌐 full-demo-here
Package for React is 🌐 here

1. Android
   1. Phone: 19.5:9 aspect ratio, AndroidMockup
   2. Tablet: 16:10 aspect ratio, AndroidTabMockup
2. iOS
   1. iPhone, IPhoneMockup
      1. legacy iPhone: iPhone SE3
      2. notched iPhone: iPhone 14
      3. Dynamic island iPhone: iPhone 15 Pro
   2. iPad, IPadMockup
      1. legacy iPad 4:3 aspect ratio (home button)
      2. modern iPad: 4.3:3 aspect ratio (no home button)

No dependencies. Just install it

npm install react-native-device-mockup

or if you use yarn

yarn add react-native-device-mockup

import {
    AndroidMockup,
    AndroidTabMockup,
    IPhoneMockup,
    IPadMockup
}
from "react-native-device-mockup"


return (
  <>
    {/* Android Phone */}
    <AndroidMockup screenWidth={200}>
        {/* your demo */}
        <YourComponent>
          {...}
        </YourComponent>
    </AndroidMockup>

    {/* Android Tablet */}
    <AndroidTabMockup screenWidth={200}>
        {/* your demo */}
        <YourComponent>
          {...}
        </YourComponent>
    </AndroidTabMockup>

    {/* iPhone */}
    <IPhoneMockup screenWidth={200}>
        {/* your demo */}
        <YourComponent>
          {...}
        </YourComponent>
    </IPhoneMockup>

    {/* iPad */}
    <IPadMockup screenWidth={200}>
        {/* your demo */}
        <YourComponent>
          {...}
        </YourComponent>
    </IPadMockup>
  </>
)

You can check demo

You can check demo

• AndroidMockup, AndroidTabMockup, IPhoneMockup, IPadMockup

Width of mockup screen.
The height is automatically calculated according to the ratio.

NOTE
It does not mean the full width of the mockup being rendered.

• AndroidMockup, AndroidTabMockup, IPhoneMockup, IPadMockup

Hide the status bar.

• false: Status bar occupies its own space with statusbarColor. (default)
• true: Status bar no longer occupies its own area, but becomes part of the screen area.

NOTE
When isLandscape=true and screenType="legacy" in iPhoneMockup,
the status bar is always hidden regardless of hideStatusBar.
Even on the classic iPhone, the status bar is always hidden when in landscape mode.

• AndroidMockup, AndroidTabMockup

Type of navigation bar.

• "swipe": swipe gesture navigation bar. (modern style)
• "bhr": back-home-recent buttons. (classic style)
• "rhb": recent-home-back. (classic style)

• AndroidMockup, AndroidTabMockup, IPhoneMockup, IPadMockup

Make the navigation bar transparent.

• false: Navigation bar occupies its own space with navBarcolor. (default)
• true: Navigation bar no longer occupies its own area, but becomes part of the screen area.
  • NOTE: Swipe bar or buttons are rendered according to the type specified by navBar props.

NOTE
When screenType="legacy" in iPhoneMockup, transparentNavBar is always ignored.

• AndroidMockup, AndroidTabMockup, IPhoneMockup, IPadMockup

Hide the navigation bar.

• false: Show the navigation bar. (default)
• true: Hide the navigation bar.
  • Navigation bar no longer occupies its own area,
    but becomes part of the screen area.
  • NOTE: Swipe bar or buttons are NOT rendered according to the type specified by navBar props.

NOTE
When screenType="legacy" in iPhoneMockup, hideNavBar is always ignored.

AndroidMockup

AndroidMockup only.
Make the area around the camera transparent.
It only works when isLandscape=true.
It is ignored when isLandscape=false

CamArea (Camera area)
The part that was the status bar when in Portrait.
When in Landscape, in Android Native, this part is simply expressed as an empty (blank) area.

• AndroidMockup
• AndroidTabMockup

isLandscape=false	isLandscape=true

isLandscape=false	isLandscape=true

hideStatusBar={true}
hideNavBar={true}

isLandscape=false	isLandscape=true

noRoundedScreen	frameColor="green" statusbarColor="red" navBarcolor="blue"

isLandscape=false	isLandscape=true

isLandscape=false	isLandscape=true

isLandscape=false	isLandscape=true
navBar="bhr"	navBar="bhr"

isLandscape=false	isLandscape=true

AndroidMockup, landscape only

isLandscape=false	isLandscape=true
none

• IPhoneMockup
• IPadMockup

All props not mentioned are default.
Props with the same name as props in AnroidMockup work the same way.

screenType	isLandscape=false	isLandscape=true
"island"
"notch"
"legacy"

All props not mentioned are default.
Props with the same name as props in AnroidMockup work the same way.

screenType	isLandscape=false	isLandscape=true
"modern"
"legacy"

MIT license