react-native-windows 0.0.0-canary.992 → 0.0.0-canary.993

package/Libraries/Image/Image.windows.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';
 
@@ -107,7 +109,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,
@@ -214,28 +222,30 @@ let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
   } else {
     return (
       <ImageAnalyticsTagContext.Consumer>
-        {analyticTag => (
-          <ImageViewNativeComponent
-            accessibilityState={_accessibilityState}
-            {...restProps}
-            accessible={props.alt !== undefined ? true : props.accessible}
-            accessibilityLabel={accessibilityLabel ?? props.alt}
-            accessibilityLevel={accessibilityLevel} // Windows
-            accessibilityPosInSet={accessibilityPosInSet} // Windows
-            accessibilitySetSize={accessibilitySetSize} // Windows
-            ref={actualRef}
-            style={style}
-            resizeMode={resizeMode}
-            tintColor={tintColor}
-            source={sources}
-            internal_analyticTag={analyticTag}
-          />
-        )}
+        {analyticTag => {
+          return (
+            <ImageViewNativeComponent
+              accessibilityState={_accessibilityState}
+              {...restProps}
+              accessible={props.alt !== undefined ? true : props.accessible}
+              accessibilityLabel={accessibilityLabel ?? props.alt}
+              accessibilityLevel={accessibilityLevel} // Windows
+              accessibilityPosInSet={accessibilityPosInSet} // Windows
+              accessibilitySetSize={accessibilitySetSize} // Windows
+              ref={actualRef}
+              style={style}
+              resizeMode={resizeMode}
+              tintColor={tintColor}
+              source={sources}
+              internal_analyticTag={analyticTag}
+            />
+          );
+        }}
       </ImageAnalyticsTagContext.Consumer>
     );
+    // Windows]
   }
-  // Windows]
-});
+};
 
 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.windows.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/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;

package/Libraries/Renderer/shims/ReactNativeTypes.js

@@ -7,25 +7,21 @@
  * @noformat
  * @nolint
  * @flow strict
- * @generated SignedSource<<2264e9839602043a41f1e13913b43b0f>>
+ * @generated SignedSource<<4216c04f5a8c40a833b0146588fab5fa>>
  */
 
-import type {
-  Component as ReactComponent,
-  ElementRef,
-  ElementType,
-  MixedElement,
-} from 'react';
 import type {
   // $FlowFixMe[nonstrict-import] TODO(@rubennorte)
-  MeasureOnSuccessCallback,
+  HostInstance as PublicInstance,
   // $FlowFixMe[nonstrict-import] TODO(@rubennorte)
-  PublicInstance,
+  MeasureOnSuccessCallback,
   // $FlowFixMe[nonstrict-import] TODO(@rubennorte)
   PublicRootInstance,
   // $FlowFixMe[nonstrict-import] TODO(@rubennorte)
   PublicTextInstance,
-} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+} from 'react-native';
+
+import * as React from 'react';
 
 export type AttributeType<T, V> =
   | true
@@ -97,8 +93,8 @@ type InspectorDataProps = $ReadOnly<{
 }>;
 
 type InspectorDataGetter = (
-  <TElementType: ElementType>(
-    componentOrHandle: ElementRef<TElementType> | number,
+  <TElementType: React.ElementType>(
+    componentOrHandle: React.ElementRef<TElementType> | number,
   ) => ?number,
 ) => $ReadOnly<{
   measure: (callback: MeasureOnSuccessCallback) => void,
@@ -141,7 +137,7 @@ export type RenderRootOptions = {
       +componentStack?: ?string,
       // $FlowFixMe[unclear-type] unknown props and state.
       // $FlowFixMe[value-as-type] Component in react repo is any-typed, but it will be well typed externally.
-      +errorBoundary?: ?ReactComponent<any, any>,
+      +errorBoundary?: ?React.Component<any, any>,
     },
   ) => void,
   onRecoverableError?: (
@@ -155,11 +151,11 @@ export type RenderRootOptions = {
  * Provide minimal Flow typing for the high-level RN API and call it a day.
  */
 export type ReactNativeType = {
-  findHostInstance_DEPRECATED<TElementType: ElementType>(
-    componentOrHandle: ?(ElementRef<TElementType> | number),
+  findHostInstance_DEPRECATED<TElementType: React.ElementType>(
+    componentOrHandle: ?(React.ElementRef<TElementType> | number),
   ): ?PublicInstance,
-  findNodeHandle<TElementType: ElementType>(
-    componentOrHandle: ?(ElementRef<TElementType> | number),
+  findNodeHandle<TElementType: React.ElementType>(
+    componentOrHandle: ?(React.ElementRef<TElementType> | number),
   ): ?number,
   isChildPublicInstance(parent: PublicInstance, child: PublicInstance): boolean,
   dispatchCommand(
@@ -169,11 +165,11 @@ export type ReactNativeType = {
   ): void,
   sendAccessibilityEvent(handle: PublicInstance, eventType: string): void,
   render(
-    element: MixedElement,
+    element: React.MixedElement,
     containerTag: number,
     callback: ?() => void,
     options: ?RenderRootOptions,
-  ): ?ElementRef<ElementType>,
+  ): ?React.ElementRef<React.ElementType>,
   unmountComponentAtNode(containerTag: number): void,
   unmountComponentAtNodeAndRemoveContainer(containerTag: number): void,
   +unstable_batchedUpdates: <T>(fn: (T) => void, bookkeeping: T) => void,
@@ -184,11 +180,11 @@ export opaque type Node = mixed;
 export opaque type InternalInstanceHandle = mixed;
 
 export type ReactFabricType = {
-  findHostInstance_DEPRECATED<TElementType: ElementType>(
-    componentOrHandle: ?(ElementRef<TElementType> | number),
+  findHostInstance_DEPRECATED<TElementType: React.ElementType>(
+    componentOrHandle: ?(React.ElementRef<TElementType> | number),
   ): ?PublicInstance,
-  findNodeHandle<TElementType: ElementType>(
-    componentOrHandle: ?(ElementRef<TElementType> | number),
+  findNodeHandle<TElementType: React.ElementType>(
+    componentOrHandle: ?(React.ElementRef<TElementType> | number),
   ): ?number,
   dispatchCommand(
     handle: PublicInstance,
@@ -198,12 +194,12 @@ export type ReactFabricType = {
   isChildPublicInstance(parent: PublicInstance, child: PublicInstance): boolean,
   sendAccessibilityEvent(handle: PublicInstance, eventType: string): void,
   render(
-    element: MixedElement,
+    element: React.MixedElement,
     containerTag: number,
     callback: ?() => void,
     concurrentRoot: ?boolean,
     options: ?RenderRootOptions,
-  ): ?ElementRef<ElementType>,
+  ): ?React.ElementRef<React.ElementType>,
   unmountComponentAtNode(containerTag: number): void,
   getNodeFromInternalInstanceHandle(
     internalInstanceHandle: InternalInstanceHandle,