onFocus not being called in Touchable* Android

[ayush547]

Description

onFocus is provided as a part of TouchableWithoutFeedback and is also inherited by other Touchables.

This callback is not being executed even when focus is being placed onto the touchable.

Tested with expo and rn-cli both on emulator and physical device.

Additionally, it would be nice to have focus events be applicable for all view in general on Android atleast, this would enable custom styling and a11y specific changes.

React Native Version

0.71.10

Output of npx react-native info

System: OS: Windows 10 10.0.22621 CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz Memory: 8.76 GB / 31.71 GB Binaries: Node: 18.5.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD npm: 8.12.1 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: AllowDevelopmentWithoutDevLicense: Enabled AllowAllTrustedApps: Enabled Versions: 10.0.19041.0 IDEs: Android Studio: AI-212.5712.43.2112.8609683 Visual Studio: 16.11.33801.447 (Visual Studio Community 2019) Languages: Java: 11.0.15 npmPackages: @react-native-community/cli: Not Found react: 18.2.0 => 18.2.0 react-native: ^0.71.0 => 0.71.10 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

Create a Touchable and verify focus callbacks on it using a hardware keyboard / mirror screen and use desktop keyboard for focus

Snack, code example, screenshot, or link to a repository

  <TouchableOpacity
    accessible={true}
    onPress={() => console.log('Pressed')}
    onFocus={() => console.log('Focused')}
    onBlur={() => console.log('Blurred')}
  >
    <Text>Button</Text>
  </TouchableOpacity>

Snack link - https://snack.expo.dev/@ayush547/touchableopacitybug

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.71.11. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	It looks like your issue is missing a reproducible example. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template

[ayush547]

Added snack link as well, again this issue is for Android

[Pranav-yadav]

Added snack link as well, again this issue is for Android

Thanks, Ayush for the repro. Someone will take a look into it. Also, did you check this on the latest patch?

[redpanda-bit]

Hey Ayush how exactly are you testing this?

[macstr1k3r]

@Pranav-yadav This is the issue: https://github.com/facebook/react-native/blob/1891d9e6470ef90dcfcf27ce05944737c235310e/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js#L216

https://github.com/facebook/react-native/blob/1891d9e6470ef90dcfcf27ce05944737c235310e/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js#L148

https://github.com/facebook/react-native/blob/1891d9e6470ef90dcfcf27ce05944737c235310e/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js#L282

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.