@office-iss/react-native-win32 0.79.0 → 0.80.0-preview.1

package/Libraries/Image/Image.d.ts

@@ -19,13 +19,19 @@ import {ImageResizeMode} from './ImageResizeMode';
 import {ImageRequireSource, ImageURISource} from './ImageSource';
 
 /**
- * @see ImagePropsIOS.onProgress
+ * @deprecated Use `ImageProgressEventIOS` instead.
  */
 export interface ImageProgressEventDataIOS {
   loaded: number;
   total: number;
 }
 
+/**
+ * @see https://reactnative.dev/docs/image#onprogress
+ */
+export type ImageProgressEventIOS =
+  NativeSyntheticEvent<ImageProgressEventDataIOS>;
+
 export interface ImagePropsIOS {
   /**
    * blurRadius: the blur radius of the blur filter added to the image
@@ -44,9 +50,7 @@ export interface ImagePropsIOS {
   /**
    * Invoked on download progress with {nativeEvent: {loaded, total}}
    */
-  onProgress?:
-    | ((event: NativeSyntheticEvent<ImageProgressEventDataIOS>) => void)
-    | undefined;
+  onProgress?: ((event: ImageProgressEventIOS) => void) | undefined;
 
   /**
    * Invoked when a partial load of the image is complete. The definition of
@@ -99,6 +103,9 @@ export type ImageSourcePropType =
   | ImageURISource[]
   | ImageRequireSource;
 
+/**
+ * @deprecated Use `ImageLoadEvent` instead.
+ */
 export interface ImageLoadEventData {
   source: {
     height: number;
@@ -107,10 +114,23 @@ export interface ImageLoadEventData {
   };
 }
 
+/**
+ * @see https://reactnative.dev/docs/image#onload
+ */
+export type ImageLoadEvent = NativeSyntheticEvent<ImageLoadEventData>;
+
+/**
+ * @deprecated Use `ImageErrorEvent` instead.
+ */
 export interface ImageErrorEventData {
   error: any;
 }
 
+/**
+ * @see https://reactnative.dev/docs/image#onerror
+ */
+export type ImageErrorEvent = NativeSyntheticEvent<ImageErrorEventData>;
+
 /**
  * @see https://reactnative.dev/docs/image#resolveassetsource
  */
@@ -145,17 +165,13 @@ export interface ImagePropsBase
   /**
    * Invoked on load error with {nativeEvent: {error}}
    */
-  onError?:
-    | ((error: NativeSyntheticEvent<ImageErrorEventData>) => void)
-    | undefined;
+  onError?: ((error: ImageErrorEvent) => void) | undefined;
 
   /**
    * Invoked when load completes successfully
    * { source: { uri, height, width } }.
    */
-  onLoad?:
-    | ((event: NativeSyntheticEvent<ImageLoadEventData>) => void)
-    | undefined;
+  onLoad?: ((event: ImageLoadEvent) => void) | undefined;
 
   /**
    * Invoked when load either succeeds or fails

package/Libraries/Image/Image.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+// NOTE: This file supports backwards compatibility of subpath (deep) imports
+// from 'react-native' with platform-specific extensions. It can be deleted
+// once we remove the "./*" mapping from package.json "exports".
+
+import Image from './Image';
+
+export default Image;

package/Libraries/Image/Image.js.flow

@@ -8,15 +8,15 @@
  * @format
  */
 
-import type {Image} from './ImageTypes.flow';
+import type {ImageType} from './ImageTypes.flow';
 
 export type {
-  ImageProgressEventDataIOS,
+  ImageProgressEventIOS,
   ImagePropsIOS,
   ImagePropsAndroid,
   ImageSourcePropType,
-  ImageLoadEventData,
-  ImageErrorEventData,
+  ImageLoadEvent,
+  ImageErrorEvent,
   ImagePropsBase,
   ImageProps,
   ImageBackgroundProps,
@@ -24,4 +24,4 @@ export type {
 
 export type {ImageResolvedAssetSource, ImageSize} from './ImageTypes.flow';
 
-declare export default Image;
+declare export default ImageType;

package/Libraries/Image/ImageBackground.js

@@ -17,6 +17,8 @@ import StyleSheet from '../StyleSheet/StyleSheet';
 import Image from './Image';
 import * as React from 'react';
 
+export type {ImageBackgroundProps} from './ImageProps';
+
 /**
  * Very simple drop-in replacement for <Image> which supports nesting views.
  *

package/Libraries/Image/ImageInjection.js

@@ -11,7 +11,7 @@
 import type {
   AbstractImageAndroid,
   AbstractImageIOS,
-  Image as ImageComponent,
+  ImageType as ImageComponent,
 } from './ImageTypes.flow';
 
 import useMergeRefs from '../Utilities/useMergeRefs';

package/Libraries/Image/ImageProps.js

@@ -21,26 +21,35 @@ import type {
   LayoutChangeEvent,
   NativeSyntheticEvent,
 } from '../Types/CoreEventTypes';
-import typeof Image from './Image';
 import type {ImageResizeMode} from './ImageResizeMode';
 import type {ImageSource, ImageURISource} from './ImageSource';
-import type {ElementRef, Node, RefSetter} from 'react';
+import type {ImageType} from './ImageTypes.flow';
+
+import * as React from 'react';
 
 export type ImageSourcePropType = ImageSource;
 
-/**
- * @see ImagePropsIOS.onProgress
- */
-export type ImageProgressEventDataIOS = {
+type ImageProgressEventDataIOS = {
   loaded: number,
   total: number,
 };
 
-export type ImageErrorEventData = {
+/**
+ * @see ImagePropsIOS.onProgress
+ */
+export type ImageProgressEventIOS = NativeSyntheticEvent<
+  $ReadOnly<ImageProgressEventDataIOS>,
+>;
+
+type ImageErrorEventData = {
   error: string,
 };
 
-export type ImageLoadEventData = {
+export type ImageErrorEvent = NativeSyntheticEvent<
+  $ReadOnly<ImageErrorEventData>,
+>;
+
+type ImageLoadEventData = {
   source: {
     height: number,
     width: number,
@@ -70,9 +79,7 @@ export type ImagePropsIOS = $ReadOnly<{
    *
    * See https://reactnative.dev/docs/image#onprogress
    */
-  onProgress?: ?(
-    event: NativeSyntheticEvent<$ReadOnly<ImageProgressEventDataIOS>>,
-  ) => void,
+  onProgress?: ?(event: ImageProgressEventIOS) => void,
 }>;
 
 export type ImagePropsAndroid = $ReadOnly<{
@@ -121,7 +128,7 @@ export type ImagePropsAndroid = $ReadOnly<{
 }>;
 
 export type ImagePropsBase = $ReadOnly<{
-  ...$Diff<ViewProps, $ReadOnly<{style: ?ViewStyleProp}>>,
+  ...Omit<ViewProps, 'style'>,
   /**
    * When true, indicates the image is an accessibility element.
    *
@@ -201,9 +208,7 @@ export type ImagePropsBase = $ReadOnly<{
    *
    * See https://reactnative.dev/docs/image#onerror
    */
-  onError?: ?(
-    event: NativeSyntheticEvent<$ReadOnly<ImageErrorEventData>>,
-  ) => void,
+  onError?: ?(event: ImageErrorEvent) => void,
 
   /**
    * onLayout function
@@ -341,7 +346,7 @@ export type ImageProps = $ReadOnly<{
 
 export type ImageBackgroundProps = $ReadOnly<{
   ...ImageProps,
-  children?: Node,
+  children?: React.Node,
 
   /**
    * Style applied to the outer View component
@@ -362,5 +367,5 @@ export type ImageBackgroundProps = $ReadOnly<{
    *
    * See https://reactnative.dev/docs/imagebackground#imageref
    */
-  imageRef?: RefSetter<ElementRef<Image>>,
+  imageRef?: React.RefSetter<React.ElementRef<ImageType>>,
 }>;

package/Libraries/Image/ImageSource.js

@@ -82,8 +82,10 @@ export interface ImageURISource {
   +scale?: ?number;
 }
 
+export type ImageRequireSource = number;
+
 export type ImageSource =
-  | number
+  | ImageRequireSource
   | ImageURISource
   | $ReadOnlyArray<ImageURISource>;
 

package/Libraries/Image/ImageSourceUtils.js

@@ -52,14 +52,14 @@ export function getImageSourcesFromImageProps(
           // 1x scale is provided in `srcSet` prop so ignore the `src` prop if provided.
           shouldUseSrcForDefaultScale =
             scale === 1 ? false : shouldUseSrcForDefaultScale;
-          sourceList.push({headers: headers, scale, uri, width, height});
+          sourceList.push({headers, scale, uri, width, height});
         }
       }
     });
 
     if (shouldUseSrcForDefaultScale && src != null) {
       sourceList.push({
-        headers: headers,
+        headers,
         scale: 1,
         uri: src,
         width,
@@ -73,6 +73,8 @@ export function getImageSourcesFromImageProps(
     sources = sourceList;
   } else if (src != null) {
     sources = [{uri: src, headers: headers, width, height}];
+  } else if (source != null && source.uri && Object.keys(headers).length > 0) {
+    sources = [{...source, headers}];
   } else {
     sources = source;
   }

package/Libraries/Image/ImageTypes.flow.js

@@ -83,6 +83,6 @@ export type AbstractImageIOS = component(
 
 export type ImageIOS = AbstractImageIOS & ImageComponentStaticsIOS;
 
-export type Image = ImageIOS | ImageAndroid;
+export type ImageType = ImageIOS | ImageAndroid;
 
 export type {ImageProps} from './ImageProps';

package/Libraries/Image/Tests/ImageWin32Test.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 export declare const title = "ImageWin32Test";
 export declare const displayName = "Image Win32 test";
 export declare const description = "Image Win32 test";
 export declare const examples: {
     title: string;
     description: string;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }[];

package/Libraries/Image/Tests/ImageWin32Test.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageWin32Test.js","sourceRoot":"","sources":["../../../src-win/Libraries/Image/Tests/ImageWin32Test.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AACzB,+CAAqC;AAErC,MAAM,SAAS,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;AAElC,QAAA,KAAK,GAAG,gBAAgB,CAAC;AACzB,QAAA,WAAW,GAAG,kBAAkB,CAAC;AACjC,QAAA,WAAW,GAAG,kBAAkB,CAAC;AACjC,QAAA,QAAQ,GAAG;IACpB;QACE,KAAK,EAAE,0BAA0B;QACjC,WAAW,EAAE,YAAY;QACzB,MAAM;YACJ,OAAO,CACL,8BAAC,oBAAK,IACJ,KAAK,EAAG,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,EACnC,MAAM,EAAG,SAAS,GAClB,CACH,CAAC;QACJ,CAAC;KACF;CACF,CAAC","sourcesContent":["import React from 'react'\nimport { Image } from 'react-native';\n\nconst testImage = require('./img/dpitest.png');\n\nexport const title = 'ImageWin32Test';\nexport const displayName = 'Image Win32 test';\nexport const description = 'Image Win32 test';\nexport const examples = [\n    {\n      title: 'Win32 Image control test',\n      description: 'Test Image',\n      render(): JSX.Element {\n        return (\n          <Image\n            style={ { width: 100, height: 100 } }\n            source={ testImage }\n          />\n        );\n      },\n    },\n  ];\n"]}
+{"version":3,"file":"ImageWin32Test.js","sourceRoot":"","sources":["../../../src-win/Libraries/Image/Tests/ImageWin32Test.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AACzB,+CAAqC;AAErC,MAAM,SAAS,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;AAElC,QAAA,KAAK,GAAG,gBAAgB,CAAC;AACzB,QAAA,WAAW,GAAG,kBAAkB,CAAC;AACjC,QAAA,WAAW,GAAG,kBAAkB,CAAC;AACjC,QAAA,QAAQ,GAAG;IACpB;QACE,KAAK,EAAE,0BAA0B;QACjC,WAAW,EAAE,YAAY;QACzB,MAAM;YACJ,OAAO,CACL,8BAAC,oBAAK,IACJ,KAAK,EAAG,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,EACnC,MAAM,EAAG,SAAS,GAClB,CACH,CAAC;QACJ,CAAC;KACF;CACF,CAAC","sourcesContent":["import React from 'react'\nimport { Image } from 'react-native';\n\nconst testImage = require('./img/dpitest.png');\n\nexport const title = 'ImageWin32Test';\nexport const displayName = 'Image Win32 test';\nexport const description = 'Image Win32 test';\nexport const examples = [\n    {\n      title: 'Win32 Image control test',\n      description: 'Test Image',\n      render() {\n        return (\n          <Image\n            style={ { width: 100, height: 100 } }\n            source={ testImage }\n          />\n        );\n      },\n    },\n  ];\n"]}

package/Libraries/Interaction/InteractionManager.d.ts

@@ -20,6 +20,9 @@ export type PromiseTask = {
   gen: () => Promise<any>;
 };
 
+/**
+ * @deprecated
+ */
 export interface InteractionManagerStatic {
   Events: {
     interactionStart: string;
@@ -36,6 +39,8 @@ export interface InteractionManagerStatic {
    *   emitted
    * @param context - Optional context object to use when invoking the
    *   listener
+   *
+   * @deprecated
    */
   addListener(
     eventType: string,
@@ -46,6 +51,8 @@ export interface InteractionManagerStatic {
   /**
    * Schedule a function to run after all interactions have completed.
    * Returns a cancellable
+   *
+   * @deprecated
    */
   runAfterInteractions(task?: (() => any) | SimpleTask | PromiseTask): {
     then: (onfulfilled?: () => any, onrejected?: () => any) => Promise<any>;
@@ -55,11 +62,15 @@ export interface InteractionManagerStatic {
 
   /**
    * Notify manager that an interaction has started.
+   *
+   * @deprecated
    */
   createInteractionHandle(): Handle;
 
   /**
    * Notify manager that an interaction has completed.
+   *
+   * @deprecated
    */
   clearInteractionHandle(handle: Handle): void;
 
@@ -67,6 +78,8 @@ export interface InteractionManagerStatic {
    * A positive number will use setTimeout to schedule any tasks after
    * the eventLoopRunningTime hits the deadline value, otherwise all
    * tasks will be executed in one setImmediate batch (default).
+   *
+   * @deprecated
    */
   setDeadline(deadline: number): void;
 }

package/Libraries/Interaction/InteractionManager.js

@@ -8,11 +8,11 @@
  * @flow strict-local
  */
 
+import type {EventSubscription} from '../vendor/emitter/EventEmitter';
 import type {Task} from './TaskQueue';
 
 import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import EventEmitter from '../vendor/emitter/EventEmitter';
-import type {EventSubscription} from '../vendor/emitter/EventEmitter';
 
 const BatchedBridge = require('../BatchedBridge/BatchedBridge').default;
 const infoLog = require('../Utilities/infoLog').default;

package/Libraries/Interaction/PanResponder.js

@@ -193,7 +193,7 @@ type PassiveCallback = (
   gestureState: PanResponderGestureState,
 ) => mixed;
 
-export type GestureResponderHandlers = {
+export type GestureResponderHandlerMethods = {
   onMoveShouldSetResponder: (event: GestureResponderEvent) => boolean,
   onMoveShouldSetResponderCapture: (event: GestureResponderEvent) => boolean,
   onResponderEnd: (event: GestureResponderEvent) => void,
@@ -333,7 +333,7 @@ const PanResponder = {
    */
   _updateGestureStateOnMove(
     gestureState: PanResponderGestureState,
-    touchHistory: $PropertyType<GestureResponderEvent, 'touchHistory'>,
+    touchHistory: GestureResponderEvent['touchHistory'],
   ) {
     gestureState.numberActiveTouches = touchHistory.numberActiveTouches;
     gestureState.moveX = currentCentroidXOfTouchesChangedAfter(
@@ -403,7 +403,7 @@ const PanResponder = {
    */
   create(config: PanResponderCallbacks): {
     getInteractionHandle: () => ?number,
-    panHandlers: GestureResponderHandlers,
+    panHandlers: GestureResponderHandlerMethods,
   } {
     const interactionState = {
       handle: (null: ?number),

package/Libraries/Interaction/TaskQueue.js

@@ -117,6 +117,7 @@ class TaskQueue {
       } catch (e) {
         e.message =
           // $FlowFixMe[incompatible-type]
+          // $FlowFixMe[incompatible-use]
           'TaskQueue: Error with task ' + (task.name || '') + ': ' + e.message;
         throw e;
       }

package/Libraries/LayoutAnimation/LayoutAnimation.js

@@ -20,14 +20,14 @@ import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNa
 import {getFabricUIManager} from '../ReactNative/FabricUIManager';
 import Platform from '../Utilities/Platform';
 
+const UIManager = require('../ReactNative/UIManager').default;
+
 export type {
   LayoutAnimationType,
   LayoutAnimationProperty,
   LayoutAnimationAnimationConfig as LayoutAnimationAnim,
 } from '../Renderer/shims/ReactNativeTypes';
 
-const UIManager = require('../ReactNative/UIManager').default;
-
 // Reexport type
 export type LayoutAnimationConfig = LayoutAnimationConfig_;
 

package/Libraries/Linking/Linking.js

@@ -34,7 +34,7 @@ class LinkingImpl extends NativeEventEmitter<LinkingEventDefinitions> {
    */
   addEventListener<K: $Keys<LinkingEventDefinitions>>(
     eventType: K,
-    listener: (...$ElementType<LinkingEventDefinitions, K>) => mixed,
+    listener: (...LinkingEventDefinitions[K]) => mixed,
   ): EventSubscription {
     return this.addListener(eventType, listener);
   }

package/Libraries/Lists/FlatList.d.ts

@@ -228,8 +228,8 @@ export abstract class FlatListComponent<
    * Provides a reference to the underlying host component
    */
   getNativeScrollRef: () =>
-    | React.ElementRef<typeof View>
-    | React.ElementRef<typeof ScrollViewComponent>
+    | React.ComponentRef<typeof View>
+    | React.ComponentRef<typeof ScrollViewComponent>
     | null
     | undefined;
 

package/Libraries/Lists/FlatList.js

@@ -22,7 +22,7 @@ import {type ScrollResponderType} from '../Components/ScrollView/ScrollView';
 import View from '../Components/View/View';
 import VirtualizedLists from '@react-native/virtualized-lists';
 import memoizeOne from 'memoize-one';
-import React from 'react';
+import * as React from 'react';
 
 const StyleSheet = require('../StyleSheet/StyleSheet').default;
 const deepDiffer = require('../Utilities/differ/deepDiffer').default;
@@ -184,17 +184,14 @@ type FlatListBaseProps<ItemT> = {
 type VirtualizedListProps = React.ElementConfig<typeof VirtualizedList>;
 
 export type FlatListProps<ItemT> = {
-  ...$Diff<
+  ...Omit<
     VirtualizedListProps,
-    {
-      data: $PropertyType<VirtualizedListProps, 'data'>,
-      getItem: $PropertyType<VirtualizedListProps, 'getItem'>,
-      getItemCount: $PropertyType<VirtualizedListProps, 'getItemCount'>,
-      getItemLayout: $PropertyType<VirtualizedListProps, 'getItemLayout'>,
-      renderItem: $PropertyType<VirtualizedListProps, 'renderItem'>,
-      keyExtractor: $PropertyType<VirtualizedListProps, 'keyExtractor'>,
-      ...
-    },
+    | 'data'
+    | 'getItem'
+    | 'getItemCount'
+    | 'getItemLayout'
+    | 'renderItem'
+    | 'keyExtractor',
   >,
   ...FlatListBaseProps<ItemT>,
   ...

package/Libraries/Lists/SectionList.js

@@ -12,8 +12,10 @@
 
 import type {ScrollResponderType} from '../Components/ScrollView/ScrollView';
 import type {
+  ListRenderItemInfo,
   ScrollToLocationParamsType,
   SectionBase as _SectionBase,
+  SectionData,
   VirtualizedSectionListProps,
 } from '@react-native/virtualized-lists';
 
@@ -23,11 +25,21 @@ import * as React from 'react';
 
 const VirtualizedSectionList = VirtualizedLists.VirtualizedSectionList;
 
-type Item = any;
+type DefaultSectionT = {
+  [key: string]: any,
+};
+
+export type SectionBase<
+  SectionItemT,
+  SectionT = DefaultSectionT,
+> = _SectionBase<SectionItemT, SectionT>;
 
-export type SectionBase<SectionItemT> = _SectionBase<SectionItemT>;
+export type {
+  SectionData as SectionListData,
+  ScrollToLocationParamsType as SectionListScrollParams,
+};
 
-type RequiredProps<SectionT: SectionBase<any>> = {
+type RequiredProps<ItemT, SectionT = DefaultSectionT> = {
   /**
    * The actual data to render, akin to the `data` prop in [`<FlatList>`](https://reactnative.dev/docs/flatlist).
    *
@@ -39,25 +51,24 @@ type RequiredProps<SectionT: SectionBase<any>> = {
    *       ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>,
    *     }>
    */
-  sections: $ReadOnlyArray<SectionT>,
+  sections: $ReadOnlyArray<SectionData<ItemT, SectionT>>,
 };
 
-type OptionalProps<SectionT: SectionBase<any>> = {
+export type SectionListRenderItemInfo<ItemT, SectionT = DefaultSectionT> = {
+  ...ListRenderItemInfo<ItemT>,
+  section: SectionData<ItemT, SectionT>,
+  ...
+};
+
+export type SectionListRenderItem<ItemT, SectionT = DefaultSectionT> = (
+  info: SectionListRenderItemInfo<ItemT, SectionT>,
+) => React.Node | null;
+
+type OptionalProps<ItemT, SectionT = DefaultSectionT> = {
   /**
    * Default renderer for every item in every section. Can be over-ridden on a per-section basis.
    */
-  renderItem?: (info: {
-    item: Item,
-    index: number,
-    section: SectionT,
-    separators: {
-      highlight: () => void,
-      unhighlight: () => void,
-      updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
-      ...
-    },
-    ...
-  }) => null | React.Node,
+  renderItem?: SectionListRenderItem<ItemT, SectionT>,
   /**
    * A marker property for telling the list to re-render (since it implements `PureComponent`). If
    * any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the
@@ -80,7 +91,7 @@ type OptionalProps<SectionT: SectionBase<any>> = {
    * falls back to using the index, like react does. Note that this sets keys for each item, but
    * each overall section still needs its own key.
    */
-  keyExtractor?: ?(item: Item, index: number) => string,
+  keyExtractor?: ?(item: ItemT, index: number) => string,
   /**
    * Called once when the scroll position gets within `onEndReachedThreshold` of the rendered
    * content.
@@ -94,28 +105,13 @@ type OptionalProps<SectionT: SectionBase<any>> = {
   removeClippedSubviews?: boolean,
 };
 
-export type Props<SectionT> = {
-  ...$Diff<
-    VirtualizedSectionListProps<SectionT>,
-    {
-      getItem: $PropertyType<VirtualizedSectionListProps<SectionT>, 'getItem'>,
-      getItemCount: $PropertyType<
-        VirtualizedSectionListProps<SectionT>,
-        'getItemCount',
-      >,
-      renderItem: $PropertyType<
-        VirtualizedSectionListProps<SectionT>,
-        'renderItem',
-      >,
-      keyExtractor: $PropertyType<
-        VirtualizedSectionListProps<SectionT>,
-        'keyExtractor',
-      >,
-      ...
-    },
+export type SectionListProps<ItemT, SectionT = DefaultSectionT> = {
+  ...Omit<
+    VirtualizedSectionListProps<ItemT, SectionT>,
+    'getItem' | 'getItemCount' | 'renderItem' | 'keyExtractor',
   >,
-  ...RequiredProps<SectionT>,
-  ...OptionalProps<SectionT>,
+  ...RequiredProps<ItemT, SectionT>,
+  ...OptionalProps<ItemT, SectionT>,
 };
 
 /**
@@ -174,9 +170,10 @@ export type Props<SectionT> = {
  *
  */
 export default class SectionList<
-  SectionT: SectionBase<any>,
-> extends React.PureComponent<Props<SectionT>, void> {
-  props: Props<SectionT>;
+  ItemT = any,
+  SectionT = DefaultSectionT,
+> extends React.PureComponent<SectionListProps<ItemT, SectionT>> {
+  props: SectionListProps<ItemT, SectionT>;
 
   /**
    * Scrolls to the item at the specified `sectionIndex` and `itemIndex` (within the section)