Preview

The Preview Button lets you see your app in action inside RapidNative. Instead of looking at static screens on the canvas, you can focus on each screen individually, test navigation, and check how your app will appear across different devices.

Video Tutorial

How Preview Works

RapidNative's browser preview is powered by browser-metro, an open-source client-side bundler for Expo projects that runs entirely in your browser, with no Node.js required. It's the same technology behind the reactnative.run playground, where you can experiment with React Native code directly in the browser.

What happens in Preview Mode

• Each screen is showcased independently in focus

• You can toggle between screens from the upper-right column, where screen names are listed

• Preview how your app looks on different device sizes:

  • iPhones
  • iPad & tablets
  • Google Pixel
  • Samsung Galaxy
• Interact with navigation and basic flows like a real app

Why preview matters

1. Spot design issues before exporting full code
2. Validate navigation and flow connections
3. Check responsiveness across devices
4. Share a convincing demo with teammates or stakeholders

How to use Preview

Example workflow

• You’ve created login, dashboard, and settings screens.

• Open Preview Mode:

  • See the login screen in focus on iPhone view
  • Toggle to dashboard and test layout on Pixel view
  • Switch to iPad view to check spacing on the settings screen