Recording and Showcasing React Native Apps with 3D Device Mockups

React Native lets you ship a single codebase to both iOS and Android, but when it comes time to show off your work, a flat screen recording rarely does the app justice. Whether you are pitching investors, publishing to the App Store and Play Store, or updating your GitHub README, a polished demo video wrapped in a realistic device frame instantly communicates quality. This guide walks through every step: recording your React Native app on simulators, emulators, and real devices, then wrapping the footage in cinematic 3D mockups with SmoothCapture.

Why Demo Videos Matter for React Native Apps

React Native's biggest selling point is cross-platform reach, yet most developers only share static screenshots on their project pages. A short, well-produced demo video unlocks several advantages:

• Cross-platform proof. Show the same app running on an iPhone and a Pixel side by side. Nothing demonstrates "write once, run everywhere" more convincingly than seeing both platforms in action.
• App Store and Play Store listings. Apple allows up to three preview videos per localization, and Google Play supports a promotional video. A device-framed recording meets both store guidelines while looking professional.
• GitHub and portfolio projects. An embedded GIF or video in a README file can be the difference between a user trying your library and scrolling past it.
• Social media and marketing. Short device-framed clips perform well on Twitter/X, LinkedIn, and Product Hunt launches, giving your app immediate visual credibility.

If you are building with React Native, you already value efficiency. The workflow below is designed with that same mindset: minimal setup, maximum visual impact.

Recording React Native on iOS Simulator

The iOS Simulator that ships with Xcode is the most common way to test React Native apps on macOS. It is also the easiest target for high-quality screen recording, because the Simulator window maps directly to a real device resolution.

Step-by-step workflow

1. Launch your app in the Simulator. Run npx react-native run-ios or yarn ios from your project root. Pick the device model that matches the frame you want (for example, iPhone 15 Pro).
2. Resize the Simulator window. Use Window > Physical Size (or press Cmd+1) so the Simulator renders at the exact device resolution. This avoids upscaling artifacts later.
3. Open SmoothCapture and select the Simulator window. SmoothCapture detects the Simulator as a recording source and can capture just that window, without desktop clutter or the Simulator chrome.
4. Enable a device frame. In the SmoothCapture recording panel, pick an iPhone frame that matches your Simulator model. The frame wraps around your footage in real time so you can preview exactly what the final video looks like. Read more about 3D device frames.
5. Record your demo. Walk through the key flows of your app. SmoothCapture captures at 60 fps with smooth cursor tracking, so gestures look natural even in a simulated environment.

For a deeper dive on iOS recording options, see the iOS and iPad recording feature page.

Recording React Native on Android Emulator

The Android Emulator from Android Studio works just as well as a recording target. A few extra considerations apply because the emulator window includes its own toolbar and virtual navigation buttons.

1. Start the emulator. Run npx react-native run-android or launch an AVD (Android Virtual Device) from Android Studio. Choose a Pixel device image so the resolution aligns with a frame you plan to use.
2. Hide the emulator toolbar. In the emulator's extended controls, you can toggle off the side toolbar to get a cleaner capture area. Alternatively, SmoothCapture's window-capture mode lets you crop to just the device screen.
3. Select the emulator window in SmoothCapture. Choose the Android Emulator window as your source. SmoothCapture will detect the window bounds automatically.
4. Apply an Android device frame. Pick a Pixel or Galaxy frame from the SmoothCapture library. The frame renders around the emulator content in real time, just like it does for iOS.
5. Record and interact. Navigate through your app. If your app has platform-specific UI (like Material Design bottom sheets), this is the moment to highlight those differences compared to the iOS version.

Because React Native renders to native views on each platform, animations and transitions look authentic in the emulator. There is no additional performance overhead from recording with SmoothCapture running alongside.

Expo Go: Recording Tips

If your project uses Expo, the recording workflow is nearly identical, but there are a few Expo-specific details worth noting.

• Expo Go vs. development build. Expo Go displays a status bar banner and occasionally shows the Expo developer menu. For a clean recording, use a expo prebuild development build or an EAS build, which removes Expo Go branding entirely.
• Hot reload flicker. If you are iterating on the UI during recording, the Fast Refresh overlay can flash on screen. Disable it temporarily by shaking the device (or pressing Cmd+D in the Simulator) and toggling Fast Refresh off.
• Expo Router deep links. If your app uses Expo Router, you can start the recording on a specific screen by navigating to it via a deep link before hitting record, saving time on editing later.
• Environment banners. Some Expo templates show a "Development" or "Preview" banner at the top of the screen. Build a production or preview variant (eas build --profile preview) to remove these before recording.

