Allow providing an external scrollview.

CHANGELOG.md

@@ -10,6 +10,7 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 ## [1.0.4] - 2022-07-02
 
 - Build fix for Android projects having `kotlinVersion` defined in `build.gradle`.
+- Allow providing an external scrollview.
 
 ## [1.0.3] - 2022-07-01
 

documentation/docs/fundamentals/usage.md

@@ -96,6 +96,14 @@ estimatedItemSize?: number;
 
 ---
 
+### `renderScrollComponent`
+
+Rendered as the main scrollview. Its contract for the scroll event should match the native scroll event contract, i.e. `scrollEvent = { nativeEvent: { contentOffset: { x: offset, y: offset } } }`
+
+```ts
+return <FlashList renderScrollComponent={Animated.ScrollView} />;
+```
+
 ### `CellRendererComponent`
 
 Each cell is rendered using this element. Can be a React Component Class, or a render function. The root component should always be a `CellContainer` which is also the default component used. Ensure that the original `props` are passed to the returned `CellContainer`. The `props` contain the following properties:

src/FlashList.tsx

@@ -276,6 +276,7 @@ class FlashList<T> extends React.PureComponent<
       initialScrollIndex,
       style,
       contentContainerStyle,
+      renderScrollComponent,
       ...restProps
     } = this.props;
 
@@ -350,6 +351,7 @@ class FlashList<T> extends React.PureComponent<
           windowCorrectionConfig={this.getUpdatedWindowCorrectionConfig()}
           itemAnimator={this.itemAnimator}
           suppressBoundedSizeException
+          externalScrollView={renderScrollComponent as any}
         />
       </StickyHeaderContainer>
     );

src/FlashListProps.ts

@@ -1,3 +1,4 @@
+import type React from "react";
 import {
   StyleProp,
   ScrollViewProps,
@@ -6,6 +7,7 @@ import {
   ViewStyle,
   ColorValue,
 } from "react-native";
+import type { ScrollViewDefaultProps } from "recyclerlistview/dist/reactnative/core/scrollcomponent/BaseScrollView";
 
 import { BlankAreaEventHandler } from "./native/auto-layout/AutoLayoutView";
 import ViewToken from "./viewability/ViewToken";
@@ -122,6 +124,14 @@ export interface FlashListProps<TItem> extends ScrollViewProps {
    */
   ListHeaderComponentStyle?: StyleProp<ViewStyle> | undefined;
 
+  /**
+   * Rendered as the main scrollview. Its contract for the scroll event should match the native scroll event contract, i.e.
+   * `scrollEvent = { nativeEvent: { contentOffset: { x: offset, y: offset } } }`
+   */
+  renderScrollComponent?:
+    | React.ComponentType<ScrollViewDefaultProps>
+    | React.FC<ScrollViewDefaultProps>;
+
   /**
    * You can use `contentContainerStyle` to apply padding that will be applied to the whole content itself.
    * For example, you can apply this padding, so that all of your items have leading and trailing space.