react-native 0.0.0-17be3a003 → 0.0.0-18697adec

package/Libraries/BatchedBridge/MessageQueue.js

@@ -47,7 +47,7 @@ class MessageQueue {
   _callID: number;
   _lastFlush: number;
   _eventLoopStartTime: number;
-  _immediatesCallback: ?() => void;
+  _reactNativeMicrotasksCallback: ?() => void;
 
   _debugInfo: {[number]: [number, number], ...};
   _remoteModuleTable: {[number]: string, ...};
@@ -63,7 +63,7 @@ class MessageQueue {
     this._callID = 0;
     this._lastFlush = 0;
     this._eventLoopStartTime = Date.now();
-    this._immediatesCallback = null;
+    this._reactNativeMicrotasksCallback = null;
 
     if (__DEV__) {
       this._debugInfo = {};
@@ -72,13 +72,16 @@ class MessageQueue {
     }
 
     // $FlowFixMe[cannot-write]
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.callFunctionReturnFlushedQueue = this.callFunctionReturnFlushedQueue.bind(
       this,
     );
     // $FlowFixMe[cannot-write]
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.flushedQueue = this.flushedQueue.bind(this);
 
     // $FlowFixMe[cannot-write]
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.invokeCallbackAndReturnFlushedQueue = this.invokeCallbackAndReturnFlushedQueue.bind(
       this,
     );
@@ -129,7 +132,7 @@ class MessageQueue {
 
   flushedQueue(): null | [Array<number>, Array<number>, Array<mixed>, number] {
     this.__guard(() => {
-      this.__callImmediates();
+      this.__callReactNativeMicrotasks();
     });
 
     const queue = this._queue;
@@ -153,6 +156,8 @@ class MessageQueue {
         module = getValue();
         getValue = null;
       }
+      /* $FlowFixMe[class-object-subtyping] added when improving typing for
+       * this parameters */
       return module;
     };
   }
@@ -349,8 +354,8 @@ class MessageQueue {
   // For JSTimers to register its callback. Otherwise a circular dependency
   // between modules is introduced. Note that only one callback may be
   // registered at a time.
-  setImmediatesCallback(fn: () => void) {
-    this._immediatesCallback = fn;
+  setReactNativeMicrotasksCallback(fn: () => void) {
+    this._reactNativeMicrotasksCallback = fn;
   }
 
   /**
@@ -382,10 +387,10 @@ class MessageQueue {
     );
   }
 
-  __callImmediates() {
-    Systrace.beginEvent('JSTimers.callImmediates()');
-    if (this._immediatesCallback != null) {
-      this._immediatesCallback();
+  __callReactNativeMicrotasks() {
+    Systrace.beginEvent('JSTimers.callReactNativeMicrotasks()');
+    if (this._reactNativeMicrotasksCallback != null) {
+      this._reactNativeMicrotasksCallback();
     }
     Systrace.endEvent();
   }
@@ -404,7 +409,7 @@ class MessageQueue {
     const moduleMethods = this.getCallableModule(module);
     invariant(
       !!moduleMethods,
-      `Module ${module} is not a registered callable module (calling ${method}). A frequent cause of the error is that the application entry file path is incorrect. 
+      `Module ${module} is not a registered callable module (calling ${method}). A frequent cause of the error is that the application entry file path is incorrect.
       This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.`,
     );
     invariant(

package/Libraries/BatchedBridge/NativeModules.js

@@ -14,7 +14,7 @@ const BatchedBridge = require('./BatchedBridge');
 
 const invariant = require('invariant');
 
-import type {ExtendedError} from '../Core/Devtools/parseErrorStack';
+import type {ExtendedError} from '../Core/ExtendedError';
 
 export type ModuleConfig = [
   string /* name */,
@@ -101,6 +101,8 @@ function genMethod(moduleID: number, methodID: number, type: MethodType) {
   if (type === 'promise') {
     fn = function promiseMethodWrapper(...args: Array<mixed>) {
       // In case we reject, capture a useful stack trace here.
+      /* $FlowFixMe[class-object-subtyping] added when improving typing for
+       * this parameters */
       const enqueueingFrameError: ExtendedError = new Error();
       return new Promise((resolve, reject) => {
         BatchedBridge.enqueueNativeCall(
@@ -166,6 +168,8 @@ function updateErrorWithErrorData(
   errorData: {message: string, ...},
   error: ExtendedError,
 ): ExtendedError {
+  /* $FlowFixMe[class-object-subtyping] added when improving typing for this
+   * parameters */
   return Object.assign(error, errorData || {});
 }
 

package/Libraries/Blob/FileReader.js

@@ -46,7 +46,7 @@ class FileReader extends (EventTarget(...READER_EVENTS): any) {
   _error: ?Error;
   _result: ?ReaderResult;
   _aborted: boolean = false;
-  _subscriptions: Array<*> = [];
+  _subscriptions: Array<any> = [];
 
   constructor() {
     super();

package/Libraries/Blob/RCTBlobManager.h

@@ -8,8 +8,9 @@
 #import <React/RCTBridge.h>
 #import <React/RCTBridgeModule.h>
 #import <React/RCTURLRequestHandler.h>
+#import <React/RCTInitializing.h>
 
-@interface RCTBlobManager : NSObject <RCTBridgeModule, RCTURLRequestHandler>
+@interface RCTBlobManager : NSObject <RCTBridgeModule, RCTURLRequestHandler, RCTInitializing>
 
 - (NSString *)store:(NSData *)data;
 

package/Libraries/Blob/RCTBlobManager.mm

@@ -40,10 +40,8 @@ RCT_EXPORT_MODULE(BlobModule)
 @synthesize moduleRegistry = _moduleRegistry;
 @synthesize methodQueue = _methodQueue;
 
-- (void)setBridge:(RCTBridge *)bridge
+- (void)initialize
 {
-  _bridge = bridge;
-
   std::lock_guard<std::mutex> lock(_blobsMutex);
   _blobs = [NSMutableDictionary new];
 

package/Libraries/Blob/RCTBlobPlugins.mm

@@ -17,13 +17,14 @@
 #import <unordered_map>
 
 Class RCTBlobClassProvider(const char *name) {
-  static std::unordered_map<std::string, Class (*)(void)> sCoreModuleClassMap = {
+  // Intentionally leak to avoid crashing after static destructors are run.
+  static const auto sCoreModuleClassMap = new const std::unordered_map<std::string, Class (*)(void)>{
     {"FileReaderModule", RCTFileReaderModuleCls},
     {"BlobModule", RCTBlobManagerCls},
   };
 
-  auto p = sCoreModuleClassMap.find(name);
-  if (p != sCoreModuleClassMap.end()) {
+  auto p = sCoreModuleClassMap->find(name);
+  if (p != sCoreModuleClassMap->end()) {
     auto classFunc = p->second;
     return classFunc();
   }

package/Libraries/Blob/React-RCTBlob.podspec

@@ -17,7 +17,7 @@ else
 end
 
 folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
-folly_version = '2020.01.13.00'
+folly_version = '2021.06.28.00-v2'
 
 Pod::Spec.new do |s|
   s.name                   = "React-RCTBlob"

package/Libraries/Blob/URL.js

@@ -49,7 +49,7 @@ if (
  * ```
  */
 
-// Small subset from whatwg-url: https://github.com/jsdom/whatwg-url/tree/master/lib
+// Small subset from whatwg-url: https://github.com/jsdom/whatwg-url/tree/master/src
 // The reference code bloat comes from Unicode issues with URLs, so those won't work here.
 export class URLSearchParams {
   _searchParams = [];
@@ -105,7 +105,7 @@ export class URLSearchParams {
 
 function validateBaseUrl(url: string) {
   // from this MIT-licensed gist: https://gist.github.com/dperini/729294
-  return /^(?:(?:(?:https?|ftp):)?\/\/)(?:(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(
+  return /^(?:(?:(?:https?|ftp):)?\/\/)(?:(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z0-9\u00a1-\uffff][a-z0-9\u00a1-\uffff_-]{0,62})?[a-z0-9\u00a1-\uffff]\.)*(?:[a-z\u00a1-\uffff]{2,}\.?))(?::\d{2,5})?(?:[/?#]\S*)?$/.test(
     url,
   );
 }

package/Libraries/BugReporting/BugReporting.js

@@ -43,6 +43,7 @@ class BugReporting {
     if (!BugReporting._subscription) {
       BugReporting._subscription = RCTDeviceEventEmitter.addListener(
         'collectBugExtraData',
+        // $FlowFixMe[method-unbinding]
         BugReporting.collectExtraData,
         null,
       );
@@ -52,6 +53,7 @@ class BugReporting {
     if (!BugReporting._redboxSubscription) {
       BugReporting._redboxSubscription = RCTDeviceEventEmitter.addListener(
         'collectRedBoxExtraData',
+        // $FlowFixMe[method-unbinding]
         BugReporting.collectExtraData,
         null,
       );

package/Libraries/BugReporting/getReactData.js

@@ -14,7 +14,7 @@
  * Convert a react internal instance to a sanitized data object.
  *
  * This is shamelessly stolen from react-devtools:
- * https://github.com/facebook/react-devtools/blob/master/backend/getData.js
+ * https://github.com/facebook/react-devtools/blob/HEAD/backend/getData.js
  */
 function getData(element: Object): Object {
   let children = null;

package/Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -10,14 +10,12 @@
  */
 
 'use strict';
-
-const Platform = require('../../Utilities/Platform');
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const View = require('../View/View');
+import * as React from 'react';
+import Platform from '../../Utilities/Platform';
+import StyleSheet, {type ColorValue} from '../../StyleSheet/StyleSheet';
+import View from '../View/View';
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
 
 const PlatformActivityIndicator =
   Platform.OS === 'android'

package/Libraries/Components/Button.js

@@ -11,18 +11,21 @@
 
 'use strict';
 
-const Platform = require('../Utilities/Platform');
-const React = require('react');
-const StyleSheet = require('../StyleSheet/StyleSheet');
-const Text = require('../Text/Text');
-const TouchableNativeFeedback = require('./Touchable/TouchableNativeFeedback');
-const TouchableOpacity = require('./Touchable/TouchableOpacity');
-const View = require('./View/View');
-const invariant = require('invariant');
-
-import type {AccessibilityState} from './View/ViewAccessibility';
+import * as React from 'react';
+import Platform from '../Utilities/Platform';
+import StyleSheet, {type ColorValue} from '../StyleSheet/StyleSheet';
+import Text from '../Text/Text';
+import TouchableNativeFeedback from './Touchable/TouchableNativeFeedback';
+import TouchableOpacity from './Touchable/TouchableOpacity';
+import View from './View/View';
+import invariant from 'invariant';
+
+import type {
+  AccessibilityState,
+  AccessibilityActionEvent,
+  AccessibilityActionInfo,
+} from './View/ViewAccessibility';
 import type {PressEvent} from '../Types/CoreEventTypes';
-import type {ColorValue} from '../StyleSheet/StyleSheet';
 
 type ButtonProps = $ReadOnly<{|
   /**
@@ -138,7 +141,11 @@ type ButtonProps = $ReadOnly<{|
   /**
    * Accessibility props.
    */
+  accessible?: ?boolean,
+  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
+  onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
   accessibilityState?: ?AccessibilityState,
+  accessibilityHint?: ?string,
 |}>;
 
 /**
@@ -153,7 +160,7 @@ type ButtonProps = $ReadOnly<{|
   [button:examples].
 
   [button:source]:
-  https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js
+  https://github.com/facebook/react-native/blob/HEAD/Libraries/Components/Button.js
 
   [button:examples]:
   https://js.coach/?menu%5Bcollections%5D=React%20Native&page=1&query=button
@@ -267,6 +274,10 @@ class Button extends React.Component<ButtonProps> {
       nextFocusRight,
       nextFocusUp,
       testID,
+      accessible,
+      accessibilityActions,
+      accessibilityHint,
+      onAccessibilityAction,
     } = this.props;
     const buttonStyles = [styles.button];
     const textStyles = [styles.text];
@@ -304,7 +315,11 @@ class Button extends React.Component<ButtonProps> {
 
     return (
       <Touchable
+        accessible={accessible}
+        accessibilityActions={accessibilityActions}
+        onAccessibilityAction={onAccessibilityAction}
         accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
         accessibilityRole="button"
         accessibilityState={accessibilityState}
         hasTVPreferredFocus={hasTVPreferredFocus}

package/Libraries/Components/DatePicker/DatePickerIOS.android.js

@@ -8,11 +8,10 @@
  */
 
 'use strict';
-
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const Text = require('../../Text/Text');
-const View = require('../View/View');
+import * as React from 'react';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import View from '../View/View';
 
 class DummyDatePickerIOS extends React.Component {
   render() {

package/Libraries/Components/DatePicker/DatePickerIOS.ios.js

@@ -10,14 +10,13 @@
 
 // This is a controlled component version of RCTDatePickerIOS.
 
+import * as React from 'react';
 import RCTDatePickerNativeComponent, {
   Commands as DatePickerCommands,
 } from './RCTDatePickerNativeComponent';
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const View = require('../View/View');
-
-const invariant = require('invariant');
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import View from '../View/View';
+import invariant from 'invariant';
 
 import type {SyntheticEvent} from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
@@ -101,6 +100,13 @@ type Props = $ReadOnly<{|
    * instance, to show times in Pacific Standard Time, pass -7 * 60.
    */
   timeZoneOffsetInMinutes?: ?number,
+
+  /**
+   * The date picker style
+   * This is only available on devices with iOS 14.0 and later.
+   * 'spinner' is the default style if this prop isn't set.
+   */
+  pickerStyle?: ?('compact' | 'spinner' | 'inline'),
 |}>;
 
 /**
@@ -111,10 +117,6 @@ type Props = $ReadOnly<{|
  * source of truth.
  */
 class DatePickerIOS extends React.Component<Props> {
-  static DefaultProps: {|mode: $TEMPORARY$string<'datetime'>|} = {
-    mode: 'datetime',
-  };
-
   _picker: ?React.ElementRef<typeof RCTDatePickerNativeComponent> = null;
 
   componentDidUpdate() {
@@ -136,6 +138,7 @@ class DatePickerIOS extends React.Component<Props> {
 
   render(): React.Node {
     const props = this.props;
+    const mode = props.mode ?? 'datetime';
     invariant(
       props.date || props.initialDate,
       'A selected date or initial date should be specified.',
@@ -147,7 +150,7 @@ class DatePickerIOS extends React.Component<Props> {
           ref={picker => {
             this._picker = picker;
           }}
-          style={styles.datePickerIOS}
+          style={getHeight(props.pickerStyle, mode)}
           date={
             props.date
               ? props.date.getTime()
@@ -166,22 +169,57 @@ class DatePickerIOS extends React.Component<Props> {
           minimumDate={
             props.minimumDate ? props.minimumDate.getTime() : undefined
           }
-          mode={props.mode}
+          mode={mode}
           minuteInterval={props.minuteInterval}
           timeZoneOffsetInMinutes={props.timeZoneOffsetInMinutes}
           onChange={this._onChange}
           onStartShouldSetResponder={() => true}
           onResponderTerminationRequest={() => false}
+          pickerStyle={props.pickerStyle}
         />
       </View>
     );
   }
 }
 
+const inlineHeightForDatePicker = 318.5;
+const inlineHeightForTimePicker = 49.5;
+const compactHeight = 40;
+const spinnerHeight = 216;
+
 const styles = StyleSheet.create({
   datePickerIOS: {
-    height: 216,
+    height: spinnerHeight,
+  },
+  datePickerIOSCompact: {
+    height: compactHeight,
+  },
+  datePickerIOSInline: {
+    height: inlineHeightForDatePicker + inlineHeightForTimePicker * 2,
+  },
+  datePickerIOSInlineDate: {
+    height: inlineHeightForDatePicker + inlineHeightForTimePicker,
+  },
+  datePickerIOSInlineTime: {
+    height: inlineHeightForTimePicker,
   },
 });
 
+function getHeight(pickerStyle, mode) {
+  if (pickerStyle === 'compact') {
+    return styles.datePickerIOSCompact;
+  }
+  if (pickerStyle === 'inline') {
+    switch (mode) {
+      case 'date':
+        return styles.datePickerIOSInlineDate;
+      case 'time':
+        return styles.datePickerIOSInlineTime;
+      default:
+        return styles.datePickerIOSInline;
+    }
+  }
+  return styles.datePickerIOS;
+}
+
 module.exports = DatePickerIOS;

package/Libraries/Components/DatePicker/RCTDatePickerNativeComponent.js

@@ -37,6 +37,7 @@ type NativeProps = $ReadOnly<{|
   mode?: WithDefault<'date' | 'time' | 'datetime', 'date'>,
   onChange?: ?BubblingEventHandler<Event>,
   timeZoneOffsetInMinutes?: ?Float,
+  pickerStyle?: WithDefault<'compact' | 'spinner' | 'inline', 'spinner'>,
 |}>;
 
 type ComponentType = HostComponent<NativeProps>;

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -56,7 +56,7 @@ type Props = $ReadOnly<{|
    * );
    * ```
    */
-  drawerBackgroundColor: ColorValue,
+  drawerBackgroundColor?: ?ColorValue,
 
   /**
    * Specifies the side of the screen from which the drawer will slide in.
@@ -161,11 +161,6 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
 
     return {Left: 'left', Right: 'right'};
   }
-  static defaultProps: {|
-    drawerBackgroundColor: 'white',
-  |} = {
-    drawerBackgroundColor: 'white',
-  };
 
   _nativeRef = React.createRef<
     React.ElementRef<typeof AndroidDrawerLayoutNativeComponent>,
@@ -175,6 +170,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
 
   render(): React.Node {
     const {
+      drawerBackgroundColor = 'white',
       onDrawerStateChanged,
       renderNavigationView,
       onDrawerOpen,
@@ -189,7 +185,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
           styles.drawerSubview,
           {
             width: this.props.drawerWidth,
-            backgroundColor: this.props.drawerBackgroundColor,
+            backgroundColor: drawerBackgroundColor,
           },
         ]}
         collapsable={false}>
@@ -220,6 +216,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
       <AndroidDrawerLayoutNativeComponent
         {...props}
         ref={this._nativeRef}
+        drawerBackgroundColor={drawerBackgroundColor}
         drawerWidth={this.props.drawerWidth}
         drawerPosition={this.props.drawerPosition}
         drawerLockMode={this.props.drawerLockMode}

package/Libraries/Components/Keyboard/Keyboard.js

@@ -13,7 +13,7 @@ import LayoutAnimation from '../../LayoutAnimation/LayoutAnimation';
 import dismissKeyboard from '../../Utilities/dismissKeyboard';
 import Platform from '../../Utilities/Platform';
 import NativeKeyboardObserver from './NativeKeyboardObserver';
-import {type EventSubscription} from '../../vendor/emitter/EventEmitter';
+import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
 
 export type KeyboardEventName = $Keys<KeyboardEventDefinitions>;
 

package/Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -224,4 +224,4 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
   }
 }
 
-module.exports = KeyboardAvoidingView;
+export default KeyboardAvoidingView;

package/Libraries/Components/MaskedView/MaskedViewIOS.ios.js

@@ -8,9 +8,9 @@
  * @flow
  */
 
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const View = require('../View/View');
+import * as React from 'react';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import View from '../View/View';
 
 import type {ViewProps} from '../View/ViewPropTypes';
 import RCTMaskedViewNativeComponent from './RCTMaskedViewNativeComponent';

package/Libraries/Components/Pressable/useAndroidRippleForView.js

@@ -27,6 +27,7 @@ export type RippleConfig = {|
   color?: ColorValue,
   borderless?: boolean,
   radius?: number,
+  foreground?: boolean,
 |};
 
 /**
@@ -40,11 +41,11 @@ export default function useAndroidRippleForView(
   onPressIn: (event: PressEvent) => void,
   onPressMove: (event: PressEvent) => void,
   onPressOut: (event: PressEvent) => void,
-  viewProps: $ReadOnly<{|
-    nativeBackgroundAndroid: NativeBackgroundProp,
-  |}>,
+  viewProps:
+    | $ReadOnly<{|nativeBackgroundAndroid: NativeBackgroundProp|}>
+    | $ReadOnly<{|nativeForegroundAndroid: NativeBackgroundProp|}>,
 |}> {
-  const {color, borderless, radius} = rippleConfig ?? {};
+  const {color, borderless, radius, foreground} = rippleConfig ?? {};
 
   return useMemo(() => {
     if (
@@ -58,25 +59,27 @@ export default function useAndroidRippleForView(
         'Unexpected color given for Ripple color',
       );
 
+      const nativeRippleValue = {
+        type: 'RippleAndroid',
+        color: processedColor,
+        borderless: borderless === true,
+        rippleRadius: radius,
+      };
+
       return {
-        viewProps: {
-          // Consider supporting `nativeForegroundAndroid`
-          nativeBackgroundAndroid: {
-            type: 'RippleAndroid',
-            color: processedColor,
-            borderless: borderless === true,
-            rippleRadius: radius,
-          },
-        },
+        viewProps:
+          foreground === true
+            ? {nativeForegroundAndroid: nativeRippleValue}
+            : {nativeBackgroundAndroid: nativeRippleValue},
         onPressIn(event: PressEvent): void {
           const view = viewRef.current;
           if (view != null) {
-            Commands.setPressed(view, true);
             Commands.hotspotUpdate(
               view,
               event.nativeEvent.locationX ?? 0,
               event.nativeEvent.locationY ?? 0,
             );
+            Commands.setPressed(view, true);
           }
         },
         onPressMove(event: PressEvent): void {
@@ -98,5 +101,5 @@ export default function useAndroidRippleForView(
       };
     }
     return null;
-  }, [color, borderless, radius, viewRef]);
+  }, [borderless, color, foreground, radius, viewRef]);
 }

package/Libraries/Components/ProgressViewIOS/ProgressViewIOS.android.js

@@ -8,11 +8,10 @@
  */
 
 'use strict';
-
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const Text = require('../../Text/Text');
-const View = require('../View/View');
+import * as React from 'react';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import View from '../View/View';
 
 class DummyProgressViewIOS extends React.Component {
   render() {

package/Libraries/Components/ProgressViewIOS/ProgressViewIOS.ios.js

@@ -8,12 +8,11 @@
  * @flow strict-local
  */
 
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
+import * as React from 'react';
+import StyleSheet, {type ColorValue} from '../../StyleSheet/StyleSheet';
 
 import RCTProgressViewNativeComponent from './RCTProgressViewNativeComponent';
 import type {ImageSource} from '../../Image/ImageSource';
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ViewProps} from '../View/ViewPropTypes';
 
 type Props = $ReadOnly<{|

package/Libraries/Components/RefreshControl/__mocks__/RefreshControlMock.js

@@ -9,10 +9,9 @@
  */
 
 'use strict';
+import * as React from 'react';
 
-const React = require('react');
-
-const requireNativeComponent = require('../../../ReactNative/requireNativeComponent');
+import requireNativeComponent from '../../../ReactNative/requireNativeComponent';
 
 import type {HostComponent} from '../../../Renderer/shims/ReactNativeTypes';