Home Definitions Visual labeling Define events with visual labeling (React Native)

Table of Contents

Was this article helpful?

Yes No

Thank you for your feedback!

Define events with visual labeling (React Native)

In this article you'll learn:

  • A walkthrough of how to use visual labeling to define React Native events
  • Best practices, examples, and steps to troubleshoot common errors

Overview

If you are running React Native SDK version 0.19.0 and above, you can define React Native events via the iOS or Android visual labeling. This gives you access to the React Native hierarchy, which is the primary property for defining events. This allows you to refine touch, edit, and page transition event definitions via the tree of events in the hierarchy.

Pairing a Device or Emulator

To pair your device or emulator with visual labeling, navigate to the visual labeling page in Heap, then click the iOS or Android tab, depending on the device you are testing. Follow the steps on that page to pair your device or emulator.

More detailed pairing instructions can also be found on the iOS and Android tabs of this document.

To pair visual labeling using an iOS QR code, you must complete the installation steps in Enable visual labeling pairing from the iOS Installation Guide.

Note: new screenshot coming soon with the visual labeling interface

You’ll see your device pop up on the left, with all of the corresponding app interactions you can use as event definitions in the middle pane. When you click on an event, options to define that event will appear on the right.

Defining Events

When defining touch, edit, and page transition events, the React Native hierarchy will appear in the Select Target pane. Feel free to click around on elements in the hierarchy to further refine your event definition.

Note: new screenshot coming soon with the visual labeling interface

When you’re ready to define your event, click the Define Event button further down the page. Once the event is defined, you can confirm that matching is happening properly in the Live View, or by analyzing the event from the Events view.

Information about how to use hierarchies in event definitions is available  Managing React Native Event Definitions.