Development

This topic describes how to debug the panel of a product.

Prerequisites

• The development environment is built.
• The product is created.
• The project is initialized.
• The host and the mobile phone are connected to the same Wi-Fi network for debugging.

Procedure

• Debugging in iOS

  1. Log in to the RN Panel Dev app.
  2. Click RN Debug at the bottom.
  3. Configure RN debugging parameters.
     1. Click the switch button at the top to enable the RN debugging function.
     2. Configure debugging information.
        • Product ID: The PID of the product to be debugged. View the PID information on the Smart Products page of the Tuya IoT Platform.
        • Debugging IP address: The IP address of the network to which the device for debugging is connected.
        • Debugging port: Adjust the port number of the device. The port number is 8081 by default.
        • Bundle name: The name of the local Bundle. The name is index.ios.bundle by default.
  4. Go back to the homepage of the RN Panel Dev app and click to select a panel.
  5. Shake the mobile phone, select Reload in the dialog box, and then load the local resource package.
  6. (Optional) You can view the debugging log and enable Hot Reloadingby shaking the mobile phone.

• Debugging in Android

  1. Scan the QR code of the RN Panel Dev app to install the RN Panel Dev app.
  2. Configure the debugging tool.
     1. Find and log in to com.ty.panel.dev application.
        com.ty.panel.dev is installed at the same time when the RN Panel Dev app is installed.

     2. Enter the IP address of the host and tap Confirm.
     3. Tap Enable RN debugging mode to start debugging.
        
  3. Debug the panel.
     1. Register and log in to the RN Panel Dev app.
     2. Scan the QR code of the created product panel to add a virtual device. For more information about getting the QR code of a virtual device, see Select the device panel.
     3. In the RN Panel Dev app, log in to the specified panel interface.
     4. Shake the mobile phone, select Reload in the dialog box, and then load the local resource package.
        
     5. (Optional) You can view the debugging log and enable Hot Reloadingby shaking the mobile phone.

Operation result

The following figure shows the successful panel debugging based on examples/basic.