react / react/react-native

[Android][0.84.1] TouchableOpacity only receives onPress on text area after disabled-to-enabled transition

Đang mở
#56,777 7 bình luận 1 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Component: TouchableOpacity Needs: Triage :mag: Platform: Android
Ngôn ngữ chính
C++
Star
127k
Fork
25.3k
Merge trung bình
1 ngày 23 giờ
Pull request đã merge (30 ngày)
4

Mô tả

Description

TouchableOpacity only receives onPress on text area after disabled-to-enabled transition

Description

After upgrading from React Native 0.81.3 to 0.84.1, in one custom button component (TouchableOpacity enabled only when disabled is false), button becomes partially non-interactive on Android.

The button works as expected when initially disabled.
After filling inputs and the button becomes enabled, only the <Text> area inside the button is clickable.
The rest of the button area (left/right empty space / padded area) does not trigger onPress.

This did not happen in RN 0.81.3.

I could not reproduce this behavior in Expo Snack. This appears to be tied to our native app codepath in 0.84.1.

Expected behavior:
Full button area should be tappable when enabled (same as 0.81.3), not just text area.

Actual behavior:
After enabled state transition, tap target is reduced to the text node area.

Affected Platforms

Android (emulator and physical device).

Steps to reproduce

Steps to reproduce

  1. Render a button that conditionally renders:
    • disabled/loading: <View ...>{...button content...}</View>
    • enabled: <TouchableOpacity ...>{...same content...}</TouchableOpacity>
  2. Include non-text areas in content (for example leftComponent and/or rightComponent), not only text.
  3. Start with disabled = true.
  4. Enter input values so button becomes enabled.
  5. On Android, tap multiple times on text area and on left/right empty areas.
  6. Observe: only text area fires onPress, non-text areas do not.
React Native Version

0.84.1

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info
System:
  OS: macOS 26.4.1
  CPU: (11) arm64 Apple M3 Pro
  Memory: 426.92 MB / 36.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 25.9.0
    path: ~/.nvm/versions/node/v25.9.0/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 11.12.1
    path: ~/.nvm/versions/node/v25.9.0/bin/npm
  Watchman:
    version: 2024.12.02.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/--/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.2
      - iOS 26.2
      - macOS 26.2
      - tvOS 26.2
      - visionOS 26.2
      - watchOS 26.2
  Android SDK:
    API Levels:
      - "28"
      - "31"
      - "35"
      - "36"
    Build Tools:
      - 30.0.2
      - 34.0.0
      - 35.0.0
      - 36.0.0
    System Images:
      - android-33 | Google Play ARM 64 v8a
      - android-35 | Google APIs ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
      - android-36 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2025.3 AI-253.32098.37.2534.15336583
  Xcode:
    version: 26.2/17C52
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.12
    path: /usr/bin/javac
  Ruby:
    version: 2.7.5
    path: /Users/--/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.1.0
    wanted: 20.1.0
  react:
    installed: 19.2.3
    wanted: 19.2.3
  react-native:
    installed: 0.84.1
    wanted: 0.84.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true
Stacktrace or Logs
No crash. No stacktrace. Pure touch/interaction issue.
MANDATORY Reproducer

https://snack.expo.dev/@zehragunes/awkward-orange-soylent

Screenshots and Videos

https://github.com/user-attachments/assets/4749df92-3ae6-4a00-abec-3022b286b8e6

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Bắt đầu với luồng xử lý thao tác chạm trên Android của TouchableOpacity và tái hiện quá trình chuyển từ bị vô hiệu hóa sang được bật bằng pattern của component và Expo Snack bắt buộc được liên kết trong issue. So sánh hành vi giữa React Native 0.81.3 và 0.84.1, bao gồm các lần chạm vào văn bản và các vùng có padding ở bên trái/phải; hoàn tất khi toàn bộ vùng button ở trạng thái enabled kích hoạt onPress.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
android, react-native
Lĩnh vực
mobile
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
45/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.