Make generated props and style types augmentable

packages/react-native/Libraries/Animated/components/AnimatedScrollView.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {____ViewStyle_Internal} from '../../StyleSheet/StyleSheetTypes';
+import type {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
 import type {
   AnimatedComponentType,
   AnimatedProps,
@@ -100,7 +100,7 @@ const AnimatedScrollViewWithInvertedRefreshControl =
 
     // Handle animated props on `refreshControl`.
     const [refreshControlAnimatedProps, refreshControlRef] = useAnimatedProps<
-      {style: ?____ViewStyle_Internal},
+      {style: ?ViewStyle},
       $FlowFixMe,
     >(intermediatePropsForRefreshControl);
     // NOTE: Assumes that refreshControl.ref` and `refreshControl.style` can be

packages/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -38,11 +38,7 @@ type ActivityIndicatorIOSProps = Readonly<{
   hidesWhenStopped?: ?boolean,
 }>;
 
-/** @build-types emit-as-interface Uniwind compatibility */
-export type ActivityIndicatorProps = Readonly<{
-  ...ViewProps,
-  ...ActivityIndicatorIOSProps,
-
+type ActivityIndicatorPropsCore = Readonly<{
   /**
    * Whether to show the indicator (`true`) or hide it (`false`).
    */
@@ -67,6 +63,13 @@ export type ActivityIndicatorProps = Readonly<{
   size?: ?IndicatorSize,
 }>;
 
+/** @build-types emit-as-interface Uniwind compatibility */
+export type ActivityIndicatorProps = Readonly<{
+  ...ViewProps,
+  ...ActivityIndicatorIOSProps,
+  ...ActivityIndicatorPropsCore,
+}>;
+
 /**
  * Displays a circular loading indicator.
  *

packages/react-native/Libraries/Components/Button.js

@@ -27,8 +27,7 @@ import View from './View/View';
 import invariant from 'invariant';
 import * as React from 'react';
 
-/** @build-types emit-as-interface Uniwind compatibility */
-export type ButtonProps = Readonly<{
+type ButtonPropsCore = Readonly<{
   /**
    * Text to display inside the button. On Android the given title will be
    * converted to the uppercased form.
@@ -167,6 +166,9 @@ export type ButtonProps = Readonly<{
   accessibilityLanguage?: ?Stringish,
 }>;
 
+/** @build-types emit-as-interface Uniwind compatibility */
+export type ButtonProps = ButtonPropsCore;
+
 const NativeTouchable:
   typeof TouchableNativeFeedback | typeof TouchableOpacity =
   Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;

packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -26,10 +26,7 @@ import Keyboard from './Keyboard';
 import * as React from 'react';
 import {createRef} from 'react';
 
-/** @build-types emit-as-interface Uniwind compatibility */
-export type KeyboardAvoidingViewProps = Readonly<{
-  ...ViewProps,
-
+type KeyboardAvoidingViewPropsCore = Readonly<{
   /**
    * Specify how to react to the presence of the keyboard.
    */
@@ -56,6 +53,12 @@ export type KeyboardAvoidingViewProps = Readonly<{
   keyboardVerticalOffset?: number,
 }>;
 
+/** @build-types emit-as-interface Uniwind compatibility */
+export type KeyboardAvoidingViewProps = Readonly<{
+  ...ViewProps,
+  ...KeyboardAvoidingViewPropsCore,
+}>;
+
 type KeyboardAvoidingViewState = {
   bottom: number,
 };

packages/react-native/Libraries/Components/Pressable/Pressable.js

@@ -32,11 +32,13 @@ export type PressableInstance = HostInstance;
 
 export type {PressableAndroidRippleConfig};
 
-/** @build-types emit-as-interface react-native-web compatibility */
-export type PressableStateCallbackType = Readonly<{
+type PressableStateCallbackTypeCore = Readonly<{
   pressed: boolean,
 }>;
 
+/** @build-types emit-as-interface react-native-web compatibility */
+export type PressableStateCallbackType = PressableStateCallbackTypeCore;
+
 type PressableBaseProps = Readonly<{
   /**
    * Whether a press gesture can be interrupted by a parent gesture such as a

packages/react-native/Libraries/Components/TextInput/InputAccessoryView.js

@@ -18,12 +18,7 @@ import useWindowDimensions from '../../Utilities/useWindowDimensions';
 import RCTInputAccessoryViewNativeComponent from './RCTInputAccessoryViewNativeComponent';
 import * as React from 'react';
 
-/**
- * InputAccessoryView is deprecated and will be removed in a future release.
- * @deprecated
- * @build-types emit-as-interface Expo compatibility
- */
-export type InputAccessoryViewProps = Readonly<{
+type InputAccessoryViewPropsCore = Readonly<{
   readonly children: React.Node,
   /**
    * An ID used to associate this `InputAccessoryView` to specified `TextInput`(s).
@@ -33,6 +28,13 @@ export type InputAccessoryViewProps = Readonly<{
   backgroundColor?: ?ColorValue,
 }>;
 
+/**
+ * InputAccessoryView is deprecated and will be removed in a future release.
+ * @deprecated
+ * @build-types emit-as-interface Expo compatibility
+ */
+export type InputAccessoryViewProps = InputAccessoryViewPropsCore;
+
 /**
  * A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a `TextInput` has focus. This component can be used to create custom toolbars.
  *

packages/react-native/Libraries/Components/TextInput/TextInput.js

@@ -9,7 +9,7 @@
  */
 
 import type {HostInstance} from '../../../src/private/types/HostInstance';
-import type {____TextStyle_Internal as TextStyleInternal} from '../../StyleSheet/StyleSheetTypes';
+import type {TextStyle} from '../../StyleSheet/StyleSheetTypes';
 import type {
   BlurEvent,
   FocusEvent,
@@ -543,16 +543,16 @@ function InternalTextInput(props: TextInputProps): React.Node {
   let _style = props.style;
   const flattenedStyle = flattenStyle<TextStyleProp>(props.style);
   if (flattenedStyle != null) {
-    let overrides: ?{...TextStyleInternal} = null;
+    let overrides: ?{...TextStyle} = null;
     if (typeof flattenedStyle?.fontWeight === 'number') {
-      overrides = overrides || ({} as {...TextStyleInternal});
+      overrides = overrides || ({} as {...TextStyle});
       overrides.fontWeight =
         // $FlowFixMe[incompatible-type]
-        flattenedStyle.fontWeight.toString() as TextStyleInternal['fontWeight'];
+        flattenedStyle.fontWeight.toString() as TextStyle['fontWeight'];
     }
 
     if (flattenedStyle.verticalAlign != null) {
-      overrides = overrides || ({} as {...TextStyleInternal});
+      overrides = overrides || ({} as {...TextStyle});
       overrides.textAlignVertical =
         verticalAlignToTextAlignVerticalMap[flattenedStyle.verticalAlign];
       overrides.verticalAlign = undefined;

packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -36,92 +36,93 @@ export type TouchableWithoutFeedbackPropsAndroid = {
   touchSoundDisabled?: ?boolean,
 };
 
+type TouchableWithoutFeedbackPropsCore = {
+  children?: ?React.Node,
+  /**
+   * Delay in ms, from onPressIn, before onLongPress is called.
+   */
+  delayLongPress?: ?number,
+  /**
+   * Delay in ms, from the start of the touch, before onPressIn is called.
+   */
+  delayPressIn?: ?number,
+  /**
+   * Delay in ms, from the release of the touch, before onPressOut is called.
+   */
+  delayPressOut?: ?number,
+  /**
+   * If true, disable all interactions for this component.
+   */
+  disabled?: ?boolean,
+  /**
+   * Whether this View should be focusable with a non-touch input device,
+   * eg. receive focus with a hardware keyboard / TV remote.
+   */
+  focusable?: ?boolean,
+  /**
+   * This defines how far your touch can start away from the button.
+   * This is added to pressRetentionOffset when moving off of the button.
+   * NOTE The touch area never extends past the parent view bounds and
+   * the Z-index of sibling views always takes precedence if a touch hits
+   * two overlapping views.
+   */
+  hitSlop?: ?EdgeInsetsOrSizeProp,
+  /**
+   * Used to reference react managed views from native code.
+   */
+  id?: string,
+  importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
+  nativeID?: ?string,
+  onAccessibilityAction?: ?(event: AccessibilityActionEvent) => unknown,
+  /**
+   * When `accessible` is true (which is the default) this may be called when
+   * the OS-specific concept of "blur" occurs, meaning the element lost focus.
+   * Some platforms may not have the concept of blur.
+   */
+  onBlur?: ?(event: BlurEvent) => unknown,
+  /**
+   * When `accessible` is true (which is the default) this may be called when
+   * the OS-specific concept of "focus" occurs. Some platforms may not have
+   * the concept of focus.
+   */
+  onFocus?: ?(event: FocusEvent) => unknown,
+  /**
+   * Invoked on mount and layout changes with
+   * {nativeEvent: {layout: {x, y, width, height}}}
+   */
+  onLayout?: ?(event: LayoutChangeEvent) => unknown,
+  onLongPress?: ?(event: GestureResponderEvent) => unknown,
+  /**
+   * Called when the touch is released,
+   * but not if cancelled (e.g. by a scroll that steals the responder lock).
+   */
+  onPress?: ?(event: GestureResponderEvent) => unknown,
+  onPressIn?: ?(event: GestureResponderEvent) => unknown,
+  onPressOut?: ?(event: GestureResponderEvent) => unknown,
+  /**
+   * When the scroll view is disabled, this defines how far your
+   * touch may move off of the button, before deactivating the button.
+   * Once deactivated, try moving it back and you'll see that the button
+   * is once again reactivated! Move it back and forth several times
+   * while the scroll view is disabled. Ensure you pass in a constant
+   * to reduce memory allocations.
+   */
+  pressRetentionOffset?: ?EdgeInsetsOrSizeProp,
+  rejectResponderTermination?: ?boolean,
+  /**
+   * Used to locate this view in end-to-end tests.
+   */
+  testID?: ?string,
+  /**
+   * //FIXME: not in doc but available in examples
+   */
+  style?: ?ViewStyleProp,
+};
+
 /** @build-types emit-as-interface Expo compatibility */
 export type TouchableWithoutFeedbackProps = Readonly<
-  {
-    children?: ?React.Node,
-    /**
-     * Delay in ms, from onPressIn, before onLongPress is called.
-     */
-    delayLongPress?: ?number,
-    /**
-     * Delay in ms, from the start of the touch, before onPressIn is called.
-     */
-    delayPressIn?: ?number,
-    /**
-     * Delay in ms, from the release of the touch, before onPressOut is called.
-     */
-    delayPressOut?: ?number,
-    /**
-     * If true, disable all interactions for this component.
-     */
-    disabled?: ?boolean,
-    /**
-     * Whether this View should be focusable with a non-touch input device,
-     * eg. receive focus with a hardware keyboard / TV remote.
-     */
-    focusable?: ?boolean,
-    /**
-     * This defines how far your touch can start away from the button.
-     * This is added to pressRetentionOffset when moving off of the button.
-     * NOTE The touch area never extends past the parent view bounds and
-     * the Z-index of sibling views always takes precedence if a touch hits
-     * two overlapping views.
-     */
-    hitSlop?: ?EdgeInsetsOrSizeProp,
-    /**
-     * Used to reference react managed views from native code.
-     */
-    id?: string,
-    importantForAccessibility?: ?(
-      'auto' | 'yes' | 'no' | 'no-hide-descendants'
-    ),
-    nativeID?: ?string,
-    onAccessibilityAction?: ?(event: AccessibilityActionEvent) => unknown,
-    /**
-     * When `accessible` is true (which is the default) this may be called when
-     * the OS-specific concept of "blur" occurs, meaning the element lost focus.
-     * Some platforms may not have the concept of blur.
-     */
-    onBlur?: ?(event: BlurEvent) => unknown,
-    /**
-     * When `accessible` is true (which is the default) this may be called when
-     * the OS-specific concept of "focus" occurs. Some platforms may not have
-     * the concept of focus.
-     */
-    onFocus?: ?(event: FocusEvent) => unknown,
-    /**
-     * Invoked on mount and layout changes with
-     * {nativeEvent: {layout: {x, y, width, height}}}
-     */
-    onLayout?: ?(event: LayoutChangeEvent) => unknown,
-    onLongPress?: ?(event: GestureResponderEvent) => unknown,
-    /**
-     * Called when the touch is released,
-     * but not if cancelled (e.g. by a scroll that steals the responder lock).
-     */
-    onPress?: ?(event: GestureResponderEvent) => unknown,
-    onPressIn?: ?(event: GestureResponderEvent) => unknown,
-    onPressOut?: ?(event: GestureResponderEvent) => unknown,
-    /**
-     * When the scroll view is disabled, this defines how far your
-     * touch may move off of the button, before deactivating the button.
-     * Once deactivated, try moving it back and you'll see that the button
-     * is once again reactivated! Move it back and forth several times
-     * while the scroll view is disabled. Ensure you pass in a constant
-     * to reduce memory allocations.
-     */
-    pressRetentionOffset?: ?EdgeInsetsOrSizeProp,
-    rejectResponderTermination?: ?boolean,
-    /**
-     * Used to locate this view in end-to-end tests.
-     */
-    testID?: ?string,
-    /**
-     * //FIXME: not in doc but available in examples
-     */
-    style?: ?ViewStyleProp,
-  } & TouchableWithoutFeedbackPropsAndroid &
+  TouchableWithoutFeedbackPropsCore &
+    TouchableWithoutFeedbackPropsAndroid &
     TouchableWithoutFeedbackPropsIOS &
     AccessibilityProps,
 >;

packages/react-native/Libraries/Components/View/ViewAccessibility.js

@@ -349,10 +349,7 @@ export type AccessibilityPropsIOS = Readonly<{
   accessibilityRespondsToUserInteraction?: ?boolean,
 }>;
 
-/** @build-types emit-as-interface react-native-web compatibility */
-export type AccessibilityProps = Readonly<{
-  ...AccessibilityPropsAndroid,
-  ...AccessibilityPropsIOS,
+type AccessibilityPropsCore = Readonly<{
   /**
    * When `true`, indicates that the view is an accessibility element.
    * By default, all the touchable elements are accessible.
@@ -434,3 +431,10 @@ export type AccessibilityProps = Readonly<{
    */
   'aria-hidden'?: ?boolean,
 }>;
+
+/** @build-types emit-as-interface react-native-web compatibility */
+export type AccessibilityProps = Readonly<{
+  ...AccessibilityPropsAndroid,
+  ...AccessibilityPropsIOS,
+  ...AccessibilityPropsCore,
+}>;