Enforce compatibility with exactOptionalPropertyTypes

.eslintrc.js

@@ -91,5 +91,15 @@ module.exports = {
         'react/self-closing-comp': 'off',
       },
     },
+    {
+      files: ['**/*.d.ts'],
+      plugins: ['redundant-undefined'],
+      rules: {
+        'redundant-undefined/redundant-undefined': [
+          'error',
+          {followExactOptionalPropertyTypes: true},
+        ],
+      },
+    },
   ],
 };

Libraries/Alert/Alert.d.ts

@@ -13,14 +13,14 @@
 export interface AlertButton {
   text?: string | undefined;
   onPress?: ((value?: string) => void) | undefined;
-  isPreferred?: boolean;
+  isPreferred?: boolean | undefined;
   style?: 'default' | 'cancel' | 'destructive' | undefined;
 }
 
 interface AlertOptions {
   /** @platform android */
   cancelable?: boolean | undefined;
-  userInterfaceStyle?: 'unspecified' | 'light' | 'dark';
+  userInterfaceStyle?: 'unspecified' | 'light' | 'dark' | undefined;
   /** @platform android */
   onDismiss?: (() => void) | undefined;
 }

Libraries/Animated/Animated.d.ts

@@ -579,7 +579,7 @@ export namespace Animated {
     extends React.FC<AnimatedProps<React.ComponentPropsWithRef<T>>> {}
 
   export type AnimatedComponentOptions = {
-    collapsable?: boolean;
+    collapsable?: boolean | undefined;
   };
 
   /**

Libraries/Components/AccessibilityInfo/AccessibilityInfo.d.ts

@@ -137,7 +137,7 @@ export interface AccessibilityInfoStatic {
    */
   announceForAccessibilityWithOptions(
     announcement: string,
-    options: {queue?: boolean},
+    options: {queue?: boolean | undefined},
   ): void;
 
   /**

Libraries/Components/Pressable/Pressable.d.ts

@@ -158,7 +158,7 @@ export interface PressableProps
   /**
    * Duration (in milliseconds) to wait after press down before calling onPressIn.
    */
-  unstable_pressDelay?: number;
+  unstable_pressDelay?: number | undefined;
 }
 
 // TODO use React.AbstractComponent when available

Libraries/Components/ScrollView/ScrollView.d.ts

@@ -730,7 +730,7 @@ export interface ScrollViewProps
   /**
    * When true, Sticky header is hidden when scrolling down, and dock at the top when scrolling up.
    */
-  stickyHeaderHiddenOnScroll?: boolean;
+  stickyHeaderHiddenOnScroll?: boolean | undefined;
 
   /**
    * Style
@@ -841,7 +841,7 @@ export class ScrollView extends ScrollViewBase {
    * The options object has an animated prop, that enables the scrolling animation or not.
    * The animated prop defaults to true
    */
-  scrollToEnd(options?: {animated?: boolean}): void;
+  scrollToEnd(options?: {animated?: boolean | undefined}): void;
 
   /**
    * Displays the scroll indicators momentarily.

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

Libraries/Components/Touchable/TouchableWithoutFeedback.d.ts

@@ -40,7 +40,7 @@ export interface TouchableWithoutFeedbackProps
   extends TouchableWithoutFeedbackPropsIOS,
     TouchableWithoutFeedbackPropsAndroid,
     AccessibilityProps {
-  children?: React.ReactNode;
+  children?: React.ReactNode | undefined;
 
   /**
    * Delay in ms, from onPressIn, before onLongPress is called.

Libraries/Components/View/ViewAccessibility.d.ts

@@ -75,10 +75,10 @@ export interface AccessibilityProps
    */
   accessibilityValue?: AccessibilityValue | undefined;
 
