react-native-windows 0.68.1 → 0.69.0-preview.1

package/Libraries/Animated/NativeAnimatedModule.js

@@ -29,6 +29,7 @@ export interface Spec extends TurboModule {
   +startOperationBatch: () => void;
   +finishOperationBatch: () => void;
   +createAnimatedNode: (tag: number, config: AnimatedNodeConfig) => void;
+  +updateAnimatedNodeConfig?: (tag: number, config: AnimatedNodeConfig) => void;
   +getValue: (tag: number, saveValueCallback: SaveValueCallback) => void;
   +startListeningToAnimatedNodeValue: (tag: number) => void;
   +stopListeningToAnimatedNodeValue: (tag: number) => void;

package/Libraries/Animated/NativeAnimatedTurboModule.js

@@ -29,6 +29,7 @@ export interface Spec extends TurboModule {
   +startOperationBatch: () => void;
   +finishOperationBatch: () => void;
   +createAnimatedNode: (tag: number, config: AnimatedNodeConfig) => void;
+  +updateAnimatedNodeConfig?: (tag: number, config: AnimatedNodeConfig) => void;
   +getValue: (tag: number, saveValueCallback: SaveValueCallback) => void;
   +startListeningToAnimatedNodeValue: (tag: number) => void;
   +stopListeningToAnimatedNodeValue: (tag: number) => void;

package/Libraries/Animated/animations/TimingAnimation.js

@@ -19,10 +19,11 @@ const {shouldUseNativeDriver} = require('../NativeAnimatedHelper');
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {AnimationConfig, EndCallback} from './Animation';
+import type {RgbaValue} from '../nodes/AnimatedColor';
 
 import AnimatedColor from '../nodes/AnimatedColor';
 
-export type TimingAnimationConfig = {
+export type TimingAnimationConfig = $ReadOnly<{
   ...AnimationConfig,
   toValue:
     | number
@@ -33,27 +34,21 @@ export type TimingAnimationConfig = {
         ...
       }
     | AnimatedValueXY
-    | {
-        r: number,
-        g: number,
-        b: number,
-        a: number,
-        ...
-      }
+    | RgbaValue
     | AnimatedColor
     | AnimatedInterpolation,
   easing?: (value: number) => number,
   duration?: number,
   delay?: number,
-};
+}>;
 
-export type TimingAnimationConfigSingle = {
+export type TimingAnimationConfigSingle = $ReadOnly<{
   ...AnimationConfig,
   toValue: number | AnimatedValue | AnimatedInterpolation,
   easing?: (value: number) => number,
   duration?: number,
   delay?: number,
-};
+}>;
 
 let _easeInOut;
 function easeInOut() {

package/Libraries/Animated/createAnimatedComponent.js

@@ -24,8 +24,8 @@ const setAndForwardRef = require('../Utilities/setAndForwardRef');
 let animatedComponentNextId = 1;
 
 export type AnimatedComponentType<
-  Props: {+[string]: mixed, ...},
-  Instance,
+  -Props: {+[string]: mixed, ...},
+  +Instance = mixed,
 > = React.AbstractComponent<
   $ObjMap<
     Props &

package/Libraries/Animated/nodes/AnimatedColor.js

@@ -14,12 +14,15 @@ import AnimatedValue from './AnimatedValue';
 import AnimatedWithChildren from './AnimatedWithChildren';
 import normalizeColor from '../../StyleSheet/normalizeColor';
 import {processColorObject} from '../../StyleSheet/PlatformColorValueTypes';
+import NativeAnimatedHelper from '../NativeAnimatedHelper';
 
+import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {NativeColorValue} from '../../StyleSheet/PlatformColorValueTypes';
+import type {ProcessedColorValue} from '../../StyleSheet/processColor';
 
 type ColorListenerCallback = (value: string) => mixed;
-type RgbaValue = {
+export type RgbaValue = {
   +r: number,
   +g: number,
   +b: number,
@@ -38,26 +41,37 @@ const defaultColor: RgbaValue = {r: 0, g: 0, b: 0, a: 1.0};
 let _uniqueId = 1;
 
 /* eslint no-bitwise: 0 */
-function processColor(color?: ?ColorValue): ?(RgbaValue | NativeColorValue) {
+function processColor(
+  color?: ?(ColorValue | RgbaValue),
+): ?(RgbaValue | NativeColorValue) {
   if (color === undefined || color === null) {
     return null;
   }
 
-  let normalizedColor = normalizeColor(color);
+  if (isRgbaValue(color)) {
+    // $FlowIgnore[incompatible-cast] - Type is verified above
+    return (color: RgbaValue);
+  }
+
+  let normalizedColor: ?ProcessedColorValue = normalizeColor(
+    // $FlowIgnore[incompatible-cast] - Type is verified above
+    (color: ColorValue),
+  );
   if (normalizedColor === undefined || normalizedColor === null) {
     return null;
   }
 
   if (typeof normalizedColor === 'object') {
-    const processedColorObj = processColorObject(normalizedColor);
+    const processedColorObj: ?NativeColorValue =
+      processColorObject(normalizedColor);
     if (processedColorObj != null) {
       return processedColorObj;
     }
   } else if (typeof normalizedColor === 'number') {
-    const r = (normalizedColor & 0xff000000) >>> 24;
-    const g = (normalizedColor & 0x00ff0000) >>> 16;
-    const b = (normalizedColor & 0x0000ff00) >>> 8;
-    const a = (normalizedColor & 0x000000ff) / 255;
+    const r: number = (normalizedColor & 0xff000000) >>> 24;
+    const g: number = (normalizedColor & 0x00ff0000) >>> 16;
+    const b: number = (normalizedColor & 0x0000ff00) >>> 8;
+    const a: number = (normalizedColor & 0x000000ff) / 255;
 
     return {r, g, b, a};
   }
@@ -90,6 +104,7 @@ export default class AnimatedColor extends AnimatedWithChildren {
   g: AnimatedValue;
   b: AnimatedValue;
   a: AnimatedValue;
+  nativeColor: ?NativeColorValue;
   _listeners: {
     [key: string]: {
       r: string,
@@ -99,13 +114,12 @@ export default class AnimatedColor extends AnimatedWithChildren {
       ...
     },
     ...
-  };
+  } = {};
 
   constructor(valueIn?: ?(RgbaValue | RgbaAnimatedValue | ColorValue)) {
     super();
     let value: RgbaValue | RgbaAnimatedValue | ColorValue =
-      valueIn || defaultColor;
-
+      valueIn ?? defaultColor;
     if (isRgbaAnimatedValue(value)) {
       // $FlowIgnore[incompatible-cast] - Type is verified above
       const rgbaAnimatedValue: RgbaAnimatedValue = (value: RgbaAnimatedValue);
@@ -114,32 +128,65 @@ export default class AnimatedColor extends AnimatedWithChildren {
       this.b = rgbaAnimatedValue.b;
       this.a = rgbaAnimatedValue.a;
     } else {
-      // Handle potential parsable string color or platform color object
-      if (!isRgbaValue(value)) {
-        // $FlowIgnore[incompatible-cast] - Type is verified via conditionals
-        value = processColor((value: ColorValue)) || {r: 0, g: 0, b: 0, a: 1.0};
-        // TODO: support platform color
+      const processedColor: RgbaValue | NativeColorValue =
+        // $FlowIgnore[incompatible-cast] - Type is verified above
+        processColor((value: ColorValue | RgbaValue)) ?? defaultColor;
+      let initColor: RgbaValue = defaultColor;
+      if (isRgbaValue(processedColor)) {
+        // $FlowIgnore[incompatible-cast] - Type is verified above
+        initColor = (processedColor: RgbaValue);
+      } else {
+        // $FlowIgnore[incompatible-cast] - Type is verified above
+        this.nativeColor = (processedColor: NativeColorValue);
       }
 
-      // $FlowIgnore[incompatible-cast] - Type is verified via conditionals
-      const rgbaValue: RgbaValue = (value: RgbaValue);
-      this.r = new AnimatedValue(rgbaValue.r);
-      this.g = new AnimatedValue(rgbaValue.g);
-      this.b = new AnimatedValue(rgbaValue.b);
-      this.a = new AnimatedValue(rgbaValue.a);
+      this.r = new AnimatedValue(initColor.r);
+      this.g = new AnimatedValue(initColor.g);
+      this.b = new AnimatedValue(initColor.b);
+      this.a = new AnimatedValue(initColor.a);
+
+      if (this.nativeColor) {
+        if (!this.__isNative) {
+          this.__makeNative();
+        }
+      }
     }
-    this._listeners = {};
   }
 
   /**
    * Directly set the value. This will stop any animations running on the value
    * and update all the bound properties.
    */
-  setValue(value: {r: number, g: number, b: number, a: number, ...}): void {
-    this.r.setValue(value.r);
-    this.g.setValue(value.g);
-    this.b.setValue(value.b);
-    this.a.setValue(value.a);
+  setValue(value: RgbaValue | ColorValue): void {
+    this.nativeColor = null;
+
+    const processedColor: RgbaValue | NativeColorValue =
+      processColor(value) ?? defaultColor;
+    if (isRgbaValue(processedColor)) {
+      // $FlowIgnore[incompatible-cast] - Type is verified above
+      const rgbaValue: RgbaValue = (processedColor: RgbaValue);
+      this.r.setValue(rgbaValue.r);
+      this.g.setValue(rgbaValue.g);
+      this.b.setValue(rgbaValue.b);
+      this.a.setValue(rgbaValue.a);
+    } else {
+      // $FlowIgnore[incompatible-cast] - Type is verified above
+      this.nativeColor = (processedColor: NativeColorValue);
+    }
+
+    if (this.nativeColor) {
+      if (!this.__isNative) {
+        this.__makeNative();
+      }
+
+      const nativeTag = this.__getNativeTag();
+      NativeAnimatedHelper.API.setWaitingForIdentifier(nativeTag.toString());
+      NativeAnimatedHelper.API.updateAnimatedNodeConfig(
+        nativeTag,
+        this.__getNativeConfig(),
+      );
+      NativeAnimatedHelper.API.unsetWaitingForIdentifier(nativeTag.toString());
+    }
   }
 
   /**
@@ -147,7 +194,7 @@ export default class AnimatedColor extends AnimatedWithChildren {
    * via `setValue`, an animation, or `Animated.event`. Useful for compensating
    * things like the start of a pan gesture.
    */
-  setOffset(offset: {r: number, g: number, b: number, a: number, ...}): void {
+  setOffset(offset: RgbaValue): void {
     this.r.setOffset(offset.r);
     this.g.setOffset(offset.g);
     this.b.setOffset(offset.b);
@@ -263,4 +310,23 @@ export default class AnimatedColor extends AnimatedWithChildren {
     this.a.__removeChild(this);
     super.__detach();
   }
+
+  __makeNative(platformConfig: ?PlatformConfig) {
+    this.r.__makeNative(platformConfig);
+    this.g.__makeNative(platformConfig);
+    this.b.__makeNative(platformConfig);
+    this.a.__makeNative(platformConfig);
+    super.__makeNative(platformConfig);
+  }
+
+  __getNativeConfig(): {...} {
+    return {
+      type: 'color',
+      r: this.r.__getNativeTag(),
+      g: this.g.__getNativeTag(),
+      b: this.b.__getNativeTag(),
+      a: this.a.__getNativeTag(),
+      nativeColor: this.nativeColor,
+    };
+  }
 }

package/Libraries/Animated/nodes/AnimatedInterpolation.js

@@ -23,14 +23,14 @@ import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
 type ExtrapolateType = 'extend' | 'identity' | 'clamp';
 
-export type InterpolationConfigType = {
+export type InterpolationConfigType = $ReadOnly<{
   inputRange: $ReadOnlyArray<number>,
   outputRange: $ReadOnlyArray<number> | $ReadOnlyArray<string>,
   easing?: (input: number) => number,
   extrapolate?: ExtrapolateType,
   extrapolateLeft?: ExtrapolateType,
   extrapolateRight?: ExtrapolateType,
-};
+}>;
 
 const linear = (t: number) => t;
 
@@ -46,20 +46,23 @@ function createInterpolation(
   }
 
   const outputRange: Array<number> = (config.outputRange: any);
-  checkInfiniteRange('outputRange', outputRange);
 
   const inputRange = config.inputRange;
-  checkInfiniteRange('inputRange', inputRange);
-  checkValidInputRange(inputRange);
 
-  invariant(
-    inputRange.length === outputRange.length,
-    'inputRange (' +
-      inputRange.length +
-      ') and outputRange (' +
-      outputRange.length +
-      ') must have the same length',
-  );
+  if (__DEV__) {
+    checkInfiniteRange('outputRange', outputRange);
+    checkInfiniteRange('inputRange', inputRange);
+    checkValidInputRange(inputRange);
+
+    invariant(
+      inputRange.length === outputRange.length,
+      'inputRange (' +
+        inputRange.length +
+        ') and outputRange (' +
+        outputRange.length +
+        ') must have the same length',
+    );
+  }
 
   const easing = config.easing || linear;
 
@@ -276,16 +279,10 @@ function findRange(input: number, inputRange: $ReadOnlyArray<number>) {
 
 function checkValidInputRange(arr: $ReadOnlyArray<number>) {
   invariant(arr.length >= 2, 'inputRange must have at least 2 elements');
+  const message =
+    'inputRange must be monotonically non-decreasing ' + String(arr);
   for (let i = 1; i < arr.length; ++i) {
-    invariant(
-      arr[i] >= arr[i - 1],
-      /* $FlowFixMe[incompatible-type] (>=0.13.0) - In the addition expression
-       * below this comment, one or both of the operands may be something that
-       * doesn't cleanly convert to a string, like undefined, null, and object,
-       * etc. If you really mean this implicit string conversion, you can do
-       * something like String(myThing) */
-      'inputRange must be monotonically non-decreasing ' + arr,
-    );
+    invariant(arr[i] >= arr[i - 1], message);
   }
 }
 

package/Libraries/Animated/nodes/AnimatedNode.js

@@ -130,12 +130,12 @@ class AnimatedNode {
           if (data.tag !== this.__getNativeTag()) {
             return;
           }
-          this._onAnimatedValueUpdateReceived(data.value);
+          this.__onAnimatedValueUpdateReceived(data.value);
         },
       );
   }
 
-  _onAnimatedValueUpdateReceived(value: number) {
+  __onAnimatedValueUpdateReceived(value: number) {
     this.__callListeners(value);
   }
 

package/Libraries/Animated/nodes/AnimatedValue.js

@@ -211,7 +211,7 @@ class AnimatedValue extends AnimatedWithChildren {
     }
   }
 
-  _onAnimatedValueUpdateReceived(value: number): void {
+  __onAnimatedValueUpdateReceived(value: number): void {
     this._updateValue(value, false /*flush*/);
   }
 

package/Libraries/AppState/AppState.js

@@ -154,7 +154,7 @@ class AppState {
       case 'focus':
         // $FlowIssue[invalid-tuple-arity] Flow cannot refine handler based on the event type
         // $FlowIssue[incompatible-call]
-        emitter.addListener('appStateFocusChange', listener);
+        emitter.removeListener('appStateFocusChange', listener);
         return;
     }
     throw new Error('Trying to unsubscribe from unknown event: ' + type);

package/Libraries/Blob/URL.js

@@ -101,7 +101,13 @@ export class URLSearchParams {
     }
     const last = this._searchParams.length - 1;
     return this._searchParams.reduce((acc, curr, index) => {
-      return acc + curr.join('=') + (index === last ? '' : '&');
+      return (
+        acc +
+        encodeURIComponent(curr[0]) +
+        '=' +
+        encodeURIComponent(curr[1]) +
+        (index === last ? '' : '&')
+      );
     }, '');
   }
 }

package/Libraries/Components/Button.js

@@ -146,6 +146,7 @@ type ButtonProps = $ReadOnly<{|
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
   accessibilityState?: ?AccessibilityState,
   accessibilityHint?: ?string,
+  accessibilityLanguage?: ?Stringish,
 |}>;
 
 /**
@@ -277,6 +278,7 @@ class Button extends React.Component<ButtonProps> {
       accessible,
       accessibilityActions,
       accessibilityHint,
+      accessibilityLanguage,
       onAccessibilityAction,
     } = this.props;
     const buttonStyles = [styles.button];
@@ -320,6 +322,7 @@ class Button extends React.Component<ButtonProps> {
         onAccessibilityAction={onAccessibilityAction}
         accessibilityLabel={accessibilityLabel}
         accessibilityHint={accessibilityHint}
+        accessibilityLanguage={accessibilityLanguage}
         accessibilityRole="button"
         accessibilityState={accessibilityState}
         hasTVPreferredFocus={hasTVPreferredFocus}

package/Libraries/Components/Button.windows.js

@@ -148,6 +148,7 @@ type ButtonProps = $ReadOnly<{|
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
   accessibilityState?: ?AccessibilityState,
   accessibilityHint?: ?string,
+  accessibilityLanguage?: ?Stringish,
 
   // [Windows
   /**
@@ -298,6 +299,7 @@ class Button extends React.Component<
       accessible,
       accessibilityActions,
       accessibilityHint,
+      accessibilityLanguage,
       onAccessibilityAction,
       tabIndex,
     } = this.props;
@@ -340,8 +342,10 @@ class Button extends React.Component<
     if (Platform.OS === 'windows') {
       return (
         <Touchable
+          accessible={accessible}
           accessibilityLabel={accessibilityLabel}
           accessibilityHint={accessibilityHint}
+          accessibilityLanguage={accessibilityLanguage}
           accessibilityRole="button"
           accessibilityState={accessibilityState}
           hasTVPreferredFocus={hasTVPreferredFocus}

package/Libraries/Components/DatePickerAndroid/NativeDatePickerAndroid.js

@@ -11,6 +11,11 @@
 import type {TurboModule} from '../../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../../TurboModule/TurboModuleRegistry';
 
+/**
+ * This file backs native modules that are used internally at Meta
+ * and this JS spec was intentionally left here. In the meanwhile this
+ * file should not be deleted.
+ */
 export interface Spec extends TurboModule {
   +open: (options: Object) => Promise<Object>;
 }

package/Libraries/Components/Pressable/Pressable.js

@@ -22,7 +22,7 @@ import type {
 } from '../View/ViewAccessibility';
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import usePressability from '../../Pressability/usePressability';
-import {normalizeRect, type RectOrSize} from '../../StyleSheet/Rect';
+import {type RectOrSize} from '../../StyleSheet/Rect';
 import type {
   LayoutEvent,
   MouseEvent,
@@ -43,6 +43,7 @@ type Props = $ReadOnly<{|
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
   accessibilityElementsHidden?: ?boolean,
   accessibilityHint?: ?Stringish,
+  accessibilityLanguage?: ?Stringish,
   accessibilityIgnoresInvertColors?: ?boolean,
   accessibilityLabel?: ?Stringish,
   accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'),
@@ -181,6 +182,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     delayLongPress,
     disabled,
     focusable,
+    hitSlop,
     onHoverIn,
     onHoverOut,
     onLongPress,
@@ -201,8 +203,6 @@ function Pressable(props: Props, forwardedRef): React.Node {
 
   const [pressed, setPressed] = usePressState(testOnly_pressed === true);
 
-  const hitSlop = normalizeRect(props.hitSlop);
-
   const accessibilityState =
     disabled != null
       ? {...props.accessibilityState, disabled}

package/Libraries/Components/Pressable/Pressable.windows.js

@@ -22,7 +22,7 @@ import type {
 } from '../View/ViewAccessibility';
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import usePressability from '../../Pressability/usePressability';
-import {normalizeRect, type RectOrSize} from '../../StyleSheet/Rect';
+import {type RectOrSize} from '../../StyleSheet/Rect';
 import type {
   LayoutEvent,
   MouseEvent,
@@ -49,6 +49,7 @@ type Props = $ReadOnly<{|
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
   accessibilityElementsHidden?: ?boolean,
   accessibilityHint?: ?Stringish,
+  accessibilityLanguage?: ?Stringish,
   accessibilityIgnoresInvertColors?: ?boolean,
   accessibilityLabel?: ?Stringish,
   accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'),
@@ -227,6 +228,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     delayLongPress,
     disabled,
     focusable,
+    hitSlop,
     onHoverIn,
     onHoverOut,
     onLongPress,
@@ -269,8 +271,6 @@ function Pressable(props: Props, forwardedRef): React.Node {
 
   const [pressed, setPressed] = usePressState(testOnly_pressed === true);
 
-  const hitSlop = normalizeRect(props.hitSlop);
-
   const accessibilityState =
     disabled != null
       ? {...props.accessibilityState, disabled}

package/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js

@@ -9,46 +9,55 @@
  */
 
 import type {ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {
+  HostComponent,
+  PartialViewConfig,
+} from '../../Renderer/shims/ReactNativeTypes';
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
 
+export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
+  uiViewClassName: 'AndroidHorizontalScrollView',
+  bubblingEventTypes: {},
+  directEventTypes: {},
+  validAttributes: {
+    decelerationRate: true,
+    disableIntervalMomentum: true,
+    endFillColor: {process: require('../../StyleSheet/processColor')},
+    fadingEdgeLength: true,
+    nestedScrollEnabled: true,
+    overScrollMode: true,
+    pagingEnabled: true,
+    persistentScrollbar: true,
+    scrollEnabled: true,
+    scrollPerfTag: true,
+    sendMomentumEvents: true,
+    showsHorizontalScrollIndicator: true,
+    snapToAlignment: true,
+    snapToEnd: true,
+    snapToInterval: true,
+    snapToStart: true,
+    snapToOffsets: true,
+    contentOffset: true,
+    borderBottomLeftRadius: true,
+    borderBottomRightRadius: true,
+    borderRadius: true,
+    borderStyle: true,
+    borderRightColor: {process: require('../../StyleSheet/processColor')},
+    borderColor: {process: require('../../StyleSheet/processColor')},
+    borderBottomColor: {process: require('../../StyleSheet/processColor')},
+    borderTopLeftRadius: true,
+    borderTopColor: {process: require('../../StyleSheet/processColor')},
+    removeClippedSubviews: true,
+    borderTopRightRadius: true,
+    borderLeftColor: {process: require('../../StyleSheet/processColor')},
+    pointerEvents: true,
+  },
+};
+
 const AndroidHorizontalScrollViewNativeComponent: HostComponent<Props> =
-  NativeComponentRegistry.get<Props>('AndroidHorizontalScrollView', () => ({
-    uiViewClassName: 'AndroidHorizontalScrollView',
-    bubblingEventTypes: {},
-    directEventTypes: {},
-    validAttributes: {
-      decelerationRate: true,
-      disableIntervalMomentum: true,
-      endFillColor: {process: require('../../StyleSheet/processColor')},
-      fadingEdgeLength: true,
-      nestedScrollEnabled: true,
-      overScrollMode: true,
-      pagingEnabled: true,
-      persistentScrollbar: true,
-      scrollEnabled: true,
-      scrollPerfTag: true,
-      sendMomentumEvents: true,
-      showsHorizontalScrollIndicator: true,
-      snapToAlignment: true,
-      snapToEnd: true,
-      snapToInterval: true,
-      snapToStart: true,
-      snapToOffsets: true,
-      contentOffset: true,
-      borderBottomLeftRadius: true,
-      borderBottomRightRadius: true,
-      borderRadius: true,
-      borderStyle: true,
-      borderRightColor: {process: require('../../StyleSheet/processColor')},
-      borderColor: {process: require('../../StyleSheet/processColor')},
-      borderBottomColor: {process: require('../../StyleSheet/processColor')},
-      borderTopLeftRadius: true,
-      borderTopColor: {process: require('../../StyleSheet/processColor')},
-      removeClippedSubviews: true,
-      borderTopRightRadius: true,
-      borderLeftColor: {process: require('../../StyleSheet/processColor')},
-    },
-  }));
+  NativeComponentRegistry.get<Props>(
+    'AndroidHorizontalScrollView',
+    () => __INTERNAL_VIEW_CONFIG,
+  );
 
 export default AndroidHorizontalScrollViewNativeComponent;

package/Libraries/Components/ScrollView/ScrollContentViewNativeComponent.js

@@ -8,16 +8,24 @@
  * @flow
  */
 
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {
+  HostComponent,
+  PartialViewConfig,
+} from '../../Renderer/shims/ReactNativeTypes';
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
 import type {ViewProps as Props} from '../View/ViewPropTypes';
 
+export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
+  uiViewClassName: 'RCTScrollContentView',
+  bubblingEventTypes: {},
+  directEventTypes: {},
+  validAttributes: {},
+};
+
 const ScrollContentViewNativeComponent: HostComponent<Props> =
-  NativeComponentRegistry.get<Props>('RCTScrollContentView', () => ({
-    uiViewClassName: 'RCTScrollContentView',
-    bubblingEventTypes: {},
-    directEventTypes: {},
-    validAttributes: {},
-  }));
+  NativeComponentRegistry.get<Props>(
+    'RCTScrollContentView',
+    () => __INTERNAL_VIEW_CONFIG,
+  );
 
 export default ScrollContentViewNativeComponent;

package/Libraries/Components/ScrollView/ScrollView.js

@@ -675,7 +675,7 @@ type State = {|
 
 const IS_ANIMATING_TOUCH_START_THRESHOLD_MS = 16;
 
-type ScrollViewComponentStatics = $ReadOnly<{|
+export type ScrollViewComponentStatics = $ReadOnly<{|
   Context: typeof ScrollViewContext,
 |}>;