Event Bubbling in the Native Layer

In this lesson, you will learn how a user’s physical touch on a screen travels from the raw native platform up to your JavaScript event handlers.

The Journey of a Touch

When a user taps their screen, the event doesn’t start in JavaScript; it begins deep within the native operating system (iOS or Android). The native side—specifically the UIKit on iOS or the View system on Android—intercepts the touch first.

Because React Native renders real native views, it leverages the platform's native Responder Chain. If you have a View nested inside another View, the native layer determines which component was touched first. This is where Event Bubbling happens at the native level: the touch event starts at the deepest child view and "bubbles up" to its parent views if the child doesn't handle the event itself.

From Native to JS

Once the native layer identifies the target, it doesn't immediately run your JavaScript code. Instead, it must communicate across the boundary. Because of the architectural lessons we’ve covered, you know this involves:

1. Native Interception: The native view receives the touch and triggers a native-level event.
2. Event Serialization: The event details (like coordinates or IDs) are packaged into a format that can cross the boundary.
3. The Bridge (or JSI): The event is sent to the JavaScript thread.
4. JS Callback: React Native matches the native event to the corresponding onPress or onTouch prop you defined in your code.

Consider this nested structure:

<View onStartShouldSetResponder={() => true}>
  <TouchableOpacity onPress={() => console.log('Child pressed!')}>
    <Text>Click Me</Text>
  </TouchableOpacity>
</View>

In the native layer, the TouchableOpacity component consumes the touch event. If it decides to handle it, the propagation stops. If it doesn't, the event continues to bubble up through the native view hierarchy, potentially triggering events on the parent View. React Native manages this by mimicking the native bubbling behavior so that your JavaScript logic behaves just like a traditional native application.

Key Takeaway: Event bubbling occurs natively within the platform’s view hierarchy before being serialized and sent across to the JavaScript thread to trigger your component's handlers.