Skip to content

Commit

Permalink
Fix onPress event for nested Text in RN Android
Browse files Browse the repository at this point in the history
Summary:
This bug is caused by RNAndroid dispatching an incorrect sequence of events to JS when the user taps on a Text.

Taking into consideration the example P462662009, when the user taps of the "Inner" text, RN Android is dispatching three events:
topTouchStart, topTouchStart and topTouchEnd.

The information stored on the first two JS events is correct, but the problem is that it is duplicated. This sequence of events makes Pressability to dispatch the event to the incorrect target.

This was originally introduced in D3035589 (39fdce2) (2016)

In this diff I'm changing the way RN Android bubbles events when the user taps on a ReactTextView. From now on, events won't be bubbled anymore, and they will be handled by the ReactRootView.onInterceptTouchEvent: https://fburl.com/code/rbt8$

Additionally, I'm creating a FeatureFlag in case this change has a unknown side effect that's only detected in production.
I will create a MC for FB4A in the next diffs of the stack

changelog: [Fixed][Android] Fix onPress event for nested Text in RN Android

Reviewed By: javache

Differential Revision: D31628461

fbshipit-source-id: 177397d4369191a3c97e2f86e801757b27ee5121
  • Loading branch information
mdvacca authored and facebook-github-bot committed Oct 19, 2021
1 parent d5689b9 commit e494e4b
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -105,4 +105,7 @@ public static boolean isMapBufferSerializationEnabled() {
public static boolean useDispatchUniqueForCoalescableEvents = false;

public static boolean useUpdatedTouchPreprocessing = false;

/** TODO: T103427072 Delete ReactFeatureFlags.enableNestedTextOnPressEventFix */
public static boolean enableNestedTextOnPressEventFix = true;
}
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
import android.text.method.LinkMovementMethod;
import android.text.util.Linkify;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.Nullable;
Expand All @@ -31,6 +32,7 @@
import com.facebook.react.bridge.WritableArray;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.common.ReactConstants;
import com.facebook.react.config.ReactFeatureFlags;
import com.facebook.react.uimanager.PixelUtil;
import com.facebook.react.uimanager.ReactCompoundView;
import com.facebook.react.uimanager.UIManagerModule;
Expand Down Expand Up @@ -382,6 +384,16 @@ public int reactTagForTouch(float touchX, float touchY) {
return target;
}

@Override
public boolean onTouchEvent(MotionEvent ev) {
// The root view always assumes any view that was tapped wants the touch
// and sends the event to JS as such.
// We don't need to do bubbling in native (it's already happening in JS).
// For an explanation of bubbling and capturing, see
// http://javascript.info/tutorial/bubbling-and-capturing#capturing
return ReactFeatureFlags.enableNestedTextOnPressEventFix;
}

@Override
protected boolean verifyDrawable(Drawable drawable) {
if (mContainsImages && getText() instanceof Spanned) {
Expand Down

0 comments on commit e494e4b

Please sign in to comment.