chore(0.81): backport fixes (#2878, #2879, #2880) (#2884)

## Summary

Backport of 3 fixes from `main` to `0.81-stable`:

- **fix(fabric):** Switch default Text color to `labelColor` (#2878)
- **fix(fabric):** fix Text overflow in ScrollView on first render
(#2880)
- **fix(fabric):** Add back compat layer for `validKeysDown` and
`validKeysUp` (#2879)

Each fix is a separate commit for easy rebasing when upstream PRs are
updated.

### Conflict resolutions
- **PR #2878:** 0.81-stable uses `RCTUIColor` (renamed from
`RCTPlatformColor` on main). Resolved by keeping `RCTUIColor` while
applying the `blackColor` → `labelColor` change.
- **PRs #2880 and #2879** cherry-picked cleanly. #2879 (open PR) was
squash-cherry-picked into a single commit.

## Test plan
- [ ] Verify default text color respects dark/light mode
- [ ] Verify Text in ScrollView renders correctly on first load
- [ ] Verify legacy `validKeysDown`/`validKeysUp` props still work in
Fabric

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: Saadnajmi

.nx/version-plans/version-plan-1743631200000.md

@@ -0,0 +1,5 @@
+---
+__default__: patch
+---
+
+Backport fixes: default Text color to labelColor, Text overflow in ScrollView, validKeys compat layer

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-macos/monorepo",
-  "version": "0.81.4",
+  "version": "0.81.5",
   "license": "MIT",
   "packageManager": "yarn@4.13.0",
   "scripts": {

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

@@ -381,7 +381,14 @@ function Pressable({
     // [macOS
     acceptsFirstMouse: acceptsFirstMouse !== false && !disabled,
     enableFocusRing: enableFocusRing !== false && !disabled,
-    keyDownEvents: keyDownEvents ?? [{key: ' '}, {key: 'Enter'}],
+    keyDownEvents:
+      keyDownEvents ??
+      // $FlowFixMe[unclear-type] Legacy props not in type definitions
+      (((props: any).validKeysDown: mixed) == null &&
+      // $FlowFixMe[unclear-type]
+      ((props: any).passthroughAllKeyEvents: mixed) !== true
+        ? [{key: ' '}, {key: 'Enter'}]
+        : undefined),
     mouseDownCanMoveWindow: false,
     // macOS]
   };

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

@@ -52,6 +52,18 @@ const RCTTextInputViewConfig: PartialViewConfigWithoutName = {
         captured: 'onSubmitEditingCapture',
       },
     },
+    topKeyDown: {
+      phasedRegistrationNames: {
+        bubbled: 'onKeyDown',
+        captured: 'onKeyDownCapture',
+      },
+    },
+    topKeyUp: {
+      phasedRegistrationNames: {
+        bubbled: 'onKeyUp',
+        captured: 'onKeyUpCapture',
+      },
+    },
     topTouchCancel: {
       phasedRegistrationNames: {
         bubbled: 'onTouchCancel',
@@ -173,6 +185,8 @@ const RCTTextInputViewConfig: PartialViewConfigWithoutName = {
     clearTextOnSubmit: true,
     grammarCheck: true,
     hideVerticalScrollIndicator: true,
+    keyDownEvents: true,
+    keyUpEvents: true,
     pastedTypes: true,
     submitKeyEvents: true,
     tooltip: true,
@@ -191,6 +205,8 @@ const RCTTextInputViewConfig: PartialViewConfigWithoutName = {
       onAutoCorrectChange: true,
       onSpellCheckChange: true,
       onGrammarCheckChange: true,
+      onKeyDown: true,
+      onKeyUp: true,
       // macOS]
     }),
     disableKeyboardShortcuts: true,

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

@@ -60,7 +60,13 @@ import flattenStyle from '../../StyleSheet/flattenStyle';
 import StyleSheet, {type TextStyleProp} from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import TextAncestorContext from '../../Text/TextAncestorContext';
+// [macOS
+import processLegacyKeyProps, {
+  hasLegacyKeyProps,
+  stripLegacyKeyProps,
+} from '../../Utilities/normalizeLegacyHandledKeyEvents';
 import Platform from '../../Utilities/Platform';
+// macOS]
 import useMergeRefs from '../../Utilities/useMergeRefs';
 import TextInputState from './TextInputState';
 import invariant from 'invariant';
@@ -386,6 +392,11 @@ function useTextInputStateSynchronization({
  *
  */
 function InternalTextInput(props: TextInputProps): React.Node {
+  // [macOS
+  const legacyKeyOverrides = hasLegacyKeyProps(props)
+    ? processLegacyKeyProps(props)
+    : null;
+  // macOS]
   const {
     'aria-busy': ariaBusy,
     'aria-checked': ariaChecked,
@@ -400,7 +411,9 @@ function InternalTextInput(props: TextInputProps): React.Node {
     selectionHandleColor,
     cursorColor,
     ...otherProps
-  } = props;
+    // $FlowFixMe[unclear-type]
+  } = ({...props, ...legacyKeyOverrides}: any); // [macOS]
+  stripLegacyKeyProps(otherProps); // [macOS]
 
   const inputRef = useRef<null | TextInputInstance>(null);
 
@@ -581,10 +594,15 @@ function InternalTextInput(props: TextInputProps): React.Node {
   };
 
   // [macOS
+  const _keyDownEvents =
+    legacyKeyOverrides?.keyDownEvents ?? props.keyDownEvents;
+  const _keyUpEvents = legacyKeyOverrides?.keyUpEvents ?? props.keyUpEvents;
+  const _origOnKeyDown = legacyKeyOverrides?.onKeyDown ?? props.onKeyDown;
+  const _origOnKeyUp = legacyKeyOverrides?.onKeyUp ?? props.onKeyUp;
+
   const _onKeyDown = (event: KeyEvent) => {
-    const keyDownEvents = props.keyDownEvents;
-    if (keyDownEvents != null && !event.isPropagationStopped()) {
-      const isHandled = keyDownEvents.some(
+    if (_keyDownEvents != null && !event.isPropagationStopped()) {
+      const isHandled = _keyDownEvents.some(
         ({key, metaKey, ctrlKey, altKey, shiftKey}: HandledKeyEvent) => {
           return (
             event.nativeEvent.key === key &&
@@ -599,13 +617,12 @@ function InternalTextInput(props: TextInputProps): React.Node {
         event.stopPropagation();
       }
     }
-    props.onKeyDown?.(event);
+    _origOnKeyDown?.(event);
   };
 
   const _onKeyUp = (event: KeyEvent) => {
-    const keyUpEvents = props.keyUpEvents;
-    if (keyUpEvents != null && !event.isPropagationStopped()) {
-      const isHandled = keyUpEvents.some(
+    if (_keyUpEvents != null && !event.isPropagationStopped()) {
+      const isHandled = _keyUpEvents.some(
         ({key, metaKey, ctrlKey, altKey, shiftKey}: HandledKeyEvent) => {
           return (
             event.nativeEvent.key === key &&
@@ -620,7 +637,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
         event.stopPropagation();
       }
     }
-    props.onKeyUp?.(event);
+    _origOnKeyUp?.(event);
   };
   // macOS]
 

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

@@ -13,6 +13,12 @@ import type {ViewProps} from './ViewPropTypes';
 
 import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import TextAncestorContext from '../../Text/TextAncestorContext';
+// [macOS
+import processLegacyKeyProps, {
+  hasLegacyKeyProps,
+  stripLegacyKeyProps,
+} from '../../Utilities/normalizeLegacyHandledKeyEvents';
+// macOS]
 import ViewNativeComponent from './ViewNativeComponent';
 import * as React from 'react';
 import {use} from 'react';
@@ -30,13 +36,24 @@ component View(
 ) {
   const hasTextAncestor = use(TextAncestorContext);
 
+  // [macOS
+  const legacyKeyOverrides = hasLegacyKeyProps(props)
+    ? processLegacyKeyProps(props)
+    : null;
+  // macOS]
+
   let actualView;
 
   // [macOS
+  const _keyDownEvents =
+    legacyKeyOverrides?.keyDownEvents ?? props.keyDownEvents;
+  const _keyUpEvents = legacyKeyOverrides?.keyUpEvents ?? props.keyUpEvents;
+  const _origOnKeyDown = legacyKeyOverrides?.onKeyDown ?? props.onKeyDown;
+  const _origOnKeyUp = legacyKeyOverrides?.onKeyUp ?? props.onKeyUp;
+
   const _onKeyDown = (event: KeyEvent) => {
-    const keyDownEvents = props.keyDownEvents;
-    if (keyDownEvents != null && !event.isPropagationStopped()) {
-      const isHandled = keyDownEvents.some(
+    if (_keyDownEvents != null && !event.isPropagationStopped()) {
+      const isHandled = _keyDownEvents.some(
         ({key, metaKey, ctrlKey, altKey, shiftKey}: HandledKeyEvent) => {
           return (
             event.nativeEvent.key === key &&
@@ -51,13 +68,12 @@ component View(
         event.stopPropagation();
       }
     }
-    props.onKeyDown?.(event);
+    _origOnKeyDown?.(event);
   };
 
   const _onKeyUp = (event: KeyEvent) => {
-    const keyUpEvents = props.keyUpEvents;
-    if (keyUpEvents != null && !event.isPropagationStopped()) {
-      const isHandled = keyUpEvents.some(
+    if (_keyUpEvents != null && !event.isPropagationStopped()) {
+      const isHandled = _keyUpEvents.some(
         ({key, metaKey, ctrlKey, altKey, shiftKey}: HandledKeyEvent) => {
           return (
             event.nativeEvent.key === key &&
@@ -72,7 +88,7 @@ component View(
         event.stopPropagation();
       }
     }
-    props.onKeyUp?.(event);
+    _origOnKeyUp?.(event);
   };
   // macOS]
 
@@ -96,10 +112,12 @@ component View(
       id,
       tabIndex,
       ...otherProps
-    } = props;
+      // $FlowFixMe[unclear-type]
+    } = ({...props, ...legacyKeyOverrides}: any); // [macOS]
 
     // Since we destructured props, we can now treat it as mutable
     const processedProps = otherProps as {...ViewProps};
+    stripLegacyKeyProps(processedProps); // [macOS]
 
     const parsedAriaLabelledBy = ariaLabelledBy?.split(/\s*,\s*/g);
     if (parsedAriaLabelledBy !== undefined) {
@@ -195,7 +213,9 @@ component View(
       nativeID,
       tabIndex,
       ...otherProps
-    } = props;
+      // $FlowFixMe[unclear-type]
+    } = ({...props, ...legacyKeyOverrides}: any); // [macOS]
+    stripLegacyKeyProps(otherProps); // [macOS]
     const _accessibilityLabelledBy =
       ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;
 

packages/react-native/Libraries/Text/RCTTextAttributes.mm

@@ -277,7 +277,7 @@ - (CGFloat)effectiveFontSizeMultiplier
 
 - (RCTUIColor *)effectiveForegroundColor // [macOS]
 {
-  RCTUIColor *effectiveForegroundColor = _foregroundColor ?: [RCTUIColor blackColor]; // [macOS]
+  RCTUIColor *effectiveForegroundColor = _foregroundColor ?: [RCTTextAttributes defaultForegroundColor]; // [macOS]
 
   if (!isnan(_opacity)) {
     effectiveForegroundColor =

packages/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.mm

@@ -69,7 +69,7 @@ - (instancetype)initWithFrame:(CGRect)frame
     _textInputDelegateAdapter = [[RCTBackedTextViewDelegateAdapter alloc] initWithTextView:self];
 
     self.backgroundColor = [RCTUIColor clearColor]; // [macOS]
-    self.textColor = [RCTUIColor blackColor]; // [macOS]
+    self.textColor = [RCTUIColor labelColor]; // [macOS]
     // This line actually removes 5pt (default value) left and right padding in UITextView.
 #if !TARGET_OS_OSX // [macOS]
     self.textContainer.lineFragmentPadding = 0;

packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm

@@ -127,7 +127,7 @@ - (void)enforceTextAttributesIfNeeded
 
   NSDictionary<NSAttributedStringKey, id> *textAttributes = [[_textAttributes effectiveTextAttributes] mutableCopy];
   if ([textAttributes valueForKey:NSForegroundColorAttributeName] == nil) {
-    [textAttributes setValue:[RCTUIColor blackColor] forKey:NSForegroundColorAttributeName]; // [macOS]
+    [textAttributes setValue:[RCTUIColor labelColor] forKey:NSForegroundColorAttributeName]; // [macOS]
   }
 
     backedTextInputView.defaultTextAttributes = textAttributes;