react-native-tvos 0.84.1-0 → 0.85.0-0

package/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js

@@ -13,6 +13,7 @@ import type {PartialViewConfig} from '../../Renderer/shims/ReactNativeTypes';
 import type {ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';
 
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
+import {colorAttribute} from '../View/ReactNativeStyleAttributes';
 
 export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
   uiViewClassName: 'AndroidHorizontalScrollView',
@@ -22,7 +23,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     decelerationRate: true,
     disableIntervalMomentum: true,
     maintainVisibleContentPosition: true,
-    endFillColor: {process: require('../../StyleSheet/processColor').default},
+    endFillColor: colorAttribute,
     fadingEdgeLength: true,
     nestedScrollEnabled: true,
     overScrollMode: true,
@@ -44,21 +45,18 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     borderBottomRightRadius: true,
     borderRadius: true,
     borderStyle: true,
-    borderRightColor: {
-      process: require('../../StyleSheet/processColor').default,
-    },
-    borderColor: {process: require('../../StyleSheet/processColor').default},
-    borderBottomColor: {
-      process: require('../../StyleSheet/processColor').default,
-    },
+    borderRightColor: colorAttribute,
+    borderColor: colorAttribute,
+    borderBottomColor: colorAttribute,
     borderTopLeftRadius: true,
-    borderTopColor: {process: require('../../StyleSheet/processColor').default},
+    borderTopColor: colorAttribute,
     removeClippedSubviews: true,
     borderTopRightRadius: true,
-    borderLeftColor: {
-      process: require('../../StyleSheet/processColor').default,
-    },
+    borderLeftColor: colorAttribute,
+    snapToItemPadding: true,
+    scrollAnimationEnabled: true,
     pointerEvents: true,
+    scrollsChildToFocus: true,
   },
 };
 

package/Libraries/Components/ScrollView/ScrollView.d.ts

@@ -515,8 +515,9 @@ export interface ScrollViewPropsIOS {
    *      - `start` (the default) will align the snap at the left (horizontal) or top (vertical)
    *      - `center` will align the snap in the center
    *      - `end` will align the snap at the right (horizontal) or bottom (vertical)
+   *      - `item` will align the snap according to the value of `scrollSnapAlign` for individual items in the scroll view (TV platforms only).
    */
-  snapToAlignment?: 'start' | 'center' | 'end' | undefined;
+  snapToAlignment?: 'start' | 'center' | 'end' | 'item' | undefined;
 
   /**
    * Fires when the scroll view scrolls to top after the status bar has been tapped
@@ -593,6 +594,15 @@ export interface ScrollViewPropsAndroid {
    * Causes the scrollbars not to turn transparent when they are not in use. The default value is false.
    */
   persistentScrollbar?: boolean | undefined;
+
+  /**
+   * When false, the ScrollView will not automatically scroll to a focused child when
+   * the child requests focus. This can be useful when you want to control the scroll
+   * position programmatically. The default value is true.
+   *
+   * @platform android
+   */
+  scrollsChildToFocus?: boolean | undefined;
 }
 
 export interface ScrollViewProps
@@ -744,6 +754,13 @@ export interface ScrollViewProps
    */
   removeClippedSubviews?: boolean | undefined;
 
+  /**
+   * (TV only)
+   * When false, the scroll view will jump to the correct offset without animation
+   * when focus changes. Defaults to true.
+   */
+  scrollAnimationEnabled?: boolean | undefined;
+
   /**
    * When true, shows a horizontal scroll indicator.
    */

package/Libraries/Components/ScrollView/ScrollView.js

@@ -174,7 +174,7 @@ export interface PublicScrollViewInstance
 
 type InnerViewInstance = React.ElementRef<typeof View>;
 
