react-native 0.71.6 → 0.72.0-rc.1

package/Libraries/Components/ScrollView/ScrollView.js

@@ -33,7 +33,6 @@ import StyleSheet from '../../StyleSheet/StyleSheet';
 import Dimensions from '../../Utilities/Dimensions';
 import dismissKeyboard from '../../Utilities/dismissKeyboard';
 import Platform from '../../Utilities/Platform';
-import setAndForwardRef from '../../Utilities/setAndForwardRef';
 import Keyboard from '../Keyboard/Keyboard';
 import TextInputState from '../TextInput/TextInputState';
 import View from '../View/View';
@@ -46,6 +45,8 @@ import ScrollViewContext, {HORIZONTAL, VERTICAL} from './ScrollViewContext';
 import ScrollViewNativeComponent from './ScrollViewNativeComponent';
 import ScrollViewStickyHeader from './ScrollViewStickyHeader';
 import invariant from 'invariant';
+import memoize from 'memoize-one';
+import nullthrows from 'nullthrows';
 import * as React from 'react';
 
 if (Platform.OS === 'ios') {
@@ -165,6 +166,14 @@ export type ScrollViewImperativeMethods = $ReadOnly<{|
 export type DecelerationRateType = 'fast' | 'normal' | number;
 export type ScrollResponderType = ScrollViewImperativeMethods;
 
+type NativeScrollViewInstance = React.ElementRef<HostComponent<mixed>>;
+type PublicScrollViewInstance = $ReadOnly<{|
+  ...$Exact<NativeScrollViewInstance>,
+  ...ScrollViewImperativeMethods,
+|}>;
+
+type InnerViewInstance = React.ElementRef<typeof View>;
+
 type IOSProps = $ReadOnly<{|
   /**
    * Controls whether iOS should automatically adjust the content inset
@@ -279,7 +288,6 @@ type IOSProps = $ReadOnly<{|
    * visibility. Occlusion, transforms, and other complexity won't be taken into account as to
    * whether content is "visible" or not.
    *
-   * @platform ios
    */
   maintainVisibleContentPosition?: ?$ReadOnly<{|
     minIndexForVisible: number,
@@ -301,24 +309,6 @@ type IOSProps = $ReadOnly<{|
    * @platform ios
    */
   pinchGestureEnabled?: ?boolean,
-  /**
-   * This controls how often the scroll event will be fired while scrolling
-   * (as a time interval in ms). A lower number yields better accuracy for code
-   * that is tracking the scroll position, but can lead to scroll performance
-   * problems due to the volume of information being send over the bridge.
-   *
-   * Values between 0 and 17ms indicate 60fps updates are needed and throttling
-   * will be disabled.
-   *
-   * If you do not need precise scroll position tracking, set this value higher
-   * to limit the information being sent across the bridge.
-   *
-   * The default value is zero, which results in the scroll event being sent only
-   * once each time the view is scrolled.
-   *
-   * @platform ios
-   */
-  scrollEventThrottle?: ?number,
   /**
    * The amount by which the scroll view indicators are inset from the edges
    * of the scroll view. This should normally be set to the same value as
@@ -560,7 +550,6 @@ export type Props = $ReadOnly<{|
    * Note: Vertical pagination is not supported on Android.
    */
   pagingEnabled?: ?boolean,
-
   /**
    * When false, the view cannot be scrolled via touch interaction.
    * The default value is true.
@@ -568,6 +557,22 @@ export type Props = $ReadOnly<{|
    * Note that the view can always be scrolled by calling `scrollTo`.
    */
   scrollEnabled?: ?boolean,
+  /**
+   * This controls how often the scroll event will be fired while scrolling
+   * (as a time interval in ms). A lower number yields better accuracy for code
+   * that is tracking the scroll position, but can lead to scroll performance
+   * problems due to the volume of information being send over the bridge.
+   *
+   * Values between 0 and 17ms indicate 60fps updates are needed and throttling
+   * will be disabled.
+   *
+   * If you do not need precise scroll position tracking, set this value higher
+   * to limit the information being sent across the bridge.
+   *
+   * The default value is zero, which results in the scroll event being sent only
+   * once each time the view is scrolled.
+   */
+  scrollEventThrottle?: ?number,
   /**
    * When true, shows a vertical scroll indicator.
    * The default value is true.
@@ -658,15 +663,13 @@ export type Props = $ReadOnly<{|
    * A ref to the inner View element of the ScrollView. This should be used
    * instead of calling `getInnerViewRef`.
    */
-  innerViewRef?: React.Ref<typeof View>,
+  innerViewRef?: ForwardedRef<InnerViewInstance>,
   /**
    * A ref to the Native ScrollView component. This ref can be used to call
    * all of ScrollView's public methods, in addition to native methods like
    * measure, measureLayout, etc.
    */
-  scrollViewRef?: React.Ref<
-    typeof ScrollViewNativeComponent & ScrollViewImperativeMethods,
-  >,
+  scrollViewRef?: ForwardedRef<PublicScrollViewInstance>,
 |}>;
 
 type State = {|
@@ -747,7 +750,7 @@ class ScrollView extends React.Component<Props, State> {
   _becameResponderWhileAnimating: boolean = false;
   _preventNegativeScrollOffset: ?boolean = null;
 
-  _animated = null;
+  _animated: ?boolean = null;
 
   _subscriptionKeyboardWillShow: ?EventSubscription = null;
   _subscriptionKeyboardWillHide: ?EventSubscription = null;
@@ -826,36 +829,6 @@ class ScrollView extends React.Component<Props, State> {
     }
   }
 
-  _setNativeRef: $FlowFixMe = setAndForwardRef({
-    getForwardedRef: () => this.props.scrollViewRef,
-    setLocalRef: ref => {
-      this._scrollViewRef = ref;
-
-      /*
-        This is a hack. Ideally we would forwardRef to the underlying
-        host component. However, since ScrollView has it's own methods that can be
-        called as well, if we used the standard forwardRef then these
-        methods wouldn't be accessible and thus be a breaking change.
-
-        Therefore we edit ref to include ScrollView's public methods so that
-        they are callable from the ref.
-      */
-      if (ref) {
-        ref.getScrollResponder = this.getScrollResponder;
-        ref.getScrollableNode = this.getScrollableNode;
-        ref.getInnerViewNode = this.getInnerViewNode;
-        ref.getInnerViewRef = this.getInnerViewRef;
-        ref.getNativeScrollRef = this.getNativeScrollRef;
-        ref.scrollTo = this.scrollTo;
-        ref.scrollToEnd = this.scrollToEnd;
-        ref.flashScrollIndicators = this.flashScrollIndicators;
-        ref.scrollResponderZoomTo = this.scrollResponderZoomTo;
-        ref.scrollResponderScrollNativeHandleToKeyboard =
-          this.scrollResponderScrollNativeHandleToKeyboard;
-      }
-    },
-  });
-
   /**
    * Returns a reference to the underlying scroll responder, which supports
    * operations like `scrollTo`. All ScrollView-like components should
@@ -868,19 +841,19 @@ class ScrollView extends React.Component<Props, State> {
   };
 
   getScrollableNode: () => ?number = () => {
-    return findNodeHandle(this._scrollViewRef);
+    return findNodeHandle(this._scrollView.nativeInstance);
   };
 
   getInnerViewNode: () => ?number = () => {
-    return findNodeHandle(this._innerViewRef);
+    return findNodeHandle(this._innerView.nativeInstance);
   };
 
-  getInnerViewRef: () => ?React.ElementRef<typeof View> = () => {
-    return this._innerViewRef;
+  getInnerViewRef: () => InnerViewInstance | null = () => {
+    return this._innerView.nativeInstance;
   };
 
-  getNativeScrollRef: () => ?React.ElementRef<HostComponent<mixed>> = () => {
-    return this._scrollViewRef;
+  getNativeScrollRef: () => NativeScrollViewInstance | null = () => {
+    return this._scrollView.nativeInstance;
   };
 
   /**
@@ -931,10 +904,15 @@ class ScrollView extends React.Component<Props, State> {
       x = options.x;
       animated = options.animated;
     }
-    if (this._scrollViewRef == null) {
+    if (this._scrollView.nativeInstance == null) {
       return;
     }
-    Commands.scrollTo(this._scrollViewRef, x || 0, y || 0, animated !== false);
+    Commands.scrollTo(
+      this._scrollView.nativeInstance,
+      x || 0,
+      y || 0,
+      animated !== false,
+    );
   };
 
   /**
@@ -950,10 +928,10 @@ class ScrollView extends React.Component<Props, State> {
   ) => {
     // Default to true
     const animated = (options && options.animated) !== false;
-    if (this._scrollViewRef == null) {
+    if (this._scrollView.nativeInstance == null) {
       return;
     }
-    Commands.scrollToEnd(this._scrollViewRef, animated);
+    Commands.scrollToEnd(this._scrollView.nativeInstance, animated);
   };
 
   /**
@@ -962,10 +940,10 @@ class ScrollView extends React.Component<Props, State> {
    * @platform ios
    */
   flashScrollIndicators: () => void = () => {
-    if (this._scrollViewRef == null) {
+    if (this._scrollView.nativeInstance == null) {
       return;
     }
-    Commands.flashScrollIndicators(this._scrollViewRef);
+    Commands.flashScrollIndicators(this._scrollView.nativeInstance);
   };
 
   /**
@@ -990,21 +968,21 @@ class ScrollView extends React.Component<Props, State> {
     this._additionalScrollOffset = additionalOffset || 0;
     this._preventNegativeScrollOffset = !!preventNegativeScrollOffset;
 
-    if (this._innerViewRef == null) {
+    if (this._innerView.nativeInstance == null) {
       return;
     }
 
     if (typeof nodeHandle === 'number') {
       UIManager.measureLayout(
         nodeHandle,
-        findNodeHandle(this),
+        nullthrows(findNodeHandle(this)),
         // $FlowFixMe[method-unbinding] added when improving typing for this parameters
         this._textInputFocusError,
         this._inputMeasureAndScrollToKeyboard,
       );
     } else {
       nodeHandle.measureLayout(
-        this._innerViewRef,
+        this._innerView.nativeInstance,
         this._inputMeasureAndScrollToKeyboard,
         // $FlowFixMe[method-unbinding] added when improving typing for this parameters
         this._textInputFocusError,
@@ -1047,10 +1025,14 @@ class ScrollView extends React.Component<Props, State> {
       );
     }
 
-    if (this._scrollViewRef == null) {
+    if (this._scrollView.nativeInstance == null) {
       return;
     }
-    Commands.zoomToRect(this._scrollViewRef, rect, animated !== false);
+    Commands.zoomToRect(
+      this._scrollView.nativeInstance,
+      rect,
+      animated !== false,
+    );
   };
 
   _textInputFocusError() {
@@ -1123,7 +1105,7 @@ class ScrollView extends React.Component<Props, State> {
     ) {
       this._scrollAnimatedValueAttachment =
         AnimatedImplementation.attachNativeEvent(
-          this._scrollViewRef,
+          this._scrollView.nativeInstance,
           'onScroll',
           [{nativeEvent: {contentOffset: {y: this._scrollAnimatedValue}}}],
         );
@@ -1146,7 +1128,7 @@ class ScrollView extends React.Component<Props, State> {
     if (!stickyHeaderIndices) {
       return;
     }
-    const childArray = React.Children.toArray(this.props.children);
+    const childArray = React.Children.toArray<$FlowFixMe>(this.props.children);
     if (key !== this._getKeyForIndex(index, childArray)) {
       // ignore stale layout update
       return;
@@ -1202,15 +1184,45 @@ class ScrollView extends React.Component<Props, State> {
       this.props.onContentSizeChange(width, height);
   };
 
-  _scrollViewRef: ?React.ElementRef<HostComponent<mixed>> = null;
+  _innerView: RefForwarder<InnerViewInstance, InnerViewInstance> =
+    createRefForwarder(
+      (instance: InnerViewInstance): InnerViewInstance => instance,
+    );
+
+  _scrollView: RefForwarder<
+    NativeScrollViewInstance,
+    PublicScrollViewInstance,
+  > = createRefForwarder(
+    (nativeInstance: NativeScrollViewInstance): PublicScrollViewInstance => {
+      // This is a hack. Ideally we would forwardRef  to the underlying
+      // host component. However, since ScrollView has it's own methods that can be
+      // called as well, if we used the standard forwardRef then these
+      // methods wouldn't be accessible and thus be a breaking change.
+      //
+      // Therefore we edit ref to include ScrollView's public methods so that
+      // they are callable from the ref.
+
+      // $FlowFixMe[prop-missing] - Known issue with appending custom methods.
+      const publicInstance: PublicScrollViewInstance = Object.assign(
+        nativeInstance,
+        {
+          getScrollResponder: this.getScrollResponder,
+          getScrollableNode: this.getScrollableNode,
+          getInnerViewNode: this.getInnerViewNode,
+          getInnerViewRef: this.getInnerViewRef,
+          getNativeScrollRef: this.getNativeScrollRef,
+          scrollTo: this.scrollTo,
+          scrollToEnd: this.scrollToEnd,
+          flashScrollIndicators: this.flashScrollIndicators,
+          scrollResponderZoomTo: this.scrollResponderZoomTo,
+          scrollResponderScrollNativeHandleToKeyboard:
+            this.scrollResponderScrollNativeHandleToKeyboard,
+        },
+      );
 
-  _innerViewRef: ?React.ElementRef<typeof View> = null;
-  _setInnerViewRef: $FlowFixMe = setAndForwardRef({
-    getForwardedRef: () => this.props.innerViewRef,
-    setLocalRef: ref => {
-      this._innerViewRef = ref;
+      return publicInstance;
     },
-  });
+  );
 
   /**
    * Warning, this may be called several times for a single keyboard opening.
@@ -1650,6 +1662,7 @@ class ScrollView extends React.Component<Props, State> {
       this.props.contentContainerStyle,
     ];
     if (__DEV__ && this.props.style !== undefined) {
+      // $FlowFixMe[underconstrained-implicit-instantiation]
       const style = flattenStyle(this.props.style);
       const childLayoutProps = ['alignItems', 'justifyContent'].filter(
         prop => style && style[prop] !== undefined,
@@ -1673,7 +1686,9 @@ class ScrollView extends React.Component<Props, State> {
     let children = this.props.children;
 
     if (stickyHeaderIndices != null && stickyHeaderIndices.length > 0) {
-      const childArray = React.Children.toArray(this.props.children);
+      const childArray = React.Children.toArray<$FlowFixMe>(
+        this.props.children,
+      );
 
       children = childArray.map((child, index) => {
         const indexOfIndex = child ? stickyHeaderIndices.indexOf(index) : -1;
@@ -1716,7 +1731,7 @@ class ScrollView extends React.Component<Props, State> {
     const contentContainer = (
       <NativeDirectionalScrollContentView
         {...contentSizeChangeProps}
-        ref={this._setInnerViewRef}
+        ref={this._innerView.getForwardingRef(this.props.innerViewRef)}
         style={contentContainerStyle}
         removeClippedSubviews={
           // Subview clipping causes issues with sticky headers on Android and
@@ -1802,12 +1817,15 @@ class ScrollView extends React.Component<Props, State> {
     }
 
     const refreshControl = this.props.refreshControl;
+    const scrollViewRef = this._scrollView.getForwardingRef(
+      this.props.scrollViewRef,
+    );
 
     if (refreshControl) {
       if (Platform.OS === 'ios') {
         // On iOS the RefreshControl is a child of the ScrollView.
         return (
-          <NativeDirectionalScrollView {...props} ref={this._setNativeRef}>
+          <NativeDirectionalScrollView {...props} ref={scrollViewRef}>
             {refreshControl}
             {contentContainer}
           </NativeDirectionalScrollView>
@@ -1818,6 +1836,7 @@ class ScrollView extends React.Component<Props, State> {
         // AndroidSwipeRefreshLayout and use flex: 1 for the ScrollView.
         // Note: we should split props.style on the inner and outer props
         // however, the ScrollView still needs the baseStyle to be scrollable
+        // $FlowFixMe[underconstrained-implicit-instantiation]
         const {outer, inner} = splitLayoutProps(flattenStyle(props.style));
         return React.cloneElement(
           refreshControl,
@@ -1825,14 +1844,14 @@ class ScrollView extends React.Component<Props, State> {
           <NativeDirectionalScrollView
             {...props}
             style={StyleSheet.compose(baseStyle, inner)}
-            ref={this._setNativeRef}>
+            ref={scrollViewRef}>
             {contentContainer}
           </NativeDirectionalScrollView>,
         );
       }
     }
     return (
-      <NativeDirectionalScrollView {...props} ref={this._setNativeRef}>
+      <NativeDirectionalScrollView {...props} ref={scrollViewRef}>
         {contentContainer}
       </NativeDirectionalScrollView>
     );
@@ -1857,6 +1876,48 @@ const styles = StyleSheet.create({
   },
 });
 
+type ForwardedRef<T> = {current: null | T, ...} | ((null | T) => mixed);
+
+type RefForwarder<TNativeInstance, TPublicInstance> = {
+  getForwardingRef: (
+    ?ForwardedRef<TPublicInstance>,
+  ) => (TNativeInstance | null) => void,
+  nativeInstance: TNativeInstance | null,
+  publicInstance: TPublicInstance | null,
+};
+
+/**
+ * Helper function that should be replaced with `useCallback` and `useMergeRefs`
+ * once `ScrollView` is reimplemented as a functional component.
+ */
+function createRefForwarder<TNativeInstance, TPublicInstance>(
+  mutator: TNativeInstance => TPublicInstance,
+): RefForwarder<TNativeInstance, TPublicInstance> {
+  const state: RefForwarder<TNativeInstance, TPublicInstance> = {
+    getForwardingRef: memoize(forwardedRef => {
+      return (nativeInstance: TNativeInstance | null): void => {
+        const publicInstance =
+          nativeInstance == null ? null : mutator(nativeInstance);
+
+        state.nativeInstance = nativeInstance;
+        state.publicInstance = publicInstance;
+
+        if (forwardedRef != null) {
+          if (typeof forwardedRef === 'function') {
+            forwardedRef(publicInstance);
+          } else {
+            forwardedRef.current = publicInstance;
+          }
+        }
+      };
+    }),
+    nativeInstance: null,
+    publicInstance: null,
+  };
+
+  return state;
+}
+
 /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
  * LTI update could not be added via codemod */
 function Wrapper(props, ref: (mixed => mixed) | {current: mixed, ...}) {
@@ -1872,9 +1933,6 @@ ForwardedScrollView.displayName = 'ScrollView';
 
 module.exports = ((ForwardedScrollView: $FlowFixMe): React.AbstractComponent<
   React.ElementConfig<typeof ScrollView>,
-  $ReadOnly<{|
-    ...$Exact<React.ElementRef<HostComponent<mixed>>>,
-    ...ScrollViewImperativeMethods,
-  |}>,
+  PublicScrollViewInstance,
 > &
   ScrollViewComponentStatics);

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/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).