react-native-windows 0.71.10 → 0.72.0-preview.2

package/Libraries/Components/ScrollView/ScrollViewNativeComponent.js

@@ -60,21 +60,31 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           borderRadius: true,
           nestedScrollEnabled: true,
           borderStyle: true,
-          borderRightColor: {process: require('../../StyleSheet/processColor')},
-          borderColor: {process: require('../../StyleSheet/processColor')},
+          borderRightColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          borderColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
           borderBottomColor: {
-            process: require('../../StyleSheet/processColor'),
+            process: require('../../StyleSheet/processColor').default,
           },
           persistentScrollbar: true,
-          endFillColor: {process: require('../../StyleSheet/processColor')},
+          endFillColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
           fadingEdgeLength: true,
           overScrollMode: true,
           borderTopLeftRadius: true,
           scrollPerfTag: true,
-          borderTopColor: {process: require('../../StyleSheet/processColor')},
+          borderTopColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
           removeClippedSubviews: true,
           borderTopRightRadius: true,
-          borderLeftColor: {process: require('../../StyleSheet/processColor')},
+          borderLeftColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
           pointerEvents: true,
         },
       }

package/Libraries/Components/ScrollView/ScrollViewNativeComponent.windows.js

@@ -0,0 +1,175 @@
+/**
+ * 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 {
+  HostComponent,
+  PartialViewConfig,
+} from '../../Renderer/shims/ReactNativeTypes';
+import type {ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';
+
+import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
+import {ConditionallyIgnoredEventHandlers} from '../../NativeComponent/ViewConfigIgnore';
+import Platform from '../../Utilities/Platform';
+
+export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
+  Platform.OS === 'android'
+    ? {
+        uiViewClassName: 'RCTScrollView',
+        bubblingEventTypes: {},
+        directEventTypes: {
+          topMomentumScrollBegin: {
+            registrationName: 'onMomentumScrollBegin',
+          },
+          topMomentumScrollEnd: {
+            registrationName: 'onMomentumScrollEnd',
+          },
+          topScroll: {
+            registrationName: 'onScroll',
+          },
+          topScrollBeginDrag: {
+            registrationName: 'onScrollBeginDrag',
+          },
+          topScrollEndDrag: {
+            registrationName: 'onScrollEndDrag',
+          },
+        },
+        validAttributes: {
+          contentOffset: {
+            diff: require('../../Utilities/differ/pointsDiffer'),
+          },
+          decelerationRate: true,
+          disableIntervalMomentum: true,
+          pagingEnabled: true,
+          scrollEnabled: true,
+          showsVerticalScrollIndicator: true,
+          snapToAlignment: true,
+          snapToEnd: true,
+          snapToInterval: true,
+          snapToOffsets: true,
+          snapToStart: true,
+          borderBottomLeftRadius: true,
+          borderBottomRightRadius: true,
+          sendMomentumEvents: true,
+          borderRadius: true,
+          nestedScrollEnabled: true,
+          borderStyle: true,
+          borderRightColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          borderColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          borderBottomColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          persistentScrollbar: true,
+          endFillColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          fadingEdgeLength: true,
+          overScrollMode: true,
+          borderTopLeftRadius: true,
+          scrollPerfTag: true,
+          borderTopColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          removeClippedSubviews: true,
+          borderTopRightRadius: true,
+          borderLeftColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          pointerEvents: true,
+        },
+      }
+    : {
+        uiViewClassName: 'RCTScrollView',
+        bubblingEventTypes: {},
+        directEventTypes: {
+          topMomentumScrollBegin: {
+            registrationName: 'onMomentumScrollBegin',
+          },
+          topMomentumScrollEnd: {
+            registrationName: 'onMomentumScrollEnd',
+          },
+          topScroll: {
+            registrationName: 'onScroll',
+          },
+          topScrollBeginDrag: {
+            registrationName: 'onScrollBeginDrag',
+          },
+          topScrollEndDrag: {
+            registrationName: 'onScrollEndDrag',
+          },
+          topScrollToTop: {
+            registrationName: 'onScrollToTop',
+          },
+        },
+        validAttributes: {
+          alwaysBounceHorizontal: true,
+          alwaysBounceVertical: true,
+          automaticallyAdjustContentInsets: true,
+          automaticallyAdjustKeyboardInsets: true,
+          automaticallyAdjustsScrollIndicatorInsets: true,
+          bounces: true,
+          bouncesZoom: true,
+          canCancelContentTouches: true,
+          centerContent: true,
+          contentInset: {
+            diff: require('../../Utilities/differ/insetsDiffer'),
+          },
+          contentOffset: {
+            diff: require('../../Utilities/differ/pointsDiffer'),
+          },
+          contentInsetAdjustmentBehavior: true,
+          decelerationRate: true,
+          directionalLockEnabled: true,
+          disableIntervalMomentum: true,
+          indicatorStyle: true,
+          horizontal: true, // [Windows]
+          inverted: true,
+          keyboardDismissMode: true,
+          maintainVisibleContentPosition: true,
+          maximumZoomScale: true,
+          minimumZoomScale: true,
+          pagingEnabled: true,
+          pinchGestureEnabled: true,
+          scrollEnabled: true,
+          scrollEventThrottle: true,
+          scrollIndicatorInsets: {
+            diff: require('../../Utilities/differ/insetsDiffer'),
+          },
+          scrollToOverflowEnabled: true,
+          scrollsToTop: true,
+          showsHorizontalScrollIndicator: true,
+          showsVerticalScrollIndicator: true,
+          snapToAlignment: true,
+          snapToEnd: true,
+          snapToInterval: true,
+          snapToOffsets: true,
+          snapToStart: true,
+          zoomScale: true,
+          ...ConditionallyIgnoredEventHandlers({
+            onScrollBeginDrag: true,
+            onMomentumScrollEnd: true,
+            onScrollEndDrag: true,
+            onMomentumScrollBegin: true,
+            onScrollToTop: true,
+            onScroll: true,
+          }),
+        },
+      };
+
+const ScrollViewNativeComponent: HostComponent<Props> =
+  NativeComponentRegistry.get<Props>(
+    'RCTScrollView',
+    () => __INTERNAL_VIEW_CONFIG,
+  );
+
+export default ScrollViewNativeComponent;

package/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -11,6 +11,7 @@
 import type {LayoutEvent} from '../../Types/CoreEventTypes';
 
 import Animated from '../../Animated/Animated';
+import {isPublicInstance as isFabricPublicInstance} from '../../Renderer/public/ReactFabricPublicInstanceUtils';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Platform from '../../Utilities/Platform';
 import useMergeRefs from '../../Utilities/useMergeRefs';
@@ -64,10 +65,7 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
     ref.setNextHeaderY = value => {
       setNextHeaderLayoutY(value);
     };
-    // Avoid dot notation because at Meta, private properties are obfuscated.
-    // $FlowFixMe[prop-missing]
-    const _internalInstanceHandler = ref['_internalInstanceHandle']; // eslint-disable-line dot-notation
-    setIsFabric(Boolean(_internalInstanceHandler?.stateNode?.canonical));
+    setIsFabric(isFabricPublicInstance(ref));
   };
   const ref: (React.ElementRef<typeof Animated.View> | null) => void =
     // $FlowFixMe[incompatible-type] - Ref is mutated by `callbackRef`.
@@ -134,7 +132,7 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
   //    platform to JS, so we need the ShadowTree to have knowledge
   //    of the current position.
   const animatedValueListener = useCallback(
-    ({value}) => {
+    ({value}: $FlowFixMe) => {
       const _debounceTimeout: number = Platform.OS === 'android' ? 15 : 64;
       // When the AnimatedInterpolation is recreated, it always initializes
       // to a value of zero and emits a value change of 0 to its listeners.
@@ -256,13 +254,13 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
     setMeasured(true);
 
     props.onLayout(event);
-    const child = React.Children.only(props.children);
+    const child = React.Children.only<$FlowFixMe>(props.children);
     if (child.props.onLayout) {
       child.props.onLayout(event);
     }
   };
 
-  const child = React.Children.only(props.children);
+  const child = React.Children.only<$FlowFixMe>(props.children);
 
   // TODO T68319535: remove this if NativeAnimated is rewritten for Fabric
   const passthroughAnimatedPropExplicitValues =

package/Libraries/Components/ScrollView/ScrollViewViewConfig.js

@@ -41,7 +41,7 @@ const ScrollViewViewConfig = {
     directionalLockEnabled: true,
     disableIntervalMomentum: true,
     endFillColor: {
-      process: require('../../StyleSheet/processColor'),
+      process: require('../../StyleSheet/processColor').default,
     },
     fadingEdgeLength: true,
     indicatorStyle: true,

package/Libraries/Components/StatusBar/StatusBar.js

@@ -238,9 +238,11 @@ class StatusBar extends React.Component<Props> {
   });
 
   // Timer for updating the native module values at the end of the frame.
+  // $FlowFixMe[missing-local-annot]
   static _updateImmediate = null;
 
   // The current merged values from the props stack.
+  // $FlowFixMe[missing-local-annot]
   static _currentValues = null;
 
   // TODO(janic): Provide a real API to deal with status bar height. See the
@@ -387,6 +389,7 @@ class StatusBar extends React.Component<Props> {
     return newEntry;
   }
 
+  // $FlowFixMe[missing-local-annot]
   _stackEntry = null;
 
   componentDidMount() {

package/Libraries/Components/Switch/Switch.js

@@ -157,10 +157,12 @@ const SwitchWithForwardedRef: React.AbstractComponent<
 
   const ref = useMergeRefs(nativeSwitchRef, forwardedRef);
 
-  const [native, setNative] = React.useState({value: null});
+  const [native, setNative] = React.useState({value: (null: ?boolean)});
 
   const handleChange = (event: SwitchChangeEvent) => {
+    // $FlowFixMe[unused-promise]
     onChange?.(event);
+    // $FlowFixMe[unused-promise]
     onValueChange?.(event.nativeEvent.value);
     setNative({value: event.nativeEvent.value});
   };

package/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js

@@ -677,35 +677,39 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     placeholder: true,
     inlineImagePadding: true,
     contextMenuHidden: true,
-    textShadowColor: {process: require('../../StyleSheet/processColor')},
+    textShadowColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
     maxLength: true,
     selectTextOnFocus: true,
     textShadowRadius: true,
     underlineColorAndroid: {
-      process: require('../../StyleSheet/processColor'),
+      process: require('../../StyleSheet/processColor').default,
     },
     textDecorationLine: true,
     submitBehavior: true,
     textAlignVertical: true,
     fontStyle: true,
     textShadowOffset: true,
-    selectionColor: {process: require('../../StyleSheet/processColor')},
+    selectionColor: {process: require('../../StyleSheet/processColor').default},
     selection: true,
-    placeholderTextColor: {process: require('../../StyleSheet/processColor')},
+    placeholderTextColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
     importantForAutofill: true,
     lineHeight: true,
     textTransform: true,
     returnKeyType: true,
     keyboardType: true,
     multiline: true,
-    color: {process: require('../../StyleSheet/processColor')},
+    color: {process: require('../../StyleSheet/processColor').default},
     autoComplete: true,
     numberOfLines: true,
     letterSpacing: true,
     returnKeyLabel: true,
     fontSize: true,
     onKeyPress: true,
-    cursorColor: {process: require('../../StyleSheet/processColor')},
+    cursorColor: {process: require('../../StyleSheet/processColor').default},
     text: true,
     showSoftInputOnFocus: true,
     textAlign: true,
@@ -727,16 +731,22 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     editable: true,
     fontVariant: true,
     borderBottomRightRadius: true,
-    borderBottomColor: {process: require('../../StyleSheet/processColor')},
+    borderBottomColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
     borderRadius: true,
-    borderRightColor: {process: require('../../StyleSheet/processColor')},
-    borderColor: {process: require('../../StyleSheet/processColor')},
+    borderRightColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
+    borderColor: {process: require('../../StyleSheet/processColor').default},
     borderTopRightRadius: true,
     borderStyle: true,
     borderBottomLeftRadius: true,
-    borderLeftColor: {process: require('../../StyleSheet/processColor')},
+    borderLeftColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
     borderTopLeftRadius: true,
-    borderTopColor: {process: require('../../StyleSheet/processColor')},
+    borderTopColor: {process: require('../../StyleSheet/processColor').default},
   },
 };
 

package/Libraries/Components/TextInput/InputAccessoryView.d.ts

@@ -23,7 +23,7 @@ export class InputAccessoryView extends React.Component<InputAccessoryViewProps>
 export interface InputAccessoryViewProps {
   backgroundColor?: ColorValue | undefined;
 
-  children?: React.ReactNode;
+  children?: React.ReactNode | undefined;
 
   /**
    * An ID which is used to associate this InputAccessoryView to specified TextInput(s).

package/Libraries/Components/TextInput/RCTTextInputViewConfig.js

@@ -116,15 +116,21 @@ const RCTTextInputViewConfig = {
     textShadowRadius: true,
     letterSpacing: true,
     textDecorationStyle: true,
-    textDecorationColor: {process: require('../../StyleSheet/processColor')},
-    color: {process: require('../../StyleSheet/processColor')},
+    textDecorationColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
+    color: {process: require('../../StyleSheet/processColor').default},
     maxFontSizeMultiplier: true,
-    textShadowColor: {process: require('../../StyleSheet/processColor')},
+    textShadowColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
     editable: true,
     inputAccessoryViewID: true,
     caretHidden: true,
     enablesReturnKeyAutomatically: true,
-    placeholderTextColor: {process: require('../../StyleSheet/processColor')},
+    placeholderTextColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
     clearButtonMode: true,
     keyboardType: true,
     selection: true,
@@ -132,7 +138,7 @@ const RCTTextInputViewConfig = {
     submitBehavior: true,
     mostRecentEventCount: true,
     scrollEnabled: true,
-    selectionColor: {process: require('../../StyleSheet/processColor')},
+    selectionColor: {process: require('../../StyleSheet/processColor').default},
     contextMenuHidden: true,
     secureTextEntry: true,
     placeholder: true,

package/Libraries/Components/TextInput/TextInput.d.ts

@@ -21,21 +21,21 @@ import {
   NativeTouchEvent,
   TargetedEvent,
 } from '../../Types/CoreEventTypes';
-import {EventEmitter} from '../../vendor/emitter/EventEmitter';
+import EventEmitter from '../../vendor/emitter/EventEmitter';
 import {AccessibilityProps} from '../View/ViewAccessibility';
 import {ViewProps} from '../View/ViewPropTypes';
 
 export type KeyboardType =
   | 'default'
-  | 'email-address'
+  | 'number-pad'
+  | 'decimal-pad'
   | 'numeric'
+  | 'email-address'
   | 'phone-pad'
-  | 'number-pad'
-  | 'decimal-pad';
+  | 'url';
 export type KeyboardTypeIOS =
   | 'ascii-capable'
   | 'numbers-and-punctuation'
-  | 'url'
   | 'name-phone-pad'
   | 'twitter'
   | 'web-search';
@@ -272,6 +272,16 @@ export interface TextInputIOSProps {
    * If false, scrolling of the text view will be disabled. The default value is true. Only works with multiline={true}
    */
   scrollEnabled?: boolean | undefined;
+
+  /**
+   * Set line break strategy on iOS.
+   */
+  lineBreakStrategyIOS?:
+    | 'none'
+    | 'standard'
+    | 'hangul-word'
+    | 'push-out'
+    | undefined;
 }
 
 /**

package/Libraries/Components/TextInput/TextInput.flow.js

@@ -556,7 +556,7 @@ export type Props = $ReadOnly<{|
    * On Android devices manufactured by Xiaomi with Android Q,
    * when keyboardType equals 'email-address'this will be set
    * in native to 'true' to prevent a system related crash. This
-   * will cause cursor to be diabled as a side-effect.
+   * will cause cursor to be disabled as a side-effect.
    *
    */
   caretHidden?: ?boolean,