Add support for blur and focus on View

Summary:
As the title suggests: adds support strictly to `View` components on Android for `onFocus` and `onBlur` events. This is especially helpful for apps that respond to controller or remote inputs and aligns with existing support for the `focusable` prop.

In order to make this change cross-compatible with text inputs, `TextInputFocusEvent` has been deprecated in favor of the `BlurEvent`/`FocusEvent` types now available from core. Their type signatures are identical but `BlurEvent`/`FocusEvent` should be the type going forward for all views that intend to support focus/blur. Text inputs intentionally do not forward information about their state upon focus/blur and docs specifically call out `onEndEditing` as a means of reading state synchronously when blurring. Therefore, the changes to the native side to remove the event type specifically for text inputs is not breaking.

Changelog: [Android][Added] - Support for `onFocus` and `onBlur` function calls in `View` components

Differential Revision: D75238291

Author: Abbondanzo

packages/react-native/Libraries/Components/TextInput/TextInput.d.ts

@@ -17,6 +17,8 @@ import {
 import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
 import {TextStyle} from '../../StyleSheet/StyleSheetTypes';
 import {
+  BlurEvent,
+  FocusEvent,
   NativeSyntheticEvent,
   NativeTouchEvent,
   TargetedEvent,
@@ -455,7 +457,7 @@ export interface TextInputAndroidProps {
 }
 
 /**
- * @deprecated Use `TextInputFocusEvent` instead
+ * @deprecated Use `FocusEvent` instead
  */
 export interface TextInputFocusEventData extends TargetedEvent {
   text: string;
@@ -464,6 +466,7 @@ export interface TextInputFocusEventData extends TargetedEvent {
 
 /**
  * @see TextInputProps.onFocus
+ * @deprecated Use `FocusEvent` instead
  */
 export type TextInputFocusEvent = NativeSyntheticEvent<TextInputFocusEventData>;
 
@@ -809,8 +812,11 @@ export interface TextInputProps
 
   /**
    * Callback that is called when the text input is blurred
+   *
+   * Note: If you are trying to find the last value of TextInput, you can use the `onEndEditing`
+   * event, which is fired upon completion of editing.
    */
-  onBlur?: ((e: TextInputFocusEvent) => void) | undefined;
+  onBlur?: ((e: BlurEvent) => void) | undefined;
 
   /**
    * Callback that is called when the text input's text changes.
@@ -859,7 +865,7 @@ export interface TextInputProps
   /**
    * Callback that is called when the text input is focused
    */
-  onFocus?: ((e: TextInputFocusEvent) => void) | undefined;
+  onFocus?: ((e: FocusEvent) => void) | undefined;
 
   /**
    * Callback that is called when the text input selection is changed.

packages/react-native/Libraries/Components/TextInput/TextInput.flow.js

@@ -10,6 +10,8 @@
 
 import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {
+  BlurEvent,
+  FocusEvent,
   GestureResponderEvent,
   NativeSyntheticEvent,
   ScrollEvent,
@@ -58,22 +60,22 @@ type TextInputContentSizeChangeEventData = $ReadOnly<{
 export type TextInputContentSizeChangeEvent =
   NativeSyntheticEvent<TextInputContentSizeChangeEventData>;
 
-type TargetEvent = $ReadOnly<{
-  target: number,
-  ...
-}>;
-
-type TextInputFocusEventData = TargetEvent;
-
 /**
  * @see TextInputProps.onBlur
+ * @deprecated Use `BlurEvent` instead.
  */
-export type TextInputBlurEvent = NativeSyntheticEvent<TextInputFocusEventData>;
+export type TextInputBlurEvent = BlurEvent;
 
 /**
  * @see TextInputProps.onFocus
+ * @deprecated Use `FocusEvent` instead.
  */
-export type TextInputFocusEvent = NativeSyntheticEvent<TextInputFocusEventData>;
+export type TextInputFocusEvent = FocusEvent;
+
+type TargetEvent = $ReadOnly<{
+  target: number,
+  ...
+}>;
 
 export type Selection = $ReadOnly<{
   start: number,

packages/react-native/Libraries/Components/TextInput/TextInput.js

@@ -11,7 +11,9 @@
 import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {____TextStyle_Internal as TextStyleInternal} from '../../StyleSheet/StyleSheetTypes';
 import type {
+  BlurEvent,
   GestureResponderEvent,
+  FocusEvent,
   ScrollEvent,
 } from '../../Types/CoreEventTypes';
 import type {
@@ -86,10 +88,12 @@ if (Platform.OS === 'android') {
 
 export type {
   AutoCapitalize,
+  BlurEvent,
   EnterKeyHintType,
   EnterKeyHintTypeAndroid,
   EnterKeyHintTypeIOS,
   EnterKeyHintTypeOptions,
+  FocusEvent,
   InputModeOptions,
   KeyboardType,
   KeyboardTypeAndroid,
@@ -520,14 +524,14 @@ function InternalTextInput(props: TextInputProps): React.Node {
     });
   };
 
-  const _onFocus = (event: TextInputFocusEvent) => {
+  const _onFocus = (event: FocusEvent) => {
     TextInputState.focusInput(inputRef.current);
     if (props.onFocus) {
       props.onFocus(event);
     }
   };
 
-  const _onBlur = (event: TextInputBlurEvent) => {
+  const _onBlur = (event: BlurEvent) => {
     TextInputState.blurInput(inputRef.current);
     if (props.onBlur) {
       props.onBlur(event);

packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts

@@ -12,7 +12,12 @@ import {Insets} from '../../../types/public/Insets';
 import {GestureResponderHandlers} from '../../../types/public/ReactNativeRenderer';
 import {StyleProp} from '../../StyleSheet/StyleSheet';
 import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
-import {LayoutChangeEvent, PointerEvents} from '../../Types/CoreEventTypes';
+import {
+  BlurEvent,
+  FocusEvent,
+  LayoutChangeEvent,
+  PointerEvents,
+} from '../../Types/CoreEventTypes';
 import {Touchable} from '../Touchable/Touchable';
 import {AccessibilityProps} from './ViewAccessibility';
 
@@ -76,6 +81,20 @@ export interface ViewPropsIOS extends TVViewPropsIOS {
 }
 
 export interface ViewPropsAndroid {
+  /**
+   * Callback that is called when the view is blurred.
+   *
+   * Note: This will only be called if the view is focusable.
+   */
+  onBlur?: ((e: BlurEvent) => void) | null | undefined;
+
+  /**
+   * Callback that is called when the view is focused.
+   *
+   * Note: This will only be called if the view is focusable.
+   */
+  onFocus?: ((e: FocusEvent) => void) | null | undefined;
+
   /**
    * Whether this view should render itself (and all of its children) into a single hardware texture on the GPU.
    *

packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -111,6 +111,18 @@ const bubblingEventTypes = {
       bubbled: 'onClick',
     },
   },
+  topBlur: {
+    phasedRegistrationNames: {
+      captured: 'onBlurCapture',
+      bubbled: 'onBlur',
+    },
+  },
+  topFocus: {
+    phasedRegistrationNames: {
+      captured: 'onFocusCapture',
+      bubbled: 'onFocus',
+    },
+  },
 };
 
 const directEventTypes = {

packages/react-native/Libraries/Types/CoreEventTypes.d.ts

@@ -248,6 +248,10 @@ export interface TargetedEvent {
   target: number;
 }
 
+export type BlurEvent = NativeSyntheticEvent<TargetedEvent>;
+
+export type FocusEvent = NativeSyntheticEvent<TargetedEvent>;
+
 export interface PointerEvents {
   onPointerEnter?: ((event: PointerEvent) => void) | undefined;
   onPointerEnterCapture?: ((event: PointerEvent) => void) | undefined;

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -2672,13 +2672,12 @@ type TextInputContentSizeChangeEventData = $ReadOnly<{
 }>;
 export type TextInputContentSizeChangeEvent =
   NativeSyntheticEvent<TextInputContentSizeChangeEventData>;
+export type TextInputBlurEvent = BlurEvent;
+export type TextInputFocusEvent = FocusEvent;
 type TargetEvent = $ReadOnly<{
   target: number,
   ...
 }>;
-type TextInputFocusEventData = TargetEvent;
-export type TextInputBlurEvent = NativeSyntheticEvent<TextInputFocusEventData>;
-export type TextInputFocusEvent = NativeSyntheticEvent<TextInputFocusEventData>;
 export type Selection = $ReadOnly<{
   start: number,
   end: number,

packages/react-native/ReactAndroid/api/ReactAndroid.api

@@ -4906,6 +4906,17 @@ public abstract interface class com/facebook/react/uimanager/events/BatchEventDi
 	public abstract fun onBatchEventDispatched ()V
 }
 
+public final class com/facebook/react/uimanager/events/BlurEvent : com/facebook/react/uimanager/events/Event {
+	public static final field Companion Lcom/facebook/react/uimanager/events/BlurEvent$Companion;
+	public static final field EVENT_NAME Ljava/lang/String;
+	public fun <init> (II)V
+	public fun canCoalesce ()Z
+	public fun getEventName ()Ljava/lang/String;
+}
+
+public final class com/facebook/react/uimanager/events/BlurEvent$Companion {
+}
+
 public final class com/facebook/react/uimanager/events/ContentSizeChangeEvent : com/facebook/react/uimanager/events/Event {
 	public fun <init> (III)V
 	public fun <init> (IIII)V
@@ -4971,6 +4982,17 @@ public abstract interface class com/facebook/react/uimanager/events/EventDispatc
 	public abstract fun onEventDispatch (Lcom/facebook/react/uimanager/events/Event;)V
 }
 
+public final class com/facebook/react/uimanager/events/FocusEvent : com/facebook/react/uimanager/events/Event {
+	public static final field Companion Lcom/facebook/react/uimanager/events/FocusEvent$Companion;
+	public static final field EVENT_NAME Ljava/lang/String;
+	public fun <init> (II)V
+	public fun canCoalesce ()Z
+	public fun getEventName ()Ljava/lang/String;
+}
+
+public final class com/facebook/react/uimanager/events/FocusEvent$Companion {
+}
+
 public final class com/facebook/react/uimanager/events/NativeGestureUtil {
 	public static final field INSTANCE Lcom/facebook/react/uimanager/events/NativeGestureUtil;
 	public static final fun notifyNativeGestureEnded (Landroid/view/View;Landroid/view/MotionEvent;)V
@@ -6779,9 +6801,12 @@ public class com/facebook/react/views/view/ReactViewManager : com/facebook/react
 	public static final field Companion Lcom/facebook/react/views/view/ReactViewManager$Companion;
 	public static final field REACT_CLASS Ljava/lang/String;
 	public fun <init> ()V
+	public synthetic fun addEventEmitters (Lcom/facebook/react/uimanager/ThemedReactContext;Landroid/view/View;)V
+	protected fun addEventEmitters (Lcom/facebook/react/uimanager/ThemedReactContext;Lcom/facebook/react/views/view/ReactViewGroup;)V
 	public synthetic fun createViewInstance (Lcom/facebook/react/uimanager/ThemedReactContext;)Landroid/view/View;
 	public fun createViewInstance (Lcom/facebook/react/uimanager/ThemedReactContext;)Lcom/facebook/react/views/view/ReactViewGroup;
 	public fun getCommandsMap ()Ljava/util/Map;
+	public fun getExportedCustomBubblingEventTypeConstants ()Ljava/util/Map;
 	public fun getName ()Ljava/lang/String;
 	public fun nextFocusDown (Lcom/facebook/react/views/view/ReactViewGroup;I)V
 	public fun nextFocusForward (Lcom/facebook/react/views/view/ReactViewGroup;I)V

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/events/BlurEvent.kt

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.uimanager.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+
+/** Represents a View losing focus */
+public class BlurEvent(surfaceId: Int, viewId: Int) : Event<BlurEvent>(surfaceId, viewId) {
+
+  override fun getEventName(): String = EVENT_NAME
+
+  override fun canCoalesce(): Boolean = false
+
+  protected override fun getEventData(): WritableMap {
+    return Arguments.createMap().apply { putInt("target", viewTag) }
+  }
+
+  public companion object {
+    public const val EVENT_NAME: String = "topBlur"
+  }
+}

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/events/FocusEvent.kt

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.uimanager.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+
+/** Represents a View gaining focus */
+public class FocusEvent(surfaceId: Int, viewId: Int) : Event<FocusEvent>(surfaceId, viewId) {
+
+  override fun getEventName(): String = EVENT_NAME
+
+  override fun canCoalesce(): Boolean = false
+
+  protected override fun getEventData(): WritableMap {
+    return Arguments.createMap().apply { putInt("target", viewTag) }
+  }
+
+  public companion object {
+    public const val EVENT_NAME: String = "topFocus"
+  }
+}