@office-iss/react-native-win32 0.0.0-canary.295 → 0.0.0-canary.297

package/Libraries/Image/Image.android.js

@@ -8,8 +8,10 @@
  * @format
  */
 
+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 {AbstractImageAndroid, ImageAndroid} from './ImageTypes.flow';
 
 import flattenStyle from '../StyleSheet/flattenStyle';
@@ -126,125 +128,129 @@ async function queryCache(
  *
  * See https://reactnative.dev/docs/image
  */
-let BaseImage: AbstractImageAndroid = React.forwardRef(
-  (props, forwardedRef) => {
-    let source = getImageSourcesFromImageProps(props) || {
-      uri: undefined,
-      width: undefined,
-      height: undefined,
-    };
-    const defaultSource = resolveAssetSource(props.defaultSource);
-    const loadingIndicatorSource = resolveAssetSource(
-      props.loadingIndicatorSource,
-    );
+let BaseImage: AbstractImageAndroid = ({
+  ref: forwardedRef,
+  ...props
+}: {
+  ref?: React.RefSetter<HostInstance>,
+  ...ImageProps,
+}) => {
+  let source = getImageSourcesFromImageProps(props) || {
+    uri: undefined,
+    width: undefined,
+    height: undefined,
+  };
+  const defaultSource = resolveAssetSource(props.defaultSource);
+  const loadingIndicatorSource = resolveAssetSource(
+    props.loadingIndicatorSource,
+  );
 
-    if (props.children != null) {
-      throw new Error(
-        'The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.',
-      );
-    }
+  if (props.children != null) {
+    throw new Error(
+      'The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.',
+    );
+  }
 
-    if (props.defaultSource != null && props.loadingIndicatorSource != null) {
-      throw new Error(
-        'The <Image> component cannot have defaultSource and loadingIndicatorSource at the same time. Please use either defaultSource or loadingIndicatorSource.',
-      );
-    }
+  if (props.defaultSource != null && props.loadingIndicatorSource != null) {
+    throw new Error(
+      'The <Image> component cannot have defaultSource and loadingIndicatorSource at the same time. Please use either defaultSource or loadingIndicatorSource.',
+    );
+  }
 
-    let style: ImageStyleProp;
-    let sources;
-    if (Array.isArray(source)) {
-      style = [styles.base, props.style];
-      sources = source;
-    } else {
-      const {uri} = source;
-      if (uri === '') {
-        console.warn('source.uri should not be an empty string');
-      }
-      const width = source.width ?? props.width;
-      const height = source.height ?? props.height;
-      style = [{width, height}, styles.base, props.style];
-      sources = [source];
+  let style: ImageStyleProp;
+  let sources;
+  if (Array.isArray(source)) {
+    style = [styles.base, props.style];
+    sources = source;
+  } else {
+    const {uri} = source;
+    if (uri === '') {
+      console.warn('source.uri should not be an empty string');
     }
+    const width = source.width ?? props.width;
+    const height = source.height ?? props.height;
+    style = [{width, height}, styles.base, props.style];
+    sources = [source];
+  }
 
-    const {onLoadStart, onLoad, onLoadEnd, onError} = props;
-    const nativeProps = {
-      ...props,
-      style,
-      shouldNotifyLoadEvents: !!(onLoadStart || onLoad || onLoadEnd || onError),
-      // 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.
-      src: sources,
-      source: sources,
-      /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
-       * when making Flow check .android.js files. */
-      headers: (source?.[0]?.headers || source?.headers: ?{[string]: string}),
-      defaultSource: defaultSource ? defaultSource.uri : null,
-      loadingIndicatorSrc: loadingIndicatorSource
-        ? loadingIndicatorSource.uri
-        : null,
-      accessibilityLabel:
-        props['aria-label'] ?? props.accessibilityLabel ?? props.alt,
-      accessibilityLabelledBy:
-        props?.['aria-labelledby'] ?? props?.accessibilityLabelledBy,
-      accessible: props.alt !== undefined ? true : props.accessible,
-      accessibilityState: {
-        busy: props['aria-busy'] ?? props.accessibilityState?.busy,
-        checked: props['aria-checked'] ?? props.accessibilityState?.checked,
-        disabled: props['aria-disabled'] ?? props.accessibilityState?.disabled,
-        expanded: props['aria-expanded'] ?? props.accessibilityState?.expanded,
-        selected: props['aria-selected'] ?? props.accessibilityState?.selected,
-      },
-    };
-
-    const flattenedStyle = flattenStyle<ImageStyleProp>(style);
-    const objectFit = convertObjectFitToResizeMode(flattenedStyle?.objectFit);
-    const resizeMode =
-      objectFit || props.resizeMode || flattenedStyle?.resizeMode || 'cover';
+  const {onLoadStart, onLoad, onLoadEnd, onError} = props;
+  const nativeProps = {
+    ...props,
+    style,
+    shouldNotifyLoadEvents: !!(onLoadStart || onLoad || onLoadEnd || onError),
+    // 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.
+    src: sources,
+    source: sources,
+    /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
+     * when making Flow check .android.js files. */
+    headers: (source?.[0]?.headers || source?.headers: ?{[string]: string}),
+    defaultSource: defaultSource ? defaultSource.uri : null,
+    loadingIndicatorSrc: loadingIndicatorSource
+      ? loadingIndicatorSource.uri
+      : null,
+    accessibilityLabel:
+      props['aria-label'] ?? props.accessibilityLabel ?? props.alt,
+    accessibilityLabelledBy:
+      props?.['aria-labelledby'] ?? props?.accessibilityLabelledBy,
+    accessible: props.alt !== undefined ? true : props.accessible,
+    accessibilityState: {
+      busy: props['aria-busy'] ?? props.accessibilityState?.busy,
+      checked: props['aria-checked'] ?? props.accessibilityState?.checked,
+      disabled: props['aria-disabled'] ?? props.accessibilityState?.disabled,
+      expanded: props['aria-expanded'] ?? props.accessibilityState?.expanded,
+      selected: props['aria-selected'] ?? props.accessibilityState?.selected,
+    },
+  };
 
-    const actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);
+  const flattenedStyle = flattenStyle<ImageStyleProp>(style);
+  const objectFit = convertObjectFitToResizeMode(flattenedStyle?.objectFit);
+  const resizeMode =
+    objectFit || props.resizeMode || flattenedStyle?.resizeMode || 'cover';
 
-    return (
-      <ImageAnalyticsTagContext.Consumer>
-        {analyticTag => {
-          const nativePropsWithAnalytics =
-            analyticTag !== null
-              ? {
-                  ...nativeProps,
-                  internal_analyticTag: analyticTag,
-                }
-              : nativeProps;
-          return (
-            <TextAncestor.Consumer>
-              {hasTextAncestor => {
-                if (hasTextAncestor) {
-                  return (
-                    <TextInlineImageNativeComponent
-                      // $FlowFixMe[incompatible-type]
-                      style={style}
-                      resizeMode={resizeMode}
-                      headers={nativeProps.headers}
-                      src={sources}
-                      ref={actualRef}
-                    />
-                  );
-                }
+  const actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);
 
+  return (
+    <ImageAnalyticsTagContext.Consumer>
+      {analyticTag => {
+        const nativePropsWithAnalytics =
+          analyticTag !== null
+            ? {
+                ...nativeProps,
+                internal_analyticTag: analyticTag,
+              }
+            : nativeProps;
+        return (
+          <TextAncestor.Consumer>
+            {hasTextAncestor => {
+              if (hasTextAncestor) {
                 return (
-                  <ImageViewNativeComponent
-                    {...nativePropsWithAnalytics}
+                  <TextInlineImageNativeComponent
+                    // $FlowFixMe[incompatible-type]
+                    style={style}
                     resizeMode={resizeMode}
+                    headers={nativeProps.headers}
+                    src={sources}
                     ref={actualRef}
                   />
                 );
-              }}
-            </TextAncestor.Consumer>
-          );
-        }}
-      </ImageAnalyticsTagContext.Consumer>
-    );
-  },
-);
+              }
+
+              return (
+                <ImageViewNativeComponent
+                  {...nativePropsWithAnalytics}
+                  resizeMode={resizeMode}
+                  ref={actualRef}
+                />
+              );
+            }}
+          </TextAncestor.Consumer>
+        );
+      }}
+    </ImageAnalyticsTagContext.Consumer>
+  );
+};
 
 const imageComponentDecorator = unstable_getImageComponentDecorator();
 if (imageComponentDecorator != null) {

package/Libraries/Image/Image.ios.js

@@ -8,8 +8,10 @@
  * @format
  */
 
+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 {AbstractImageIOS, ImageIOS} from './ImageTypes.flow';
 import type {ImageSize} from './NativeImageLoaderAndroid';
 
@@ -105,7 +107,13 @@ async function queryCache(
  *
  * See https://reactnative.dev/docs/image
  */
-let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
+let BaseImage: AbstractImageIOS = ({
+  ref: forwardedRef,
+  ...props
+}: {
+  ref?: React.RefSetter<HostInstance>,
+  ...ImageProps,
+}) => {
   const source = getImageSourcesFromImageProps(props) || {
     uri: undefined,
     width: undefined,
@@ -180,7 +188,7 @@ let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
       }}
     </ImageAnalyticsTagContext.Consumer>
   );
-});
+};
 
 const imageComponentDecorator = unstable_getImageComponentDecorator();
 if (imageComponentDecorator != null) {

package/Libraries/Image/Image.win32.js

@@ -8,12 +8,14 @@
  * @format
  */
 
+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 {AbstractImageIOS, ImageIOS} from './ImageTypes.flow';
 import TextAncestor from '../Text/TextAncestor'; // [Windows]
 import invariant from 'invariant'; // [Windows]
 
-import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
 import NativeImageLoaderWin32 from './NativeImageLoaderWin32'; // [Win32] Replace iOS
 
 import {createRootTag} from '../ReactNative/RootTag';
@@ -122,7 +124,13 @@ async function queryCache(
  *
  * See https://reactnative.dev/docs/image
  */
-let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
+let BaseImage: AbstractImageIOS = ({
+  ref: forwardedRef,
+  ...props
+}: {
+  ref?: React.RefSetter<HostInstance>,
+  ...ImageProps,
+}) => {
   const source = getImageSourcesFromImageProps(props) || {
     uri: undefined,
     width: undefined,
@@ -215,7 +223,7 @@ let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
       }}
     </TextAncestor.Consumer>
   );
-});
+};
 
 const imageComponentDecorator = unstable_getImageComponentDecorator();
 if (imageComponentDecorator != null) {

package/Libraries/Image/ImageAnalyticsTagContext.js

@@ -9,11 +9,11 @@
  */
 
 import * as React from 'react';
+import {createContext} from 'react';
 
 type ContextType = ?string;
 
-const Context: React.Context<ContextType> =
-  React.createContext<ContextType>(null);
+const Context: React.Context<ContextType> = createContext<ContextType>(null);
 
 if (__DEV__) {
   Context.displayName = 'ImageAnalyticsTagContext';

package/Libraries/Image/RelativeImageStub.js

@@ -27,4 +27,5 @@ const RelativeImageStub = (AssetRegistry.registerAsset({
   type: 'png',
 }): number);
 
+// eslint-disable-next-line lint/no-commonjs-exports
 module.exports = RelativeImageStub;

package/Libraries/Lists/FlatList.d.ts

@@ -155,16 +155,20 @@ export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
   removeClippedSubviews?: boolean | undefined;
 
   /**
-   * Fades out the edges of the scroll content.
+   * Controls the fading effect at the edges of the scroll content.
    *
-   * If the value is greater than 0, the fading edges will be set accordingly
-   * to the current scroll direction and position,
-   * indicating if there is more content to show.
+   * A value greater than 0 will apply the fading effect, indicating more content is available
+   * to scroll.
+   *
+   * You can specify a single number to apply the same fading length to both edges.
+   * Alternatively, use an object with `start` and `end` properties to set different
+   * fading lengths for the start and end of the scroll content.
    *
    * The default value is 0.
+   *
    * @platform android
    */
-  fadingEdgeLength?: number | undefined;
+  fadingEdgeLength?: number | {start: number; end: number} | undefined;
 }
 
 export abstract class FlatListComponent<

package/Libraries/Lists/FlatList.js

@@ -145,7 +145,7 @@ type OptionalProps<ItemT> = {
   /**
    * See `ScrollView` for flow type and further documentation.
    */
-  fadingEdgeLength?: ?number,
+  fadingEdgeLength?: ?number | {start: number, end: number},
   /**
    * Enable an optimization to memoize the item renderer to prevent unnecessary rerenders.
    */

package/Libraries/Lists/SectionListModern.js

@@ -21,7 +21,7 @@ import type {
 import Platform from '../Utilities/Platform';
 import VirtualizedLists from '@react-native/virtualized-lists';
 import * as React from 'react';
-import {forwardRef, useImperativeHandle, useRef} from 'react';
+import {useImperativeHandle, useRef} from 'react';
 
 const VirtualizedSectionList = VirtualizedLists.VirtualizedSectionList;
 
@@ -168,7 +168,13 @@ export type Props<ItemT, SectionT = DefaultSectionT> = $ReadOnly<{
 const SectionList: component(
   ref?: React.RefSetter<any>,
   ...Props<any, DefaultSectionT>
-) = forwardRef<Props<any, DefaultSectionT>, any>((props, ref) => {
+) = ({
+  ref,
+  ...props
+}: {
+  ref?: React.RefSetter<any>,
+  ...Props<any, DefaultSectionT>,
+}) => {
   const propsWithDefaults = {
     stickySectionHeadersEnabled: Platform.OS === 'ios',
     ...props,
@@ -237,6 +243,6 @@ const SectionList: component(
       getItem={(items, index) => items[index]}
     />
   );
-});
+};
 
 export default SectionList;

package/Libraries/LogBox/UI/LogBoxButton.js

@@ -17,6 +17,7 @@ import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
+import {useState} from 'react';
 
 type Props = $ReadOnly<{
   id?: string,
@@ -31,7 +32,7 @@ type Props = $ReadOnly<{
 }>;
 
 function LogBoxButton(props: Props): React.Node {
-  const [pressed, setPressed] = React.useState(false);
+  const [pressed, setPressed] = useState(false);
 
   let backgroundColor = props.backgroundColor;
   if (!backgroundColor) {

package/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js

@@ -19,6 +19,7 @@ import LogBoxButton from './LogBoxButton';
 import LogBoxInspectorSection from './LogBoxInspectorSection';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
+import {useState} from 'react';
 
 type Props = $ReadOnly<{
   log: LogBoxLog,
@@ -49,7 +50,7 @@ function getPrettyFileName(path: string) {
   return fileName;
 }
 function LogBoxInspectorReactFrames(props: Props): React.Node {
-  const [collapsed, setCollapsed] = React.useState(true);
+  const [collapsed, setCollapsed] = useState(true);
   if (
     props.log.getAvailableComponentStack() == null ||
     props.log.getAvailableComponentStack().length < 1

package/Libraries/LogBox/UI/LogBoxInspectorReactFrames.win32.js

@@ -19,6 +19,7 @@ import LogBoxButton from './LogBoxButton';
 import LogBoxInspectorSection from './LogBoxInspectorSection';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
+import {useState} from 'react';
 
 type Props = $ReadOnly<{
   log: LogBoxLog,
@@ -49,7 +50,7 @@ function getPrettyFileName(path: string) {
   return fileName;
 }
 function LogBoxInspectorReactFrames(props: Props): React.Node {
-  const [collapsed, setCollapsed] = React.useState(true);
+  const [collapsed, setCollapsed] = useState(true);
   if (
     props.log.getAvailableComponentStack() == null ||
     props.log.getAvailableComponentStack().length < 1

package/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js

@@ -17,6 +17,7 @@ import Text from '../../Text/Text';
 import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
+import {useEffect, useState} from 'react';
 
 type Props = $ReadOnly<{
   onPress?: ?(event: GestureResponderEvent) => void,
@@ -24,12 +25,12 @@ type Props = $ReadOnly<{
 }>;
 
 function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
-  const [state, setState] = React.useState({
+  const [state, setState] = useState({
     animation: null,
     rotate: null,
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (props.status === 'PENDING') {
       if (state.animation == null) {
         const animated = new Animated.Value(0);

package/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.win32.js

@@ -17,6 +17,7 @@ import Text from '../../Text/Text';
 import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
+import {useEffect, useState} from 'react';
 
 type Props = $ReadOnly<{
   onPress?: ?(event: GestureResponderEvent) => void,
@@ -26,12 +27,12 @@ type Props = $ReadOnly<{
 function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
   // [Win32] Dont use Animated
   /*
-  const [state, setState] = React.useState({
+  const [state, setState] = useState({
     animation: null,
     rotate: null,
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (props.status === 'PENDING') {
       if (state.animation == null) {
         const animated = new Animated.Value(0);

package/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js

@@ -22,6 +22,7 @@ import LogBoxInspectorSourceMapStatus from './LogBoxInspectorSourceMapStatus';
 import LogBoxInspectorStackFrame from './LogBoxInspectorStackFrame';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
+import {useState} from 'react';
 
 type Props = $ReadOnly<{
   log: LogBoxLog,
@@ -65,7 +66,7 @@ export function getCollapseMessage(
 }
 
 function LogBoxInspectorStackFrames(props: Props): React.Node {
-  const [collapsed, setCollapsed] = React.useState(() => {
+  const [collapsed, setCollapsed] = useState(() => {
     // Only collapse frames initially if some frames are not collapsed.
     return props.log.getAvailableStack().some(({collapse}) => !collapse);
   });

package/Libraries/ReactNative/AppContainer-dev.js

@@ -6,7 +6,6 @@
  *
  * @flow strict-local
  * @format
- * @oncall react_native
  */
 
 import type {
@@ -24,6 +23,7 @@ import LogBoxNotificationContainer from '../LogBox/LogBoxNotificationContainer';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import {RootTagContext, createRootTag} from './RootTag';
 import * as React from 'react';
+import {useRef} from 'react';
 
 const {useEffect, useState, useCallback} = React;
 
@@ -95,9 +95,9 @@ const AppContainer = ({
   WrapperComponent,
   rootViewStyle,
 }: Props): React.Node => {
-  const appContainerRootViewRef: AppContainerRootViewRef = React.useRef(null);
-  const innerViewRef: InspectedViewRef = React.useRef(null);
-  const debuggingOverlayRef: DebuggingOverlayRef = React.useRef(null);
+  const appContainerRootViewRef: AppContainerRootViewRef = useRef(null);
+  const innerViewRef: InspectedViewRef = useRef(null);
+  const debuggingOverlayRef: DebuggingOverlayRef = useRef(null);
 
   useSubscribeToDebuggingOverlayRegistry(
     appContainerRootViewRef,

package/Libraries/ReactNative/AppContainer-prod.js

@@ -6,7 +6,6 @@
  *
  * @flow strict-local
  * @format
- * @oncall react_native
  */
 
 import type {Props} from './AppContainer';

package/Libraries/ReactNative/RootTag.js

@@ -9,11 +9,11 @@
  */
 
 import * as React from 'react';
+import {createContext} from 'react';
 
 export opaque type RootTag = number;
 
-export const RootTagContext: React.Context<RootTag> =
-  React.createContext<RootTag>(0);
+export const RootTagContext: React.Context<RootTag> = createContext<RootTag>(0);
 
 if (__DEV__) {
   RootTagContext.displayName = 'RootTagContext';

package/Libraries/ReactPrivate/ReactNativePrivateInterface.js

@@ -51,6 +51,7 @@ export type {PublicRootInstance} from '../ReactNative/ReactFabricPublicInstance/
 export type PublicTextInstance = ReturnType<createPublicTextInstance>;
 
 // flowlint unsafe-getters-setters:off
+// eslint-disable-next-line lint/no-commonjs-exports
 module.exports = {
   get BatchedBridge(): BatchedBridge {
     return require('../BatchedBridge/BatchedBridge').default;