react-native-tvos 0.87.0-0 → 0.87.1-0

package/Libraries/Animated/AnimatedEvent.js

@@ -199,7 +199,7 @@ export class AnimatedEvent {
     this._attachedEvent && this._attachedEvent.detach();
   }
 
-  __getHandler(): any | ((...args: any) => void) {
+  __getHandler(): (...args: any) => void {
     if (this.__isNative) {
       if (__DEV__) {
         let validatedMapping = false;

package/Libraries/Animated/AnimatedImplementation.js

@@ -576,10 +576,14 @@ function unforkEventImpl(
   }
 }
 
-const eventImpl = function <T>(
+// NOTE: With `useNativeDriver: true` this returns an `AnimatedEvent` instance
+// rather than a callable handler. That object is only ever meant to be handed
+// straight back to an animated component's event prop, so the declared type
+// describes the handler shape both branches are consumed as.
+const eventImpl: <T>(
   argMapping: ReadonlyArray<?Mapping>,
   config: EventConfig<T>,
-): any {
+) => (...args: Array<any>) => void = function (argMapping, config): any {
   const animatedEvent = new AnimatedEvent(argMapping, config);
   if (animatedEvent.__isNative) {
     return animatedEvent;

package/Libraries/Animated/nodes/AnimatedNode.js

@@ -13,7 +13,7 @@ import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import invariant from 'invariant';
 
-type ValueListenerCallback = (state: {value: number, ...}) => unknown;
+export type ValueListenerCallback = (state: {value: number}) => unknown;
 
 export type AnimatedNodeConfig = Readonly<{
   debugID?: string,

package/Libraries/Animated/nodes/AnimatedValue.js

@@ -17,7 +17,7 @@ import type {
   InterpolationConfigType,
 } from './AnimatedInterpolation';
 import type AnimatedNode from './AnimatedNode';
-import type {AnimatedNodeConfig} from './AnimatedNode';
+import type {AnimatedNodeConfig, ValueListenerCallback} from './AnimatedNode';
 import type AnimatedTracking from './AnimatedTracking';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
@@ -138,7 +138,7 @@ export default class AnimatedValue extends AnimatedWithChildren {
     }
   }
 
-  addListener(callback: (value: any) => unknown): string {
+  addListener(callback: ValueListenerCallback): string {
     const id = super.addListener(callback);
     this._listenerCount++;
     if (this.__isNative) {

package/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js

@@ -55,6 +55,8 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     borderLeftColor: colorAttribute,
     snapToItemPadding: true,
     scrollAnimationEnabled: true,
+    scrollAnimationDuration: true,
+    scrollAnimationEasing: true,
     pointerEvents: true,
     scrollsChildToFocus: true,
   },

package/Libraries/Components/ScrollView/ScrollView.d.ts

@@ -754,6 +754,32 @@ export interface ScrollViewProps
    */
   scrollAnimationEnabled?: boolean | undefined;
 
+  /**
+   * (Android TV only)
+   * Duration in milliseconds of the animated scroll that runs when focus moves to
+   * another item. Applies to the snap scroll (`snapToAlignment="item"` with
+   * per-item `scrollSnapAlign`/`scrollSnapOffset` markers) and to animated
+   * `scrollTo` commands; other focus scrolls are instant. When unset or <= 0, the platform default (~250ms) is used.
+   * On tvOS the focus engine owns this animation and the prop has no effect.
+   */
+  scrollAnimationDuration?: number | undefined;
+
+  /**
+   * (Android TV only)
+   * Easing curve of that animation, either a CSS easing keyword or explicit
+   * cubic-bezier control points `[x1, y1, x2, y2]`. When unset, the platform
+   * default curve (`AccelerateDecelerateInterpolator`) is used.
+   * On tvOS the focus engine owns this animation and the prop has no effect.
+   */
+  scrollAnimationEasing?:
+    | 'linear'
+    | 'ease'
+    | 'ease-in'
+    | 'ease-out'
+    | 'ease-in-out'
+    | [number, number, number, number]
+    | undefined;
+
   /**
    * When true, shows a horizontal scroll indicator.
    */

package/Libraries/Components/ScrollView/ScrollView.js

@@ -45,6 +45,7 @@ import Keyboard from '../Keyboard/Keyboard';
 import TextInputState from '../TextInput/TextInputState';
 import View from '../View/View';
 import processDecelerationRate from './processDecelerationRate';
+import processScrollAnimationEasing from './processScrollAnimationEasing';
 import Commands from './ScrollViewCommands';
 import ScrollViewContext, {HORIZONTAL, VERTICAL} from './ScrollViewContext';
 import ScrollViewStickyHeader from './ScrollViewStickyHeader';
@@ -196,6 +197,13 @@ export interface ScrollViewImperativeMethods {
 }
 
 export type DecelerationRateType = 'fast' | 'normal' | number;
+export type ScrollAnimationEasing =
+  | 'linear'
+  | 'ease'
+  | 'ease-in'
+  | 'ease-out'
+  | 'ease-in-out'
+  | [number, number, number, number];
 export type ScrollResponderType = ScrollViewImperativeMethods;
 
 export interface ScrollViewInstance
@@ -779,6 +787,23 @@ type ScrollViewBaseProps = Readonly<{
    * when focus changes. Defaults to true.
    */
   scrollAnimationEnabled?: ?boolean,
+  /**
+   * (Android TV only)
+   * Duration in milliseconds of the animated scroll that runs when focus moves to
+   * another item. Applies to the snap scroll (`snapToAlignment="item"` with
+   * per-item `scrollSnapAlign`/`scrollSnapOffset` markers) and to animated
+   * `scrollTo` commands; other focus scrolls are instant. When unset or <= 0, the platform default (~250ms) is used.
+   * On tvOS the focus engine owns this animation and the prop has no effect.
+   */
+  scrollAnimationDuration?: ?number,
+  /**
+   * (Android TV only)
+   * Easing curve of that animation, either a CSS easing keyword or explicit
+   * cubic-bezier control points `[x1, y1, x2, y2]`. When unset, the platform
+   * default curve (`AccelerateDecelerateInterpolator`) is used.
+   * On tvOS the focus engine owns this animation and the prop has no effect.
+   */
+  scrollAnimationEasing?: ?ScrollAnimationEasing,
   /**
    * A RefreshControl component, used to provide pull-to-refresh
    * functionality for the ScrollView. Only works for vertical ScrollViews
@@ -1938,6 +1963,13 @@ class ScrollView extends React.Component<ScrollViewProps, ScrollViewState> {
       props.decelerationRate = processDecelerationRate(decelerationRate);
     }
 
+    const {scrollAnimationEasing} = this.props;
+    if (scrollAnimationEasing != null) {
+      props.scrollAnimationEasing = processScrollAnimationEasing(
+        scrollAnimationEasing,
+      );
+    }
+
     const refreshControl = this.props.refreshControl;
     const scrollViewRef = this._scrollView.getForwardingRef(
       this.props.scrollViewRef,

package/Libraries/Components/ScrollView/ScrollViewNativeComponent.js

@@ -77,6 +77,8 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           borderLeftColor: colorAttribute,
           snapToItemPadding: true,
           scrollAnimationEnabled: true,
+          scrollAnimationDuration: true,
+          scrollAnimationEasing: true,
           pointerEvents: true,
           isInvertedVirtualizedList: true,
           scrollsChildToFocus: true,

package/Libraries/Components/ScrollView/ScrollViewNativeComponentType.js

@@ -74,6 +74,17 @@ export type ScrollViewNativeProps = Readonly<{
   sendMomentumEvents?: ?boolean,
   showsHorizontalScrollIndicator?: ?boolean,
   scrollAnimationEnabled?: ?boolean,
+  scrollAnimationDuration?: ?number,
+  // Accepts the unresolved prop value; ScrollView passes it through
+  // processScrollAnimationEasing, so native only sees control points.
+  scrollAnimationEasing?: ?(
+    | 'linear'
+    | 'ease'
+    | 'ease-in'
+    | 'ease-out'
+    | 'ease-in-out'
+    | [number, number, number, number]
+  ),
   showsScrollIndex?: ?boolean,
   showsVerticalScrollIndicator?: ?boolean,
   snapToAlignment?: ?('start' | 'center' | 'end' | 'item'),

package/Libraries/Components/ScrollView/processScrollAnimationEasing.js

@@ -0,0 +1,40 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {ScrollAnimationEasing} from './ScrollView';
+
+type CubicBezierControlPoints = [number, number, number, number];
+
+// The native side only understands cubic-bezier control points, so the CSS easing
+// keywords are resolved to the control points those keywords are defined as.
+const SCROLL_ANIMATION_EASING_KEYWORDS: Readonly<{
+  linear: CubicBezierControlPoints,
+  ease: CubicBezierControlPoints,
+  'ease-in': CubicBezierControlPoints,
+  'ease-out': CubicBezierControlPoints,
+  'ease-in-out': CubicBezierControlPoints,
+}> = {
+  linear: [0, 0, 1, 1],
+  ease: [0.25, 0.1, 0.25, 1],
+  'ease-in': [0.42, 0, 1, 1],
+  'ease-out': [0, 0, 0.58, 1],
+  'ease-in-out': [0.42, 0, 0.58, 1],
+};
+
+function processScrollAnimationEasing(
+  easing: ScrollAnimationEasing,
+): CubicBezierControlPoints {
+  if (typeof easing === 'string') {
+    return SCROLL_ANIMATION_EASING_KEYWORDS[easing];
+  }
+  return easing;
+}
+
+export default processScrollAnimationEasing;

package/Libraries/Components/TV/TVFocusGuideView.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {BlurEvent, FocusEvent} from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 import type {ComponentOrHandleType} from './tagForComponentOrHandle';
 
@@ -16,6 +17,7 @@ import useMergeRefs from '../../Utilities/useMergeRefs';
 import View from '../View/View';
 import {Commands} from '../View/ViewNativeComponent';
 import tagForComponentOrHandle from './tagForComponentOrHandle';
+import useFocusEnterLeave from './useFocusEnterLeave';
 
 const StyleSheet = require('../../StyleSheet/StyleSheet').default;
 const React = require('react');
@@ -51,6 +53,20 @@ type TVFocusGuideViewProps = $ReadOnly<{
    * When set to false, this view and all its subviews will be NOT focusable.
    */
   focusable?: boolean | void,
+
+  /**
+   * Fires once when focus enters this focus guide's subtree from outside.
+   * Unlike `onFocus`, which bubbles and fires for every descendant, this does
+   * not fire again when focus moves between descendants. Boundary-crossing
+   * only, same idea as `onMouseEnter` vs `onMouseOver`.
+   */
+  onFocusEnter?: ?(event: FocusEvent) => void,
+
+  /**
+   * Fires once when focus leaves this focus guide's subtree entirely. Does
+   * not fire when focus moves between descendants. Pairs with `onFocusEnter`.
+   */
+  onFocusLeave?: ?(event: BlurEvent) => void,
 }>;
 
 export type TVFocusGuideViewImperativeMethods = $ReadOnly<{
@@ -63,6 +79,10 @@ function TVFocusGuideView({
   destinations: destinationsProp,
   autoFocus,
   focusable,
+  onFocusEnter,
+  onFocusLeave,
+  onFocusCapture,
+  onBlurCapture,
   ref,
   ...props
 }: TVFocusGuideViewProps): React.Node {
@@ -103,6 +123,15 @@ function TVFocusGuideView({
 
   const mergedRef = useMergeRefs(setLocalRef, ref);
 
+  // Collapse the bubbled per-descendant focus/blur into a single enter when
+  // focus crosses into the guide's subtree and a single leave when it exits.
+  const {handleFocusCapture, handleBlurCapture} = useFocusEnterLeave(
+    onFocusEnter,
+    onFocusLeave,
+    onFocusCapture,
+    onBlurCapture,
+  );
+
   React.useEffect(() => {
     if (focusable === false) {
       setDestinations([]);
@@ -131,6 +160,8 @@ function TVFocusGuideView({
       isTVSelectable={tvOSSelectable}
       // Android TV only prop
       tvFocusable={focusable}
+      onFocusCapture={handleFocusCapture}
+      onBlurCapture={handleBlurCapture}
     />
   );
 }

package/Libraries/Components/TV/useFocusEnterLeave.js

@@ -0,0 +1,112 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {BlurEvent, FocusEvent} from '../../Types/CoreEventTypes';
+
+import * as React from 'react';
+
+type FocusEnterLeaveState = {
+  entered: boolean,
+  pendingLeave: ?TimeoutID,
+};
+
+export type FocusEnterLeaveHandlers = {
+  handleFocusCapture: ?(event: FocusEvent) => void,
+  handleBlurCapture: ?(event: BlurEvent) => void,
+};
+
+/**
+ * Collapses the per-descendant focus/blur events into a single enter (focus
+ * crosses into the subtree) and a single leave (focus fully exits). A
+ * child-to-child move fires blur then focus back to back, so the deferred
+ * leave gets cancelled by the incoming focus and nothing fires.
+ *
+ * Hooks the capture phase, not bubble: capture reaches the container before
+ * any descendant sees the event, so a descendant calling stopPropagation
+ * can't leave us desynced.
+ */
+export default function useFocusEnterLeave(
+  onFocusEnter: ?(event: FocusEvent) => void,
+  onFocusLeave: ?(event: BlurEvent) => void,
+  onFocusCapture: ?(event: FocusEvent) => void,
+  onBlurCapture: ?(event: BlurEvent) => void,
+): FocusEnterLeaveHandlers {
+  const stateRef = React.useRef<FocusEnterLeaveState>({
+    entered: false,
+    pendingLeave: null,
+  });
+
+  const activeHandlers =
+    onFocusEnter !== undefined || onFocusLeave !== undefined;
+
+  const handleFocusCapture = React.useCallback(
+    (event: FocusEvent) => {
+      const state = stateRef.current;
+      if (state.pendingLeave != null) {
+        clearTimeout(state.pendingLeave);
+        state.pendingLeave = null;
+      }
+      if (!state.entered) {
+        state.entered = true;
+        onFocusEnter?.(event);
+      }
+      onFocusCapture?.(event);
+    },
+    [onFocusEnter, onFocusCapture],
+  );
+
+  const handleBlurCapture = React.useCallback(
+    (event: BlurEvent) => {
+      const state = stateRef.current;
+      if (state.pendingLeave != null) {
+        clearTimeout(state.pendingLeave);
+      }
+      // Defer: if focus lands on another descendant this same tick, the focus
+      // handler clears this before it runs.
+      state.pendingLeave = setTimeout(() => {
+        state.pendingLeave = null;
+        if (state.entered) {
+          state.entered = false;
+          onFocusLeave?.(event);
+        }
+      }, 0);
+      onBlurCapture?.(event);
+    },
+    [onFocusLeave, onBlurCapture],
+  );
+
+  // Reset on unmount so a remounted instance starts clean and no deferred
+  // leave fires after we're gone.
+  // If no active handlers, return without doing anything
+  React.useEffect(() => {
+    if (!activeHandlers) {
+      return;
+    }
+    const state = stateRef.current;
+    return () => {
+      if (state.pendingLeave != null) {
+        clearTimeout(state.pendingLeave);
+        state.pendingLeave = null;
+      }
+      state.entered = false;
+    };
+  }, [activeHandlers]);
+
+  // Nothing to track: hand back the caller's own capture handlers untouched.
+  // (Kept after the hooks above so the hook count stays stable per render.)
+  if (onFocusEnter == null && onFocusLeave == null) {
+    return {
+      handleFocusCapture: onFocusCapture,
+      handleBlurCapture: onBlurCapture,
+    };
+  }
+
+  return {handleFocusCapture, handleBlurCapture};
+}

package/Libraries/Core/ReactNativeVersion.js

@@ -28,7 +28,7 @@
 export default class ReactNativeVersion {
   static major: number = 0;
   static minor: number = 87;
-  static patch: number = 0;
+  static patch: number = 1;
   static prerelease: string | null = '0';
 
   static getVersionString(): string {

package/README.md

@@ -255,6 +255,8 @@ class Game2048 extends React.Component {
   | autoFocus | boolean? | If true, `TVFocusGuide` will automatically manage focus for you. It will redirect the focus to the first focusable child on the first visit. It also remembers the last focused child and redirects the focus to it on the subsequent visits. `destinations` prop takes precedence over this prop when used together. |
   | focusable | boolean? | When set to false, this view and all its subviews will be NOT focusable. |
   | trapFocus* (Up, Down, Left, Right) | Prevents focus escaping from the container for the given directions. |
+  | onFocusEnter | function? | Fires once when focus enters the FocusGuideView's subtree from outside. Unlike `onFocus`, it does not fire again when focus moves between descendants. |
+  | onFocusLeave | function? | Fires once when focus leaves the FocusGuideView's subtree entirely. Does not fire when focus moves between descendants. |
   
   More information on the focus handling improvements above can be found in [this article](https://medium.com/xite-engineering/revolutionizing-focus-management-in-tv-applications-with-react-native-10ba69bd90).
   
@@ -316,6 +318,20 @@ class Game2048 extends React.Component {
   </ScrollView>
   ```
 
+  - _ScrollView animation timing (Android TV)_: The `scrollAnimationDuration` and `scrollAnimationEasing` props tune the animated scroll that runs when focus moves to another item. They apply to the snap scroll (`snapToAlignment="item"` with per-item `scrollSnapAlign`/`scrollSnapOffset` markers) and to animated `scrollTo` commands; other focus scrolls are instant. Both are Android TV only; on tvOS the focus engine owns this animation. When either prop is unset, the platform defaults are used, so behavior is unchanged.
+
+  | Prop (ScrollView) | Value | Description |
+  |---|---|---|
+  | scrollAnimationDuration | number? | Duration of the scroll animation in milliseconds. Unset or `<= 0` uses the platform default (~250ms). Android TV only. |
+  | scrollAnimationEasing | `'linear' \| 'ease' \| 'ease-in' \| 'ease-out' \| 'ease-in-out' \| [number, number, number, number]`? | Easing curve, as a CSS easing keyword or cubic-bezier control points `[x1, y1, x2, y2]`. Unset uses the platform default `AccelerateDecelerateInterpolator`. Android TV only. |
+
+  ```jsx
+  <ScrollView horizontal scrollAnimationDuration={500} scrollAnimationEasing="ease-out">
+    <Pressable style={{width: 300}}><Text>Item 1</Text></Pressable>
+    <Pressable style={{width: 300}}><Text>Item 2</Text></Pressable>
+  </ScrollView>
+  ```
+
   - _Interaction with existing ScrollView props_: The TV scroll props build on top of existing React Native ScrollView behavior. Here is how they interact:
 
     - `snapToAlignment="item"` does not require `snapToInterval` to be set. It works as a standalone snapping mode where each child's `scrollSnapAlign` or `scrollSnapOffset` determines the snap position. If `snapToInterval` is also set, the interval is applied as an additional constraint after the item offset is computed.
@@ -325,6 +341,7 @@ class Game2048 extends React.Component {
     - `scrollAnimationEnabled={false}` disables all scroll animations, including programmatic `scrollTo({animated: true})` calls. When disabled, all scrolling is instant.
     - `decelerationRate` has no effect when `scrollAnimationEnabled={false}`, since there is no animation to decelerate.
     - `scrollAnimationEnabled` and `snapToAlignment="item"` work well together. Snapping still occurs, but instantly instead of animated.
+    - `scrollAnimationDuration` and `scrollAnimationEasing` have no effect when `scrollAnimationEnabled={false}`, since there is no animation left to time.
 
   - _VirtualizedList_: We extend `VirtualizedList` to make virtualization work well with focus management in mind. All of the improvements that we made are automatically available to all the VirtualizedList based components such as `FlatList`.
     - Defaults: VirtualizeList contents are automatically wrapped with a `TVFocusGuideView` with `trapFocus*` properties enabled depending on the orientation of the list. This default makes sure that focus doesn't leave the list accidentally due to a virtualization issue etc. until reaching the beginning or the end of the list.

package/React/Base/RCTVersion.m

@@ -23,7 +23,7 @@ NSDictionary* RCTGetReactNativeVersion(void)
     __rnVersion = @{
                   RCTVersionMajor: @(0),
                   RCTVersionMinor: @(87),
-                  RCTVersionPatch: @(0),
+                  RCTVersionPatch: @(1),
                   RCTVersionPrerelease: @"0",
                   };
   });

package/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -492,6 +492,34 @@ static BOOL RCTLayerTransformCollapsesAxis(CALayer *layer)
   return _props->isTVSelectable;
 }
 
+// Directional focus destinations are looked up in the containing root view when
+// `updateProps` runs. A destination set while this view is not attached yet --
+// e.g. a nextFocus* value delivered together with the view's creation -- resolves
+// to nil there, and `updateProps` never retries because the prop value does not
+// change. Re-resolve pending destinations lazily: `enableDirectionalFocusGuides`
+// only does work while the view is focused, at which point the hierarchy is
+// guaranteed to be attached.
+- (void)resolvePendingNextFocusTargets
+{
+  UIView *rootView = [self containingRootView];
+
+  if (rootView == nil) {
+    return;
+  }
+  if (_nextFocusUp == nil && _props->nextFocusUp.has_value()) {
+    _nextFocusUp = [rootView viewWithTag:_props->nextFocusUp.value()];
+  }
+  if (_nextFocusDown == nil && _props->nextFocusDown.has_value()) {
+    _nextFocusDown = [rootView viewWithTag:_props->nextFocusDown.value()];
+  }
+  if (_nextFocusLeft == nil && _props->nextFocusLeft.has_value()) {
+    _nextFocusLeft = [rootView viewWithTag:_props->nextFocusLeft.value()];
+  }
+  if (_nextFocusRight == nil && _props->nextFocusRight.has_value()) {
+    _nextFocusRight = [rootView viewWithTag:_props->nextFocusRight.value()];
+  }
+}
+
 // In tvOS, to support directional focus APIs, we add a UIFocusGuide for each
 // side of the view where a nextFocus has been set. Set layout constraints to
 // make the guide 1 px thick, and set the destination to the nextFocus object.
@@ -503,6 +531,8 @@ static BOOL RCTLayerTransformCollapsesAxis(CALayer *layer)
   if (!self.isFocused) {
     return;
   }
+
+  [self resolvePendingNextFocusTargets];
   if (self->_nextFocusUp != nil) {
     if (self.focusGuideUp == nil) {
       self.focusGuideUp = [UIFocusGuide new];

package/ReactAndroid/gradle.properties

@@ -1,4 +1,4 @@
-VERSION_NAME=0.87.0-0
+VERSION_NAME=0.87.1-0
 react.internal.publishingGroup=io.github.react-native-tvos
 react.internal.hermesPublishingGroup=com.facebook.hermes
 

package/ReactAndroid/src/main/java/com/facebook/react/modules/intent/IntentModule.kt

@@ -87,11 +87,15 @@ public open class IntentModule(reactContext: ReactApplicationContext) :
           override fun onHostResume() {
             reactApplicationContext.removeLifecycleEventListener(this)
             synchronized(this@IntentModule) {
-              for (pendingPromise in pendingOpenURLPromises) {
+              // getInitialURL can re-enter and re-add to pendingOpenURLPromises when the activity
+              // is still null at resume, so drain a snapshot (after clearing the list and listener)
+              // to avoid mutating the list being iterated (ConcurrentModificationException).
+              val pendingPromises = ArrayList(pendingOpenURLPromises)
+              pendingOpenURLPromises.clear()
+              initialURLListener = null
+              for (pendingPromise in pendingPromises) {
                 getInitialURL(pendingPromise)
               }
-              initialURLListener = null
-              pendingOpenURLPromises.clear()
             }
           }
 

package/ReactAndroid/src/main/java/com/facebook/react/modules/systeminfo/ReactNativeVersion.kt

@@ -14,7 +14,7 @@ public object ReactNativeVersion {
   public val VERSION: Map<String, Any?> = mapOf(
     "major" to 0,
     "minor" to 87,
-    "patch" to 0,
+    "patch" to 1,
     "prerelease" to "0"
   )
 }

package/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.kt

@@ -8,6 +8,7 @@
 package com.facebook.react.views.scroll
 
 import android.animation.ObjectAnimator
+import android.animation.TimeInterpolator
 import android.animation.ValueAnimator
 import android.content.Context
 import android.graphics.Canvas
@@ -197,6 +198,10 @@ constructor(context: Context, private val fpsListener: FpsListener? = null) :
   private var scrollsChildToFocus = true
   internal var snapToItemPadding: Int = 0
   internal var scrollAnimationEnabled: Boolean = true
+  /** Values <= 0 keep the platform default duration. */
+  internal var scrollAnimationDuration: Int = 0
+  /** `null` keeps the platform default curve. */
+  internal var scrollAnimationInterpolator: TimeInterpolator? = null
   private var blockScrollDelta: Boolean = false
 
   // Interface property overrides
@@ -295,6 +300,8 @@ constructor(context: Context, private val fpsListener: FpsListener? = null) :
     scrollsChildToFocus = true
     snapToItemPadding = 0
     scrollAnimationEnabled = true
+    scrollAnimationDuration = 0
+    scrollAnimationInterpolator = null
     blockScrollDelta = false
   }
 
@@ -767,7 +774,9 @@ constructor(context: Context, private val fpsListener: FpsListener? = null) :
       val currentFocused = findFocus()
       val nextFocused = FocusFinder.getInstance().findNextFocus(this, currentFocused, direction)
       if (nextFocused != null && nextFocused !== currentFocused && nextFocused !== this) {
-        nextFocused.requestFocus(direction)
+        if (nextFocused.requestFocus(direction)) {
+          ReactScrollViewHelper.playFocusNavigationSoundEffect(this, direction)
+        }
         handled = true
       }
     } else if (pagingEnabled) {
@@ -778,16 +787,20 @@ constructor(context: Context, private val fpsListener: FpsListener? = null) :
         val nextFocused = FocusFinder.getInstance().findNextFocus(this, currentFocused, direction)
         val rootChild = getContentView()
         if (nextFocused != null && isDescendantOf(rootChild, nextFocused)) {
-          if (snapToAlignment == SNAP_ALIGNMENT_ITEM) {
-            // When snapToAlignment is "item", don't use smoothScrollToNextPage (which scrolls
-            // by full page width and ignores snapToItemPadding). Just request focus —
-            // requestChildFocus → tryScrollSnapToChild handles scrolling with correct padding.
-            nextFocused.requestFocus()
-          } else {
-            if (!isScrolledInView(nextFocused) && !isMostlyScrolledInView(nextFocused)) {
-              smoothScrollToNextPage(direction)
-            }
-            nextFocused.requestFocus()
+          val focusMoved =
+              if (snapToAlignment == SNAP_ALIGNMENT_ITEM) {
+                // When snapToAlignment is "item", don't use smoothScrollToNextPage (which scrolls
+                // by full page width and ignores snapToItemPadding). Just request focus —
+                // requestChildFocus → tryScrollSnapToChild handles scrolling with correct padding.
+                nextFocused.requestFocus()
+              } else {
+                if (!isScrolledInView(nextFocused) && !isMostlyScrolledInView(nextFocused)) {
+                  smoothScrollToNextPage(direction)
+                }
+                nextFocused.requestFocus()
+              }
+          if (focusMoved) {
+            ReactScrollViewHelper.playFocusNavigationSoundEffect(this, direction)
           }
           handled = true
         } else {
@@ -800,7 +813,12 @@ constructor(context: Context, private val fpsListener: FpsListener? = null) :
 
       pagedArrowScrolling = false
     } else {
+      val focusedBeforeScroll = findFocus()
       handled = super.arrowScroll(direction)
+      // super.arrowScroll() can scroll without moving focus, so only click when focus moved.
+      if (handled && findFocus() !== focusedBeforeScroll) {
+        ReactScrollViewHelper.playFocusNavigationSoundEffect(this, direction)
+      }
     }
 
     return handled
@@ -1701,8 +1719,13 @@ constructor(context: Context, private val fpsListener: FpsListener? = null) :
     // not animated at all.
     defaultFlingAnimator.cancel()
 
-    // Update the fling animator with new values
-    val duration = ReactScrollViewHelper.getDefaultScrollAnimationDuration(context)
+    // Update the fling animator with new values. The animator is reused, so the interpolator must
+    // be re-applied on every call to undo whatever a previous `scrollAnimationEasing` left on it.
+    val duration =
+        if (scrollAnimationDuration > 0) scrollAnimationDuration
+        else ReactScrollViewHelper.getDefaultScrollAnimationDuration(context)
+    defaultFlingAnimator.interpolator =
+        scrollAnimationInterpolator ?: ReactScrollViewHelper.getDefaultScrollAnimationInterpolator()
     defaultFlingAnimator.setDuration(duration.toLong()).setIntValues(start, end)
 
     // Start the animator