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

[zhrgns]

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

Screen.Recording.2026-05-12.at.11.49.26.mov

[lucyb0207]

I can reproduce this on RN 0.84.1 Android as described.

It looks like the touch target is not fully updating after a View → TouchableOpacity transition when disabled flips to false. The native hit region seems to only apply to the Text subtree, while the surrounding layout is no longer part of the Pressability hitbox.

This might be related to Pressability not recalculating layout bounds after a component type swap (or missing invalidation after re-attaching touchable behavior).

I can try investigating the Android Pressability / TouchableOpacity update path if no one is already working on it. Would it help if I start by looking at:
-Pressability.js layout update / hitSlop recalculation
-TouchableOpacity wrapper re-init on prop/state transition

Happy to help debug this further.

[nexquery]

TouchableOpacity yerine Pressable kullanmayı denediniz mi?
Çünkü genelde Pressable kullanımı öneriliyor.

[zhrgns]

@nexquery @lucyb0207 Thanks for checking.

We also tested replacing TouchableOpacity with Pressable, but there are a couple of blockers for us right now:

• This exact implementation was working correctly on previous RN versions (0.81.3). The regression only started after upgrading to 0.84.1.
• We also found that the issue disappears if we wrap all TouchableOpacity children inside a single parent <View> (instead of passing sibling children directly). So the touch area itself can still work correctly in 0.84.1 under certain structures.
• However, applying that workaround across the codebase would create a very high maintenance/regression cost for us. We would need to refactor and regression test roughly 200–300 files because this button pattern is used widely in the app.
• For a quick mitigation, we tried Pressable, but it does not replicate the existing TouchableOpacity behavior cleanly for our use case. We rely on the built-in opacity feedback (activeOpacity) and currently want the press interaction/visual feedback to continue behaving through opacity changes exactly like TouchableOpacity.

[nexquery]

You can solve the opacity problem this way or with a small component.

<Pressable style={({ pressed }) => ({ opacity: pressed ? 0.7 : 1 })}>
    // ....
</Pressable>

Please provide a contact address so we can assist you in more detail.