-  'aria-valuemax'?: AccessibilityValue['max'];
-  'aria-valuemin'?: AccessibilityValue['min'];
-  'aria-valuenow'?: AccessibilityValue['now'];
-  'aria-valuetext'?: AccessibilityValue['text'];
+  'aria-valuemax'?: AccessibilityValue['max'] | undefined;
+  'aria-valuemin'?: AccessibilityValue['min'] | undefined;
+  'aria-valuenow'?: AccessibilityValue['now'] | undefined;
+  'aria-valuetext'?: AccessibilityValue['text'] | undefined;
   /**
    * When `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom action.
    */
@@ -105,7 +105,7 @@ export interface AccessibilityProps
   /**
    * Indicates to accessibility services to treat UI component like a specific role.
    */
-  role?: Role;
+  role?: Role | undefined;
 }
 
 export type AccessibilityActionInfo = Readonly<{

Libraries/Components/View/ViewPropTypes.d.ts

@@ -173,7 +173,7 @@ export interface ViewProps
     Touchable,
     PointerEvents,
     AccessibilityProps {
-  children?: React.ReactNode;
+  children?: React.ReactNode | undefined;
   /**
    * This defines how far a touch event can start away from the view.
    * Typical interface guidelines recommend touch targets that are at least

Libraries/Image/Image.d.ts

@@ -290,7 +290,7 @@ export interface ImagePropsBase
    *
    * See https://reactnative.dev/docs/image#crossorigin
    */
-  crossOrigin?: 'anonymous' | 'use-credentials';
+  crossOrigin?: 'anonymous' | 'use-credentials' | undefined;
 
   /**
    * Changes the color of all the non-transparent pixels to the tintColor.
@@ -359,7 +359,7 @@ export class Image extends ImageBase {
 }
 
 export interface ImageBackgroundProps extends ImagePropsBase {
-  children?: React.ReactNode;
+  children?: React.ReactNode | undefined;
   imageStyle?: StyleProp<ImageStyle> | undefined;
   style?: StyleProp<ViewStyle> | undefined;
   imageRef?(image: Image): void;

Libraries/Lists/FlatList.d.ts

@@ -50,7 +50,7 @@ export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
    * If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop,
    * stick it here and treat it immutably.
    */
-  extraData?: any;
+  extraData?: any | undefined;
 
   /**
    * `getItemLayout` is an optional optimization that lets us skip measurement of dynamic
@@ -144,7 +144,7 @@ export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
   /**
    * See `ViewabilityHelper` for flow type and further documentation.
    */
-  viewabilityConfig?: any;
+  viewabilityConfig?: any | undefined;
 
   /**
    * Note: may have bugs (missing content) in some circumstances - use at your own risk.

Libraries/Lists/SectionList.d.ts

@@ -75,7 +75,7 @@ export interface SectionListProps<ItemT, SectionT = DefaultSectionT>
    * If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop,
    * stick it here and treat it immutably.
    */
-  extraData?: any;
+  extraData?: any | undefined;
 
   /**
    * `getItemLayout` is an optional optimization that lets us skip measurement of dynamic

Libraries/Text/Text.d.ts

@@ -107,7 +107,7 @@ export interface TextProps
    */
   allowFontScaling?: boolean | undefined;
 
-  children?: React.ReactNode;
+  children?: React.ReactNode | undefined;
 
   /**
    * This can be one of the following values:

Libraries/Utilities/createPerformanceLogger.d.ts

@@ -9,10 +9,10 @@
 
 export type Timespan = {
   startTime: number;
-  endTime?: number;
-  totalTime?: number;
-  startExtras?: Extras;
-  endExtras?: Extras;
+  endTime?: number | undefined;
+  totalTime?: number | undefined;
+  startExtras?: Extras | undefined;
+  endExtras?: Extras | undefined;
 };
 
 // Extra values should be serializable primitives

packages/react-native-codegen/src/CodegenSchema.d.ts

@@ -47,7 +47,7 @@ export interface VoidTypeAnnotation {
 export interface ObjectTypeAnnotation<T> {
   readonly type: 'ObjectTypeAnnotation';
   readonly properties: readonly NamedShape<T>[];
-  readonly baseTypes?: readonly string[];
+  readonly baseTypes?: readonly string[] | undefined;
 }
 
 export interface FunctionTypeAnnotation<P, R> {
@@ -77,10 +77,10 @@ export interface ComponentShape extends OptionsShape {
 }
 
 export interface OptionsShape {
-  readonly interfaceOnly?: boolean;
-  readonly paperComponentName?: string;
-  readonly excludedPlatforms?: readonly PlatformType[];
-  readonly paperComponentNameDeprecated?: string;
+  readonly interfaceOnly?: boolean | undefined;
+  readonly paperComponentName?: string | undefined;
+  readonly excludedPlatforms?: readonly PlatformType[] | undefined;
+  readonly paperComponentNameDeprecated?: string | undefined;
 }
 
 export interface ExtendsPropsShape {
@@ -94,10 +94,10 @@ export interface EventTypeShape {
     | 'direct'
     | 'bubble';
   readonly optional: boolean;
-  readonly paperTopLevelNameDeprecated?: string;
+  readonly paperTopLevelNameDeprecated?: string | undefined;
   readonly typeAnnotation: {
     readonly type: 'EventTypeAnnotation';
-    readonly argument?: ObjectTypeAnnotation<EventTypeAnnotation>;
+    readonly argument?: ObjectTypeAnnotation<EventTypeAnnotation> | undefined;
   };
 }
 
@@ -211,7 +211,7 @@ export interface NativeModuleSchema {
   readonly enumMap: NativeModuleEnumMap;
   readonly spec: NativeModuleSpec;
   readonly moduleName: string;
-  readonly excludedPlatforms?: readonly PlatformType[];
+  readonly excludedPlatforms?: readonly PlatformType[] | undefined;
 }
 
 export interface NativeModuleSpec {
@@ -234,7 +234,7 @@ export type NativeModuleObjectTypeAnnotation = ObjectTypeAnnotation<Nullable<Nat
 
 export interface NativeModuleArrayTypeAnnotation<T extends Nullable<NativeModuleBaseTypeAnnotation>> {
   readonly type: 'ArrayTypeAnnotation';
-  readonly elementType?: T;
+  readonly elementType?: T | undefined;
 }
 
 export interface NativeModuleStringTypeAnnotation {
@@ -294,7 +294,7 @@ export interface NativeModuleTypeAliasTypeAnnotation {
 
 export interface NativeModulePromiseTypeAnnotation {
   readonly type: 'PromiseTypeAnnotation';
-  readonly elementType?: Nullable<NativeModuleBaseTypeAnnotation>;
+  readonly elementType?: Nullable<NativeModuleBaseTypeAnnotation> | undefined;
 }
 
 export type UnionTypeAnnotationMemberType =

packages/react-native-codegen/src/SchemaValidator.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type { SchemaType } from "./CodegenSchema";
+import type { SchemaType } from './CodegenSchema';
 
 export declare function getErrors(schema: SchemaType): readonly string[];
 export declare function validate(schema: SchemaType): void;

packages/react-native-codegen/src/parsers/parser.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type { SchemaType } from "../CodegenSchema";
-import type { ParserType } from "./errors";
+import type { SchemaType } from '../CodegenSchema';
+import type { ParserType } from './errors';
 
 // useful members only for downstream
 export interface Parser {

packages/react-native-codegen/src/parsers/schema/index.d.ts

@@ -5,6 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type { SchemaType } from "../../CodegenSchema";
+import type { SchemaType } from '../../CodegenSchema';
 
 export declare function parse(filename: string): SchemaType | undefined;

packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js

@@ -281,12 +281,10 @@ export function SectionList_scrollable(Props: {
         ref={ref}
         ListHeaderComponent={HeaderComponent}
         ListFooterComponent={FooterComponent}
-        // eslint-disable-next-line react/no-unstable-nested-components
         // $FlowFixMe[missing-local-annot]
         SectionSeparatorComponent={info => (
           <CustomSeparatorComponent {...info} text="SECTION SEPARATOR" />
         )}
-        // eslint-disable-next-line react/no-unstable-nested-components
         // $FlowFixMe[missing-local-annot]
         ItemSeparatorComponent={info => (
           <CustomSeparatorComponent {...info} text="ITEM SEPARATOR" />

packages/virtualized-lists/Lists/VirtualizedList.d.ts

@@ -23,7 +23,7 @@ export interface ViewToken {
   key: string;
   index: number | null;
   isViewable: boolean;
-  section?: any;
+  section?: any | undefined;
 }
 
 export interface ViewabilityConfig {
@@ -188,7 +188,7 @@ export interface VirtualizedListWithoutRenderItemProps<ItemT>
    * The default accessor functions assume this is an Array<{key: string}> but you can override
    * getItem, getItemCount, and keyExtractor to handle any type of index-based data.
    */
-  data?: any;
+  data?: any | undefined;
 
   /**
    * `debug` will turn on extra logging and visual overlays to aid with debugging both usage and
@@ -208,7 +208,7 @@ export interface VirtualizedListWithoutRenderItemProps<ItemT>
    * any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the
    * `data` prop, stick it here and treat it immutably.
    */
-  extraData?: any;
+  extraData?: any | undefined;
 
   /**
    * A generic accessor for extracting an item from any sort of data blob.

repo-config/package.json

@@ -37,6 +37,7 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-native": "^4.0.0",
+    "eslint-plugin-redundant-undefined": "^0.4.0",
     "eslint-plugin-relay": "^1.8.3",
     "flow-bin": "^0.201.0",
     "inquirer": "^7.1.0",

types/__typetests__/fabric-component-sample.ts

@@ -27,16 +27,16 @@ type Event = Readonly<{
 }>;
 
 interface NativeProps extends ViewProps {
-  string?: string;
-  number?: number;
-  boolean?: boolean;
-  default?: WithDefault<'option1' | 'option2', 'option1'>;
-  double?: Double;
-  float?: Float;
-  int32?: Int32;
-  unsafeObject?: UnsafeObject;
-  onBubblingEventHandler?: BubblingEventHandler<Event>;
-  onDirectEventHandler?: DirectEventHandler<Event>;
+  string?: string | undefined;
+  number?: number | undefined;
+  boolean?: boolean | undefined;
+  default?: WithDefault<'option1' | 'option2', 'option1'> | undefined;
+  double?: Double | undefined;
+  float?: Float | undefined;
+  int32?: Int32 | undefined;
+  unsafeObject?: UnsafeObject | undefined;
+  onBubblingEventHandler?: BubblingEventHandler<Event> | undefined;
+  onDirectEventHandler?: DirectEventHandler<Event> | undefined;
 }
 
 export type SampleViewType = NativeComponentType<NativeProps>;

types/modules/Codegen.d.ts

@@ -23,10 +23,10 @@ declare module 'react-native/Libraries/Utilities/codegenNativeComponent' {
   import type {HostComponent} from 'react-native';
 
   export interface Options {
-    readonly interfaceOnly?: boolean;
-    readonly paperComponentName?: string;
-    readonly paperComponentNameDeprecated?: string;
-    readonly excludedPlatforms?: ReadonlyArray<'iOS' | 'android'>;
+    readonly interfaceOnly?: boolean | undefined;
+    readonly paperComponentName?: string | undefined;
+    readonly paperComponentNameDeprecated?: string | undefined;
+    readonly excludedPlatforms?: ReadonlyArray<'iOS' | 'android'> | undefined;
   }
 
   export type NativeComponentType<T> = HostComponent<T>;