-export type ScrollViewPropsIOS = $ReadOnly<{
+export type ScrollViewPropsIOS = Readonly<{
   /**
    * Controls whether iOS should automatically adjust the content inset
    * for scroll views that are placed behind a navigation bar or
@@ -336,7 +336,7 @@ export type ScrollViewPropsIOS = $ReadOnly<{
   showsScrollIndex?: ?boolean,
 }>;
 
-export type ScrollViewPropsAndroid = $ReadOnly<{
+export type ScrollViewPropsAndroid = Readonly<{
   /**
    * Enables nested scrolling for Android API level 21+.
    * Nested scrolling is supported by default on iOS
@@ -394,14 +394,22 @@ export type ScrollViewPropsAndroid = $ReadOnly<{
    * @platform android
    */
   fadingEdgeLength?: ?number | {start: number, end: number},
+  /**
+   * When false, the ScrollView will not automatically scroll to a focused child when
+   * the child requests focus. This can be useful when you want to control the scroll
+   * position programmatically. The default value is true.
+   *
+   * @platform android
+   */
+  scrollsChildToFocus?: ?boolean,
 }>;
 
 type StickyHeaderComponentType = component(
-  ref?: React.RefSetter<$ReadOnly<interface {setNextHeaderY: number => void}>>,
+  ref?: React.RefSetter<Readonly<interface {setNextHeaderY: number => void}>>,
   ...ScrollViewStickyHeaderProps
 );
 
-type ScrollViewBaseProps = $ReadOnly<{
+type ScrollViewBaseProps = Readonly<{
   /**
    * These styles will be applied to the scroll view content container which
    * wraps all of the child views. Example:
@@ -520,7 +528,7 @@ type ScrollViewBaseProps = $ReadOnly<{
    * whether content is "visible" or not.
    *
    */
-  maintainVisibleContentPosition?: ?$ReadOnly<{
+  maintainVisibleContentPosition?: ?Readonly<{
     minIndexForVisible: number,
     autoscrollToTopThreshold?: ?number,
   }>,
@@ -597,7 +605,7 @@ type ScrollViewBaseProps = $ReadOnly<{
    * top of the scroll view. This property is not supported in conjunction
    * with `horizontal={true}`.
    */
-  stickyHeaderIndices?: ?$ReadOnlyArray<number>,
+  stickyHeaderIndices?: ?ReadonlyArray<number>,
   /**
    * A React Component that will be used to render sticky headers.
    * To be used together with `stickyHeaderIndices` or with `SectionList`, defaults to `ScrollViewStickyHeader`.
@@ -612,8 +620,15 @@ type ScrollViewBaseProps = $ReadOnly<{
    *   - `'start'` (the default) will align the snap at the left (horizontal) or top (vertical)
    *   - `'center'` will align the snap in the center
    *   - `'end'` will align the snap at the right (horizontal) or bottom (vertical)
+   *   - `'item'` will align the snap according to the value of `scrollSnapAlign` for individual items in the scroll view (TV platforms only).
    */
-  snapToAlignment?: ?('start' | 'center' | 'end'),
+  snapToAlignment?: ?('start' | 'center' | 'end' | 'item'),
+  /**
+   * Padding applied when snapping to items using `snapToAlignment="item"`.
+   * This is set on the parent scroll view, not directly on child items.
+   * Only used when `snapToAlignment` is set to `'item'`.
+   */
+  snapToItemPadding?: ?number,
   /**
    * When set, causes the scroll view to stop at multiples of the value of
    * `snapToInterval`. This can be used for paginating through children
@@ -631,7 +646,7 @@ type ScrollViewBaseProps = $ReadOnly<{
    *
    * Overrides less configurable `pagingEnabled` and `snapToInterval` props.
    */
-  snapToOffsets?: ?$ReadOnlyArray<number>,
+  snapToOffsets?: ?ReadonlyArray<number>,
   /**
    * Use in conjunction with `snapToOffsets`. By default, the beginning
    * of the list counts as a snap offset. Set `snapToStart` to false to disable
@@ -655,6 +670,12 @@ type ScrollViewBaseProps = $ReadOnly<{
    * true.
    */
   removeClippedSubviews?: ?boolean,
+  /**
+   * (TV only)
+   * When false, the scroll view will jump to the correct offset without animation
+   * when focus changes. Defaults to true.
+   */
+  scrollAnimationEnabled?: ?boolean,
   /**
    * A RefreshControl component, used to provide pull-to-refresh
    * functionality for the ScrollView. Only works for vertical ScrollViews
@@ -679,7 +700,7 @@ type ScrollViewBaseProps = $ReadOnly<{
   scrollViewRef?: React.RefSetter<PublicScrollViewInstance>,
 }>;
 
-export type ScrollViewProps = $ReadOnly<{
+export type ScrollViewProps = Readonly<{
   ...Omit<ViewProps, 'experimental_accessibilityOrder'>,
   ...ScrollViewPropsIOS,
   ...ScrollViewPropsAndroid,
@@ -692,7 +713,7 @@ type ScrollViewState = {
 
 const IS_ANIMATING_TOUCH_START_THRESHOLD_MS = 16;
 
-export type ScrollViewComponentStatics = $ReadOnly<{
+export type ScrollViewComponentStatics = Readonly<{
   Context: typeof ScrollViewContext,
 }>;
 
@@ -1858,6 +1879,8 @@ class ScrollView extends React.Component<ScrollViewProps, ScrollViewState> {
           {style: StyleSheet.compose(baseStyle, outer)},
           <NativeScrollView
             {...props}
+            // Nested scroll should always be enabled to allow the child scroll view to handle events before passing them to the refresh control parent
+            nestedScrollEnabled={props.nestedScrollEnabled ?? true}
             style={StyleSheet.compose(baseStyle, inner)}
             // $FlowFixMe[incompatible-type] - Flow only knows element refs.
             ref={scrollViewRef}>

package/Libraries/Components/ScrollView/ScrollViewNativeComponent.js

@@ -15,6 +15,7 @@ import type {ScrollViewNativeProps as Props} from './ScrollViewNativeComponentTy
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
 import {ConditionallyIgnoredEventHandlers} from '../../NativeComponent/ViewConfigIgnore';
 import Platform from '../../Utilities/Platform';
+import {colorAttribute} from '../View/ReactNativeStyleAttributes';
 
 export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
   Platform.OS === 'android'
@@ -60,34 +61,25 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           nestedScrollEnabled: true,
           scrollEventThrottle: true,
           borderStyle: true,
-          borderRightColor: {
-            process: require('../../StyleSheet/processColor').default,
-          },
-          borderColor: {
-            process: require('../../StyleSheet/processColor').default,
-          },
-          borderBottomColor: {
-            process: require('../../StyleSheet/processColor').default,
-          },
+          borderRightColor: colorAttribute,
+          borderColor: colorAttribute,
+          borderBottomColor: colorAttribute,
           persistentScrollbar: true,
           horizontal: true,
-          endFillColor: {
-            process: require('../../StyleSheet/processColor').default,
-          },
+          endFillColor: colorAttribute,
           fadingEdgeLength: true,
           overScrollMode: true,
           borderTopLeftRadius: true,
           scrollPerfTag: true,
-          borderTopColor: {
-            process: require('../../StyleSheet/processColor').default,
-          },
+          borderTopColor: colorAttribute,
           removeClippedSubviews: true,
           borderTopRightRadius: true,
-          borderLeftColor: {
-            process: require('../../StyleSheet/processColor').default,
-          },
+          borderLeftColor: colorAttribute,
+          snapToItemPadding: true,
+          scrollAnimationEnabled: true,
           pointerEvents: true,
           isInvertedVirtualizedList: true,
+          scrollsChildToFocus: true,
         },
       }
     : {
@@ -151,7 +143,9 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           scrollsToTop: true,
           showsHorizontalScrollIndicator: true,
           showsVerticalScrollIndicator: true,
+          scrollAnimationEnabled: true,
           showsScrollIndex: true,
+          snapToItemPadding: true,
           snapToAlignment: true,
           snapToEnd: true,
           snapToInterval: true,

package/Libraries/Components/ScrollView/ScrollViewNativeComponentType.js

@@ -19,7 +19,7 @@ import type {
 } from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 
-export type ScrollViewNativeProps = $ReadOnly<{
+export type ScrollViewNativeProps = Readonly<{
   ...ViewProps,
   alwaysBounceHorizontal?: ?boolean,
   alwaysBounceVertical?: ?boolean,
@@ -46,7 +46,7 @@ export type ScrollViewNativeProps = $ReadOnly<{
   indicatorStyle?: ?('default' | 'black' | 'white'),
   isInvertedVirtualizedList?: ?boolean,
   keyboardDismissMode?: ?('none' | 'on-drag' | 'interactive'),
-  maintainVisibleContentPosition?: ?$ReadOnly<{
+  maintainVisibleContentPosition?: ?Readonly<{
     minIndexForVisible: number,
     autoscrollToTopThreshold?: ?number,
   }>,
@@ -69,14 +69,17 @@ export type ScrollViewNativeProps = $ReadOnly<{
   scrollPerfTag?: ?string,
   scrollToOverflowEnabled?: ?boolean,
   scrollsToTop?: ?boolean,
+  scrollsChildToFocus?: ?boolean,
+  snapToItemPadding?: ?number,
   sendMomentumEvents?: ?boolean,
   showsHorizontalScrollIndicator?: ?boolean,
+  scrollAnimationEnabled?: ?boolean,
   showsScrollIndex?: ?boolean,
   showsVerticalScrollIndicator?: ?boolean,
-  snapToAlignment?: ?('start' | 'center' | 'end'),
+  snapToAlignment?: ?('start' | 'center' | 'end' | 'item'),
   snapToEnd?: ?boolean,
   snapToInterval?: ?number,
-  snapToOffsets?: ?$ReadOnlyArray<number>,
+  snapToOffsets?: ?ReadonlyArray<number>,
   snapToStart?: ?boolean,
   zoomScale?: ?number,
   // Overrides

package/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -25,7 +25,7 @@ import {
   useState,
 } from 'react';
 
-export type ScrollViewStickyHeaderProps = $ReadOnly<{
+export type ScrollViewStickyHeaderProps = Readonly<{
   children?: React.Node,
   nextHeaderLayoutY: ?number,
   onLayout: (event: LayoutChangeEvent) => void,

package/Libraries/Components/StaticRenderer.js

@@ -12,7 +12,7 @@
 
 import * as React from 'react';
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   /**
    * Indicates whether the render function needs to be called again
    */

package/Libraries/Components/StatusBar/StatusBar.js

@@ -20,7 +20,7 @@ import * as React from 'react';
 /**
  * Status bar style
  */
-export type StatusBarStyle = $Keys<{
+export type StatusBarStyle = keyof {
   /**
    * Default status bar style (dark for iOS, light for Android)
    */
@@ -34,12 +34,12 @@ export type StatusBarStyle = $Keys<{
    */
   'dark-content': string,
   ...
-}>;
+};
 
 /**
  * Status bar animation
  */
-export type StatusBarAnimation = $Keys<{
+export type StatusBarAnimation = keyof {
   /**
    * No animation
    */
@@ -53,9 +53,9 @@ export type StatusBarAnimation = $Keys<{
    */
   slide: string,
   ...
-}>;
+};
 
-export type StatusBarPropsAndroid = $ReadOnly<{
+export type StatusBarPropsAndroid = Readonly<{
   /**
    * The background color of the status bar.
    *
@@ -76,7 +76,7 @@ export type StatusBarPropsAndroid = $ReadOnly<{
   translucent?: ?boolean,
 }>;
 
-export type StatusBarPropsIOS = $ReadOnly<{
+export type StatusBarPropsIOS = Readonly<{
   /**
    * If the network activity indicator should be visible.
    *
@@ -92,7 +92,7 @@ export type StatusBarPropsIOS = $ReadOnly<{
   showHideTransition?: ?('fade' | 'slide' | 'none'),
 }>;
 
-type StatusBarBaseProps = $ReadOnly<{
+type StatusBarBaseProps = Readonly<{
   /**
    * If the status bar is hidden.
    */
@@ -108,7 +108,7 @@ type StatusBarBaseProps = $ReadOnly<{
   barStyle?: ?('default' | 'light-content' | 'dark-content'),
 }>;
 
-export type StatusBarProps = $ReadOnly<{
+export type StatusBarProps = Readonly<{
   ...StatusBarPropsAndroid,
   ...StatusBarPropsIOS,
   ...StatusBarBaseProps,

package/Libraries/Components/Switch/Switch.js

@@ -48,7 +48,7 @@ export type SwitchPropsIOS = {
   tintColor?: ?ColorValue,
 };
 
-type SwitchChangeEventData = $ReadOnly<{
+type SwitchChangeEventData = Readonly<{
   target: number,
   value: boolean,
 }>;
@@ -82,7 +82,7 @@ type SwitchPropsBase = {
       color of the background exposed by the shrunken track, use
        [`ios_backgroundColor`](https://reactnative.dev/docs/switch#ios_backgroundColor).
      */
-  trackColor?: ?$ReadOnly<{
+  trackColor?: ?Readonly<{
     false?: ?ColorValue,
     true?: ?ColorValue,
   }>,
@@ -109,7 +109,7 @@ type SwitchPropsBase = {
   onValueChange?: ?(value: boolean) => Promise<void> | void,
 };
 
-export type SwitchProps = $ReadOnly<{
+export type SwitchProps = Readonly<{
   ...ViewProps,
   ...SwitchPropsIOS,
   ...SwitchPropsBase,

package/Libraries/Components/TV/TVViewPropTypes.js

@@ -124,4 +124,11 @@ export type TVViewProps = $ReadOnly<{|
    *
    */
   nextFocusUp?: ?number,
+
+  /**
+   * Scroll snap alignment (used with snapToAlignment="item" in ScrollView).
+   *
+   */
+  scrollSnapAlign?: ?('start' | 'center' | 'end'),
+
 |}>;

package/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js

@@ -24,6 +24,7 @@ import type {TextInputNativeCommands} from './TextInputNativeCommands';
 
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
+import {colorAttribute} from '../View/ReactNativeStyleAttributes';
 
 export type KeyboardType =
   // Cross Platform
@@ -63,7 +64,7 @@ export type ReturnKeyType =
 
 export type SubmitBehavior = 'submit' | 'blurAndSubmit' | 'newline';
 
-export type AndroidTextInputNativeProps = $ReadOnly<{
+export type AndroidTextInputNativeProps = Readonly<{
   // This allows us to inherit everything from ViewProps except for style (see below)
   // This must be commented for Fabric codegen to work.
   ...Omit<ViewProps, 'style'>,
@@ -339,13 +340,13 @@ export type AndroidTextInputNativeProps = $ReadOnly<{
    * Callback that is called when the text input is blurred.
    * `target` is the reactTag of the element
    */
-  onBlur?: ?BubblingEventHandler<$ReadOnly<{target: Int32}>>,
+  onBlur?: ?BubblingEventHandler<Readonly<{target: Int32}>>,
 
   /**
    * Callback that is called when the text input is focused.
    * `target` is the reactTag of the element
    */
-  onFocus?: ?BubblingEventHandler<$ReadOnly<{target: Int32}>>,
+  onFocus?: ?BubblingEventHandler<Readonly<{target: Int32}>>,
 
   /**
    * Callback that is called when the text input's text changes.
@@ -353,7 +354,7 @@ export type AndroidTextInputNativeProps = $ReadOnly<{
    * TODO: differentiate between onChange and onChangeText
    */
   onChange?: ?BubblingEventHandler<
-    $ReadOnly<{target: Int32, eventCount: Int32, text: string}>,
+    Readonly<{target: Int32, eventCount: Int32, text: string}>,
   >,
 
   /**
@@ -362,7 +363,7 @@ export type AndroidTextInputNativeProps = $ReadOnly<{
    * TODO: differentiate between onChange and onChangeText
    */
   onChangeText?: ?BubblingEventHandler<
-    $ReadOnly<{target: Int32, eventCount: Int32, text: string}>,
+    Readonly<{target: Int32, eventCount: Int32, text: string}>,
   >,
 
   /**
@@ -373,18 +374,16 @@ export type AndroidTextInputNativeProps = $ReadOnly<{
    * Only called for multiline text inputs.
    */
   onContentSizeChange?: ?DirectEventHandler<
-    $ReadOnly<{
+    Readonly<{
       target: Int32,
-      contentSize: $ReadOnly<{width: Double, height: Double}>,
+      contentSize: Readonly<{width: Double, height: Double}>,
     }>,
   >,
 
   /**
    * Callback that is called when text input ends.
    */
-  onEndEditing?: ?BubblingEventHandler<
-    $ReadOnly<{target: Int32, text: string}>,
-  >,
+  onEndEditing?: ?BubblingEventHandler<Readonly<{target: Int32, text: string}>>,
 
   /**
    * Callback that is called when the text input selection is changed.
@@ -392,9 +391,9 @@ export type AndroidTextInputNativeProps = $ReadOnly<{
    * `{ nativeEvent: { selection: { start, end } } }`.
    */
   onSelectionChange?: ?DirectEventHandler<
-    $ReadOnly<{
+    Readonly<{
       target: Int32,
-      selection: $ReadOnly<{start: Double, end: Double}>,
+      selection: Readonly<{start: Double, end: Double}>,
     }>,
   >,
 
@@ -403,7 +402,7 @@ export type AndroidTextInputNativeProps = $ReadOnly<{
    * Invalid if `multiline={true}` is specified.
    */
   onSubmitEditing?: ?BubblingEventHandler<
-    $ReadOnly<{target: Int32, text: string}>,
+    Readonly<{target: Int32, text: string}>,
   >,
 
   /**
@@ -413,7 +412,7 @@ export type AndroidTextInputNativeProps = $ReadOnly<{
    * the typed-in character otherwise including `' '` for space.
    * Fires before `onChange` callbacks.
    */
-  onKeyPress?: ?BubblingEventHandler<$ReadOnly<{target: Int32, key: string}>>,
+  onKeyPress?: ?BubblingEventHandler<Readonly<{target: Int32, key: string}>>,
 
   /**
    * Invoked on content scroll with `{ nativeEvent: { contentOffset: { x, y } } }`.
@@ -421,28 +420,28 @@ export type AndroidTextInputNativeProps = $ReadOnly<{
    * is not provided for performance reasons.
    */
   onScroll?: ?DirectEventHandler<
-    $ReadOnly<{
+    Readonly<{
       target: Int32,
       responderIgnoreScroll: boolean,
-      contentInset: $ReadOnly<{
+      contentInset: Readonly<{
         top: Double, // always 0 on Android
         bottom: Double, // always 0 on Android
         left: Double, // always 0 on Android
         right: Double, // always 0 on Android
       }>,
-      contentOffset: $ReadOnly<{
+      contentOffset: Readonly<{
         x: Double,
         y: Double,
       }>,
-      contentSize: $ReadOnly<{
+      contentSize: Readonly<{
         width: Double, // always 0 on Android
         height: Double, // always 0 on Android
       }>,
-      layoutMeasurement: $ReadOnly<{
+      layoutMeasurement: Readonly<{
         width: Double,
         height: Double,
       }>,
-      velocity: $ReadOnly<{
+      velocity: Readonly<{
         x: Double, // always 0 on Android
         y: Double, // always 0 on Android
       }>,
@@ -479,7 +478,7 @@ export type AndroidTextInputNativeProps = $ReadOnly<{
    * The start and end of the text input's selection. Set start and end to
    * the same value to position the cursor.
    */
-  selection?: ?$ReadOnly<{
+  selection?: ?Readonly<{
     start: Int32,
     end?: ?Int32,
   }>,
@@ -582,7 +581,7 @@ export type AndroidTextInputNativeProps = $ReadOnly<{
   textShadowRadius?: ?Float,
   textDecorationLine?: ?string,
   fontStyle?: ?string,
-  textShadowOffset?: ?$ReadOnly<{width?: ?Double, height?: ?Double}>,
+  textShadowOffset?: ?Readonly<{width?: ?Double, height?: ?Double}>,
   lineHeight?: ?Float,
   textTransform?: ?string,
   color?: ?Int32,
@@ -650,41 +649,33 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     placeholder: true,
     inlineImagePadding: true,
     contextMenuHidden: true,
-    textShadowColor: {
-      process: require('../../StyleSheet/processColor').default,
-    },
+    textShadowColor: colorAttribute,
     maxLength: true,
     selectTextOnFocus: true,
     textShadowRadius: true,
-    underlineColorAndroid: {
-      process: require('../../StyleSheet/processColor').default,
-    },
+    underlineColorAndroid: colorAttribute,
     textDecorationLine: true,
     submitBehavior: true,
     textAlignVertical: true,
     fontStyle: true,
     textShadowOffset: true,
-    selectionColor: {process: require('../../StyleSheet/processColor').default},
-    selectionHandleColor: {
-      process: require('../../StyleSheet/processColor').default,
-    },
-    placeholderTextColor: {
-      process: require('../../StyleSheet/processColor').default,
-    },
+    selectionColor: colorAttribute,
+    selectionHandleColor: colorAttribute,
+    placeholderTextColor: colorAttribute,
     importantForAutofill: true,
     lineHeight: true,
     textTransform: true,
     returnKeyType: true,
     keyboardType: true,
     multiline: true,
-    color: {process: require('../../StyleSheet/processColor').default},
+    color: colorAttribute,
     autoComplete: true,
     numberOfLines: true,
     letterSpacing: true,
     returnKeyLabel: true,
     fontSize: true,
     onKeyPress: true,
-    cursorColor: {process: require('../../StyleSheet/processColor').default},
+    cursorColor: colorAttribute,
     text: true,
     showSoftInputOnFocus: true,
     textAlign: true,
@@ -706,22 +697,16 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     editable: true,
     fontVariant: true,
     borderBottomRightRadius: true,
-    borderBottomColor: {
-      process: require('../../StyleSheet/processColor').default,
-    },
+    borderBottomColor: colorAttribute,
     borderRadius: true,
-    borderRightColor: {
-      process: require('../../StyleSheet/processColor').default,
-    },
-    borderColor: {process: require('../../StyleSheet/processColor').default},
+    borderRightColor: colorAttribute,
+    borderColor: colorAttribute,
     borderTopRightRadius: true,
     borderStyle: true,
     borderBottomLeftRadius: true,
-    borderLeftColor: {
-      process: require('../../StyleSheet/processColor').default,
-    },
+    borderLeftColor: colorAttribute,
     borderTopLeftRadius: true,
-    borderTopColor: {process: require('../../StyleSheet/processColor').default},
+    borderTopColor: colorAttribute,
   },
 };
 

package/Libraries/Components/TextInput/InputAccessoryView.js

@@ -76,7 +76,7 @@ import * as React from 'react';
  * For an example, look at InputAccessoryViewExample.js in RNTester.
  */
 
-export type InputAccessoryViewProps = $ReadOnly<{
+export type InputAccessoryViewProps = Readonly<{
   +children: React.Node,
   /**
    * An ID which is used to associate this `InputAccessoryView` to