react-native-tvos 0.85.3-1 → 0.86.0-0

package/Libraries/Image/Image.android.js

@@ -12,10 +12,8 @@ import type {HostInstance} from '../../src/private/types/HostInstance';
 import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
 import type {RootTag} from '../Types/RootTagTypes';
 import type {ImageProps} from './ImageProps';
-import type {ImageSourceHeaders} from './ImageSourceUtils';
 import type {AbstractImageAndroid, ImageAndroid} from './ImageTypes.flow';
 
-import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import flattenStyle from '../StyleSheet/flattenStyle';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import ImageAnalyticsTagContext from './ImageAnalyticsTagContext';
@@ -196,55 +194,37 @@ let BaseImage: AbstractImageAndroid = ({
     );
   }
 
-  let style_: ImageStyleProp;
-  let sources_;
-  let headers_: ?ImageSourceHeaders;
+  const nativeProps = restProps as {
+    ...React.PropsOf<ImageViewNativeComponent>,
+  };
+
   if (Array.isArray(source_)) {
     const {
       headers: sourceHeaders,
       width: sourceWidth,
       height: sourceHeight,
     } = source_[0];
-    headers_ = sourceHeaders;
-    // Default to the first source's width and height if only one is provided
-    if (ReactNativeFeatureFlags.fixImageSrcDimensionPropagation()) {
-      style_ = [
-        source_.length === 1 && {width: sourceWidth, height: sourceHeight},
-        styles.base,
-        style,
-      ];
-    } else {
-      style_ = [styles.base, style];
+    if (sourceHeaders != null) {
+      nativeProps.headers = sourceHeaders;
     }
-    sources_ = source_;
+    // Default to the first source's width and height if only one is provided
+    nativeProps.style = [
+      source_.length === 1 && {width: sourceWidth, height: sourceHeight},
+      styles.base,
+      style,
+    ];
+    nativeProps.source = source_;
   } else {
     const {uri, width: sourceWidth, height: sourceHeight} = source_;
     if (uri === '') {
       console.warn('source.uri should not be an empty string');
     }
-    style_ = [
+    nativeProps.style = [
       {width: sourceWidth ?? width, height: sourceHeight ?? height},
       styles.base,
       style,
     ];
-    sources_ = [source_];
-  }
-
-  const nativeProps = restProps as {
-    ...React.PropsOf<ImageViewNativeComponent>,
-  };
-
-  // Both iOS and C++ sides expect to have "source" prop, whereas on Android it's "src"
-  // (for historical reasons). So in the latter case we populate both "src" and "source",
-  // in order to have a better alignment between platforms in the future.
-  // TODO: `src` should be eventually removed from the API on Android.
-  nativeProps.src = sources_;
-  nativeProps.source = sources_;
-
-  nativeProps.style = style_;
-
-  if (headers_ != null) {
-    nativeProps.headers = headers_;
+    nativeProps.source = [source_];
   }
 
   if (onLoadStart != null) {

package/Libraries/Image/RCTImageLoader.mm

@@ -714,17 +714,19 @@ static RCTImageLoaderCancellationBlock RCTLoadImageURLFromLoader(
                                                        completionHandler
 {
   RCTNetworking *networking = [_moduleRegistry moduleForName:"Networking"];
-  if (RCT_DEBUG && !networking) {
+  if (!networking) {
     RCTLogError(
         @"No suitable image URL loader found for %@. You may need to "
          " import the RCTNetwork library in order to load images.",
         request.URL.absoluteString);
+    completionHandler(RCTErrorWithMessage(@"RCTNetworking module is not available"), nil, nil);
     return NULL;
   }
 
   // Check if networking module can load image
-  if (RCT_DEBUG && ![networking canHandleRequest:request]) {
+  if (![networking canHandleRequest:request]) {
     RCTLogError(@"No suitable image URL loader found for %@", request.URL.absoluteString);
+    completionHandler(RCTErrorWithMessage(@"No suitable URL loader for request"), nil, nil);
     return NULL;
   }
 

package/Libraries/Image/RelativeImageStub.js

@@ -15,7 +15,7 @@
 
 const AssetRegistry = require('@react-native/assets-registry/registry');
 
-const RelativeImageStub = (AssetRegistry.registerAsset({
+const RelativeImageStub = AssetRegistry.registerAsset({
   __packager_asset: true,
   fileSystemLocation: '/full/path/to/directory',
   httpServerLocation: '/assets/full/path/to/directory',
@@ -25,7 +25,7 @@ const RelativeImageStub = (AssetRegistry.registerAsset({
   hash: 'nonsense',
   name: 'icon',
   type: 'png',
-}): number);
+}) as number;
 
 // eslint-disable-next-line @react-native/monorepo/no-commonjs-exports
 module.exports = RelativeImageStub;

package/Libraries/LayoutAnimation/LayoutAnimation.js

@@ -131,17 +131,17 @@ function createLayoutAnimation(
 }
 
 const Presets = {
-  easeInEaseOut: (createLayoutAnimation(
+  easeInEaseOut: createLayoutAnimation(
     300,
     'easeInEaseOut',
     'opacity',
-  ): LayoutAnimationConfig),
-  linear: (createLayoutAnimation(
+  ) as LayoutAnimationConfig,
+  linear: createLayoutAnimation(
     500,
     'linear',
     'opacity',
-  ): LayoutAnimationConfig),
-  spring: ({
+  ) as LayoutAnimationConfig,
+  spring: {
     duration: 700,
     create: {
       type: 'linear',
@@ -155,7 +155,7 @@ const Presets = {
       type: 'linear',
       property: 'opacity',
     },
-  }: LayoutAnimationConfig),
+  } as LayoutAnimationConfig,
 };
 
 /**
@@ -205,15 +205,15 @@ const LayoutAnimation = {
     console.error('LayoutAnimation.checkConfig(...) has been disabled.');
   },
   Presets,
-  easeInEaseOut: (configureNext.bind(null, Presets.easeInEaseOut): (
+  easeInEaseOut: configureNext.bind(null, Presets.easeInEaseOut) as (
     onAnimationDidEnd?: OnAnimationDidEndCallback,
-  ) => void),
-  linear: (configureNext.bind(null, Presets.linear): (
+  ) => void,
+  linear: configureNext.bind(null, Presets.linear) as (
     onAnimationDidEnd?: OnAnimationDidEndCallback,
-  ) => void),
-  spring: (configureNext.bind(null, Presets.spring): (
+  ) => void,
+  spring: configureNext.bind(null, Presets.spring) as (
     onAnimationDidEnd?: OnAnimationDidEndCallback,
-  ) => void),
+  ) => void,
   setEnabled: setLayoutAnimationEnabled,
 };
 

package/Libraries/Linking/Linking.js

@@ -32,7 +32,7 @@ class LinkingImpl extends NativeEventEmitter<LinkingEventDefinitions> {
    *
    * See https://reactnative.dev/docs/linking#addeventlistener
    */
-  addEventListener<K: keyof LinkingEventDefinitions>(
+  addEventListener<K extends keyof LinkingEventDefinitions>(
     eventType: K,
     listener: (...LinkingEventDefinitions[K]) => unknown,
   ): EventSubscription {

package/Libraries/Lists/FlatList.js

@@ -564,7 +564,7 @@ class FlatList<ItemT = any> extends React.PureComponent<FlatListProps<ItemT>> {
       );
       return items
         .map((item, kk) =>
-          keyExtractor(((item: $FlowFixMe): ItemT), index * numColumns + kk),
+          keyExtractor(item as $FlowFixMe as ItemT, index * numColumns + kk),
         )
         .join(':');
     }

package/Libraries/LogBox/LogBox.js

@@ -32,7 +32,7 @@ function convertLegacyComponentStack(componentStack: Stack): Stack {
     typeof firstFrame.content === 'string'
   ) {
     // Convert from legacy ComponentStack to Stack format
-    return (componentStack: $FlowFixMe).map(frame => ({
+    return (componentStack as $FlowFixMe).map(frame => ({
       methodName: frame.content,
       lineNumber: frame.location.row,
       column: frame.location.column,
@@ -304,4 +304,4 @@ if (__DEV__) {
   };
 }
 
-export default (LogBox: ILogBox);
+export default LogBox as ILogBox;

package/Libraries/LogBox/LogBoxInspectorContainer.js

@@ -12,6 +12,7 @@ import type LogBoxLog from './Data/LogBoxLog';
 
 import View from '../Components/View/View';
 import StyleSheet from '../StyleSheet/StyleSheet';
+import BackHandler from '../Utilities/BackHandler';
 import * as LogBoxData from './Data/LogBoxData';
 import LogBoxInspector from './UI/LogBoxInspector';
 import * as React from 'react';
@@ -23,6 +24,27 @@ type Props = Readonly<{
 }>;
 
 export class _LogBoxInspectorContainer extends React.Component<Props> {
+  _backHandler: ?{remove: () => void, ...} = null;
+
+  componentDidMount() {
+    this._backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        if (this.props.selectedLogIndex < 0) {
+          return false;
+        }
+        this._handleMinimize();
+        return true;
+      },
+    );
+  }
+
+  componentWillUnmount() {
+    if (this._backHandler) {
+      this._backHandler.remove();
+    }
+  }
+
   render(): React.Node {
     return (
       <View style={StyleSheet.absoluteFill}>
@@ -63,6 +85,6 @@ export class _LogBoxInspectorContainer extends React.Component<Props> {
   };
 }
 
-export default (LogBoxData.withSubscription(
+export default LogBoxData.withSubscription(
   _LogBoxInspectorContainer,
-): React.ComponentType<{}>);
+) as React.ComponentType<{}>;

package/Libraries/LogBox/LogBoxNotificationContainer.js

@@ -11,6 +11,7 @@
 import SafeAreaView from '../../src/private/components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE';
 import View from '../Components/View/View';
 import StyleSheet from '../StyleSheet/StyleSheet';
+import BackHandler from '../Utilities/BackHandler';
 import Platform from '../Utilities/Platform';
 import * as LogBoxData from './Data/LogBoxData';
 import LogBoxLog from './Data/LogBoxLog';
@@ -23,8 +24,28 @@ type Props = Readonly<{
   isDisabled?: ?boolean,
 }>;
 
-export function _LogBoxNotificationContainer(props: Props): React.Node {
+function useLogBoxBackHandler(focused: boolean, logCount: number): void {
+  React.useEffect(() => {
+    if (!focused || logCount === 0) {
+      return;
+    }
+    const subscription = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        LogBoxData.clearWarnings();
+        LogBoxData.clearErrors();
+        return true;
+      },
+    );
+    return () => subscription.remove();
+  }, [focused, logCount]);
+}
+
+export function LogBoxNotificationContainer(props: Props): React.Node {
   const {logs} = props;
+  const [focused, setFocused] = React.useState(false);
+
+  useLogBoxBackHandler(focused, logs.length);
 
   const onDismissWarns = () => {
     LogBoxData.clearWarnings();
@@ -69,6 +90,7 @@ export function _LogBoxNotificationContainer(props: Props): React.Node {
             totalLogCount={warnings.length}
             onPressOpen={() => openLog(warnings[warnings.length - 1])}
             onPressDismiss={onDismissWarns}
+            onFocusChange={setFocused}
           />
         </View>
       )}
@@ -80,6 +102,7 @@ export function _LogBoxNotificationContainer(props: Props): React.Node {
             totalLogCount={errors.length}
             onPressOpen={() => openLog(errors[errors.length - 1])}
             onPressDismiss={onDismissErrors}
+            onFocusChange={setFocused}
           />
         </View>
       )}
@@ -107,6 +130,6 @@ const styles = StyleSheet.create({
   },
 });
 
-export default (LogBoxData.withSubscription(
-  _LogBoxNotificationContainer,
-): React.ComponentType<{}>);
+export default LogBoxData.withSubscription(
+  LogBoxNotificationContainer,
+) as React.ComponentType<{}>;

package/Libraries/LogBox/UI/LogBoxButton.js

@@ -12,11 +12,9 @@ import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
 
-import TouchableHighlight from '../../Components/Touchable/TouchableHighlight';
-import TouchableWithoutFeedback from '../../Components/Touchable/TouchableWithoutFeedback';
+import Pressable from '../../Components/Pressable/Pressable';
 import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
-import Platform from '../../Utilities/Platform';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 import {useState} from 'react';
@@ -30,9 +28,10 @@ component LogBoxButton(
   children?: React.Node,
   hitSlop?: ?EdgeInsetsProp,
   onPress?: ?(event: GestureResponderEvent) => void,
+  onFocusChange?: ?(focused: boolean) => void,
   style?: ViewStyleProp,
 ) {
-  const [pressed, setPressed] = useState(false);
+  const [focused, setFocused] = useState(false);
 
   let resolvedBackgroundColor = backgroundColor;
   if (!resolvedBackgroundColor) {
@@ -42,41 +41,56 @@ component LogBoxButton(
     };
   }
 
-  const content = (
-    <View
-      id={id}
-      style={StyleSheet.compose(
-        {
-          backgroundColor: pressed
-            ? resolvedBackgroundColor.pressed
-            : resolvedBackgroundColor.default,
-        },
-        style,
-      )}>
-      {children}
-    </View>
-  );
+  if (onPress == null) {
+    return (
+      <View
+        id={id}
+        style={StyleSheet.compose(
+          {backgroundColor: resolvedBackgroundColor.default},
+          style,
+        )}>
+        {children}
+      </View>
+    );
+  }
 
-  return onPress == null ? (
-    content
-  ) : Platform.isTV ? (
-    <TouchableHighlight
-      tvParallaxProperties={{enabled: false}}
-      hitSlop={hitSlop}
-      onPress={onPress}
-      onPressIn={() => setPressed(true)}
-      onPressOut={() => setPressed(false)}>
-      {content}
-    </TouchableHighlight>
-) : (
-    <TouchableWithoutFeedback
+  return (
+    <Pressable
+      id={id}
+      focusable={true}
       hitSlop={hitSlop}
       onPress={onPress}
       onPressIn={() => setPressed(true)}
       onPressOut={() => setPressed(false)}>
-      {content}
-    </TouchableWithoutFeedback>
+      onFocus={() => {
+        setFocused(true);
+        onFocusChange?.(true);
+      }}
+      onBlur={() => {
+        setFocused(false);
+        onFocusChange?.(false);
+      }}
+      style={({pressed}) =>
+        StyleSheet.compose(
+          {
+            backgroundColor: pressed
+              ? resolvedBackgroundColor.pressed
+              : resolvedBackgroundColor.default,
+          },
+          focused ? StyleSheet.compose(style, styles.focusRing) : style,
+        )
+      }>
+      {children}
+    </Pressable>
   );
 }
 
+const styles = StyleSheet.create({
+  focusRing: {
+    borderWidth: 2,
+    borderColor: LogBoxStyle.getTextColor(0.6),
+    borderRadius: 4,
+  },
+});
+
 export default LogBoxButton;

package/Libraries/LogBox/UI/LogBoxInspector.js

@@ -11,6 +11,7 @@
 import Keyboard from '../../Components/Keyboard/Keyboard';
 import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
+import BackHandler from '../../Utilities/BackHandler';
 import * as LogBoxData from '../Data/LogBoxData';
 import LogBoxLog, {type LogLevel} from '../Data/LogBoxLog';
 import LogBoxInspectorBody from './LogBoxInspectorBody';
@@ -30,7 +31,7 @@ type Props = Readonly<{
 }>;
 
 export default function LogBoxInspector(props: Props): React.Node {
-  const {logs, selectedIndex} = props;
+  const {logs, selectedIndex, onMinimize} = props;
   let log = logs[selectedIndex];
 
   useEffect(() => {
@@ -55,10 +56,68 @@ export default function LogBoxInspector(props: Props): React.Node {
     Keyboard.dismiss();
   }, []);
 
+  useEffect(() => {
+    if (log == null) {
+      return;
+    }
+    const subscription = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        onMinimize();
+        return true;
+      },
+    );
+    return () => subscription.remove();
+  }, [log, onMinimize]);
+
   function _handleRetry() {
     LogBoxData.retrySymbolicateLogNow(log);
   }
 
+  function _handleCopy() {
+    const headerTitleMap = {
+      warn: 'Console Warning',
+      error: 'Console Error',
+      fatal: 'Uncaught Error',
+      syntax: 'Syntax Error',
+      component: 'Render Error',
+    };
+
+    const title =
+      log.type ??
+      headerTitleMap[log.isComponentError ? 'component' : log.level];
+
+    const parts = [title, '', log.message.content];
+
+    if (log.codeFrame != null) {
+      const location = log.codeFrame.location;
+      parts.push(
+        '',
+        'Source:',
+        location != null
+          ? `${log.codeFrame.fileName} (${location.row}:${location.column})`
+          : log.codeFrame.fileName,
+      );
+    }
+
+    const stack = log.getAvailableStack();
+    if (stack.length > 0) {
+      parts.push('', 'Call Stack:');
+      for (const frame of stack) {
+        const methodName = frame.methodName ?? '?';
+        const file = frame.file ?? '?';
+        const lineNumber =
+          frame.lineNumber != null ? `:${frame.lineNumber}` : '';
+        parts.push(`${methodName} (${file}${lineNumber})`);
+      }
+    }
+
+    // Lazy-require to avoid crashing in environments where the native
+    // Clipboard module is unavailable (e.g. Fantom integration tests).
+    const Clipboard = require('../../Components/Clipboard/Clipboard').default;
+    Clipboard.setString(parts.join('\n'));
+  }
+
   if (log == null) {
     return null;
   }
@@ -75,6 +134,7 @@ export default function LogBoxInspector(props: Props): React.Node {
       <LogBoxInspectorFooter
         onDismiss={props.onDismiss}
         onMinimize={props.onMinimize}
+        onCopy={_handleCopy}
         level={log.level}
       />
       <LogBoxInspectorBody log={log} onRetry={_handleRetry} />

package/Libraries/LogBox/UI/LogBoxInspectorFooter.js

@@ -20,6 +20,7 @@ import * as React from 'react';
 type Props = Readonly<{
   onDismiss: () => void,
   onMinimize: () => void,
+  onCopy: () => void,
   level?: ?LogLevel,
 }>;
 
@@ -48,6 +49,11 @@ export default function LogBoxInspectorFooter(props: Props): React.Node {
         text="Minimize"
         onPress={props.onMinimize}
       />
+      <LogBoxInspectorFooterButton
+        id="logbox_footer_button_copy"
+        text="Copy"
+        onPress={props.onCopy}
+      />
     </View>
   );
 }

package/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js

@@ -19,6 +19,8 @@ import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
+const noop = () => {};
+
 component LogBoxInspectorStackFrame(
   frame: StackFrame,
   onPress?: ?(event: GestureResponderEvent) => void,
@@ -38,7 +40,7 @@ component LogBoxInspectorStackFrame(
           default: 'transparent',
           pressed: onPress ? LogBoxStyle.getBackgroundColor(1) : 'transparent',
         }}
-        onPress={onPress}
+        onPress={onPress ?? noop}
         style={styles.frame}>
         <Text
           id="logbox_stack_frame_text"

package/Libraries/LogBox/UI/LogBoxNotification.js

@@ -27,6 +27,7 @@ type Props = Readonly<{
   level: 'warn' | 'error',
   onPressOpen: () => void,
   onPressDismiss: () => void,
+  onFocusChange?: ?(focused: boolean) => void,
 }>;
 
 export default function LogBoxNotification(props: Props): React.Node {
@@ -42,6 +43,7 @@ export default function LogBoxNotification(props: Props): React.Node {
       <LogBoxButton
         id={`logbox_open_button_${level}`}
         onPress={props.onPressOpen}
+        onFocusChange={props.onFocusChange}
         style={styles.press}
         backgroundColor={{
           default: LogBoxStyle.getBackgroundColor(1),

package/Libraries/Modal/Modal.js

@@ -288,12 +288,16 @@ class Modal extends React.Component<ModalProps, ModalState> {
       return null;
     }
 
-    const containerStyles = {
-      backgroundColor:
-        this.props.transparent === true
-          ? 'transparent'
-          : (this.props.backdropColor ?? 'white'),
-    };
+    // Only override backgroundColor when transparent or backdropColor are
+    // explicitly set, so that these Modal-specific props take precedence
+    // over the generic style prop. The default backgroundColor ('white')
+    // is defined in styles.container below.
+    const containerStyles: {backgroundColor?: ColorValue} = {};
+    if (this.props.transparent === true) {
+      containerStyles.backgroundColor = 'transparent';
+    } else if (this.props.backdropColor != null) {
+      containerStyles.backgroundColor = this.props.backdropColor;
+    }
 
     let animationType = this.props.animationType || 'none';
 
@@ -349,7 +353,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
           <ScrollView.Context.Provider value={null}>
             <View
               // $FlowFixMe[incompatible-type]
-              style={[styles.container, containerStyles]}
+              style={[styles.container, this.props.style, containerStyles]}
               collapsable={false}>
               {innerChildren}
             </View>
@@ -380,6 +384,7 @@ const styles = StyleSheet.create({
     [side]: 0,
     top: 0,
     flex: 1,
+    backgroundColor: 'white',
   },
 });
 

package/Libraries/NativeAnimation/Nodes/RCTInterpolationAnimatedNode.mm

@@ -80,8 +80,6 @@ NSString *RCTInterpolateString(
   RCTInterpolationOutputType _outputType;
   id _Nullable _outputvalue;
   NSString *_Nullable _outputPattern;
-
-  NSArray<NSTextCheckingResult *> *_matches;
 }
 
 - (instancetype)initWithTag:(NSNumber *)tag config:(NSDictionary<NSString *, id> *)config

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -222,6 +222,7 @@ const validAttributesForNonEventProps = {
   renderToHardwareTextureAndroid: true,
   testID: true,
   nativeID: true,
+  id: true,
   accessibilityLabelledBy: true,
   accessibilityLabel: true,
   accessibilityHint: true,
@@ -234,6 +235,19 @@ const validAttributesForNonEventProps = {
   experimental_accessibilityOrder: true,
   importantForAccessibility: true,
   screenReaderFocusable: true,
+  'aria-busy': true,
+  'aria-checked': true,
+  'aria-disabled': true,
+  'aria-expanded': true,
+  'aria-hidden': true,
+  'aria-label': true,
+  'aria-labelledby': true,
+  'aria-live': true,
+  'aria-selected': true,
+  'aria-valuemax': true,
+  'aria-valuemin': true,
+  'aria-valuenow': true,
+  'aria-valuetext': true,
   role: true,
   rotation: true,
   scaleX: true,
@@ -376,6 +390,7 @@ const validAttributesForNonEventProps = {
   borderBlockEndColor: colorAttribute,
   borderBlockStartColor: colorAttribute,
   focusable: true,
+  tabIndex: true,
   backfaceVisibility: true,
 } as const;