WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • Mobile
  • How-to
  • Enterprise
  • Releases
  • Blog
  • Sign-in

›React Native

Mobile Development

  • React Native or Cordova

React Native

  • Welcome
  • Features
  • Supported Widgets
  • Supported Variables
  • Test Run Preview
  • Debug Web Preview
  • Inspection Framework
  • Mobile Preview
  • Styles
  • Theme
  • Export as Zip
  • Build Installers
  • Debug APK
  • Debug IPA

Cordova

  • Building Hybrid Mobile Apps
  • Native Device Support
  • First Mobile App
  • Mobile Design

    • Mobile Page Design
    • Gesture Support
    • Mobile Tabbar
    • Mobile Navbar

    Mobile Installer

    • Test Run (Preview)
    • Debugging Mobile Apps
    • Test via Live Sync
    • Testing Hybrid Mobile Apps using WaveLens
    • Mobile Build - Android
    • Generating iOS and Android Distribution Certificates
    • Export Cordova zip
    • Mobile Build - Manual
    • Mobile Build - AppChef

    Mobile Integrations

    • Mobile Integrations - Amazon Mobile Analytics
    • Mobile Integrations - Amazon SNS
    • Using Push Notifications in Mobile Device
    • Invoking Web App APIs in Mobile Apps

    Offline Features

    • Offline Data Support
    • Implementation
    • Switching between Offline and Online Mode
Edit

APK: Debugging React Native Android App Installed in Mobile


You can install a WaveMaker-developed React Native app on your mobile device and debug the application. In this document, we use APK files to debug an Android application.

Pre-requisites

  1. A laptop or desktop with Linux, Windows, or macOS is recommended with the latest OS installed.
  2. Android phones with Android Marshmallow 6 or later are supported.
  3. Chrome or Firefox browser

Installation

  1. Install Expo
npm install -g expo-cli
  1. Install React Native
npm install -g react-native
  1. Install React Dev Tools
npm install -g react-devtools
  1. Install wm-reactnative-cli
npm install -g @wavemaker/wm-reactnative-cli

Preparing for Debugging Android App

  1. Ensure that the Android phone is connected to your system with a USB.
  2. Execute adb devices and check whether your phone is in the command output.
  3. Execute adb reverse tcp:8081 tcp:8081; this for debugger.
  4. Execute adb reverse tcp:8097 tcp:8097; this is for React Dev Tools.
  5. Export and download the React Native zip from WaveMaker Studio.
  6. Build apk using wm-reactnative-cli.
  7. Navigate to the build destination, including parent of the output folder in a terminal.
  8. Execute react-native run-android at the build folder.
  9. Follow the procedural steps mentioned below.

Step-by-step Instructions

tip

The following procedure is the same for Android and iOS apps.

  1. Shake the phone until the following screen pops out.

expo developer menu

  1. In the developer menu, click on the Debug Remote JS option to debug the JavaScript of the app. The following window should open in the Chrome browser.

debugger-ui

  1. Open developer tools on this page. You can perform JS debugging.
  2. Execute react-devtools on a terminal.
note

If the installed react-devtools are incompatible, install the suggested tools when the react-devtools are opened and follow this step again.

  1. Click on Reload app on the above page.
  2. Now, react-devtools should show the component tree.

React Dev Tools

Last updated on 9/8/2022 by Srinivasa Rao Boyina
← Build InstallersDebug IPA →
  • Pre-requisites
    • Installation
  • Preparing for Debugging Android App
  • Step-by-step Instructions
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.