IPA: Debugging React Native iOS 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 IPA files to debug an iOS application.
Pre-requisites
- A Mac book with the latest Mac OS.
- iPhone with iOS 13 or later
- Chrome or Firefox browser
Installation
- Install Expo
npm install -g expo-cli
- Install React Native
npm install -g react-native
- Install React Dev Tools
npm install -g react-devtools
- Install
wm-reactnative-cli
npm install -g @wavemaker/wm-reactnative-cli
Preparing for Debugging an iOS App
- Ensure the iPhone is connected to your system with a USB.
- Export and download the React Native zip from WaveMaker Studio.
- Perform an iOS build using wm-reactnative-cli.
- Open
${build_destination}/ios
folder. - Open the file with workspace as an extension in Xcode.
- Connect your iPhone to the Mac.
- Select your iPhone or simulator and click on the Build button.
Step-by-step Instructions
tip
The following procedure is the same for Android and iOS apps.
- Shake the phone until the following screen pops up.
- 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.
- Open developer tools on this page. You can perform JS debugging.
- 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.
- Click on Reload app on the above page.
- Now, react-devtools should show the component tree.