Once you have a clean build running in the Simulator or emulator, the SmoothCapture recording steps are exactly the same as described in the sections above.

Real Device Recording via USB

Sometimes you want to show the app on actual hardware, whether to demonstrate real-world performance, capture haptic-driven animations, or simply use a physical device that is already set up with test data. SmoothCapture supports recording a connected iPhone directly over USB.

How it works

1. Connect your iPhone via USB. Plug the device into your Mac with a Lightning or USB-C cable. Trust the computer if prompted.
2. Open SmoothCapture and select the device. SmoothCapture detects connected iOS devices and lists them as available recording sources alongside Simulator windows and Mac displays.
3. Choose a matching device frame. Since you are recording a real iPhone, pick the frame model that corresponds to the physical device (iPhone 15 Pro, iPhone SE, etc.) for pixel-perfect alignment.
4. Record your session. Interact with the physical device while SmoothCapture mirrors the screen in real time. The resulting video is wrapped in the 3D frame, ready for export.

Real-device recording is especially useful for showcasing features that require hardware access, such as camera-based AR screens, NFC interactions, or animations that rely on the device's ProMotion 120 Hz display. For Android, you can mirror the device screen using scrcpy and then record the mirrored window with SmoothCapture.

Wrapping in 3D Device Frames

The core advantage of SmoothCapture for React Native developers is real-time 3D device framing. Unlike post-processing tools that composite a frame on top of a flat video after the fact, SmoothCapture renders the device mockup as you record, giving you instant visual feedback and pixel-perfect alignment.

Why this matters for cross-platform demos

• Consistent branding. When you show your React Native app on both an iPhone and a Pixel, using matching 3D frames from the same tool ensures the lighting, shadow, and perspective are visually consistent across both clips.
• No manual compositing. Traditional workflows require exporting a raw recording, importing it into After Effects or Motion, aligning it inside a mockup layer, and rendering again. SmoothCapture collapses that into a single step.
• Rotation and perspective control. SmoothCapture lets you adjust the angle and rotation of the 3D device frame, so you can create hero shots with a slight tilt or dynamic perspective changes during the recording.

For a broader look at demo-video strategies for mobile developers, see the Mobile Developer's Guide to App Demo Videos. If you also work with Flutter, the Flutter app demo video guide covers a parallel workflow.

Editing & Publishing Your Demo

Once you have your raw recordings wrapped in device frames, a few finishing touches turn them into a professional demo.

Trimming

SmoothCapture includes a built-in trimmer. Cut the dead air at the beginning and end of the clip, remove any accidental navigations, and tighten transitions between screens. Keeping each clip under 30 seconds is a good rule of thumb for social media; App Store previews allow up to 30 seconds as well.

Text overlays and callouts

Add brief text annotations to highlight specific features as they appear on screen. For example, overlay "Offline sync" as the user toggles airplane mode, or "Biometric login" when Face ID triggers. These callouts make the video self-explanatory even without audio.

Exporting

SmoothCapture exports to MP4 (H.264 or H.265), GIF, and WebM. Recommended settings for each destination:

• App Store / Play Store: MP4, H.264, 30 fps, matching the device resolution. Apple requires specific resolutions per device class.
• GitHub README: GIF for inline playback, or MP4 hosted on GitHub Releases. Keep GIFs under 10 MB for fast loading.
• Twitter/X and LinkedIn: MP4, 1080p, under 2 minutes 20 seconds. A square (1:1) or 4:5 crop performs best in mobile feeds.
• Product Hunt and landing pages: MP4 or WebM, embedded with an autoplay loop. WebM offers smaller file sizes for web use.

Side-by-side cross-platform showcase

One of the most effective formats for React Native projects is a side-by-side video with the iOS version on the left and the Android version on the right. Record each platform separately in SmoothCapture with matching device frames, then combine them in any video editor or use SmoothCapture's export to produce two clips that can be placed next to each other in a presentation or web page.

Wrapping up

React Native gives you the power to build for both platforms from one codebase. Your demo videos should reflect that same efficiency. By recording the iOS Simulator, Android Emulator, or a real device with SmoothCapture and wrapping each clip in a matching 3D device frame, you produce professional, store-ready videos in a fraction of the time a traditional compositing workflow would take.

Download SmoothCapture and turn your next React Native build into a demo that looks as good as the app itself.