Skip to main content
Version: v11.7.0

Preview React Native Apps in Mobile without Building Installers


Mobile app developers can web preview their apps using the Preview button. To see the complete app along with its native capabilities, developers have to build the installer (apk or ipa) for respective OS. This build step consumes 10 mins of developer time. To improve your productivity, we will be use Expo Go app to see an instant preview of the app without building the installer

Prerequisites

  1. For Windows, install Git Bash and use it as the terminal window.
  2. Install Node 18.16.1
  3. Install npm 9.5.1
  4. Install wm-reactnative-cli in your machine using below command
npm install -g @wavemaker/wm-reactnative-cli

Expo Go

Install Expo Go app on your mobile phone

  1. Playstore
  2. App Store

React Dev Tool

  • Install React Dev Tools
npm i -g react-devtools@4.26.0

Debugging Procedure

  1. Open the project and preview the application.
  2. Copy the preview URL. For example:
https://wavemakeronline.com/…../{Project_Name}
  1. Execute the following command in your machine terminal
wm-reactnative run expo ${APP_PREVIEW_URL}
  1. Once the command gets executed successfully, open http://localhost:19002/ in your chrome browser
  2. If you have Android, open the Expo Go app and scan the QR code that appears at the left bottom of http://localhost:19002/

expo portal

  1. If you have iOS, open the Safari browser in your iPhone and type the exp url that appears on bottom of the QR code. Expo Go will open automatically.

expo portal ios url

  1. When you shake the phone, the expo developer menu opens up. In the developer menu, click on Debug Remote JS option to debug the JavaScript of the app. You can stop debugging by tapping on the Stop Debug in developer menu. An active debugging session will make the app run slower.

expo developer menu

  1. Open http://localhost:19000/debugger-ui/ in your system. If there are many tabs with the same URL, close all except anyone.

React Debug Portal

  1. To view React Native component tree, execute react-devtools in terminal. Then reload the app in mobile from the developer menu.

React Dev Tools

Additional Resources

https://docs.expo.dev/workflow/debugging/