Allow providing an external scrollview. (#502)

* patch: allow providing external scrollview to recyclerlistview

* docs: added ExternalScrollViewComponent to docs

* docs: updated changelog

* refactor: updated the prop name to renderScrollComponent

* refactor: addressing the pr comments

Co-authored-by: Talha Naqvi <naqvitalha@gmail.com>

CHANGELOG.md

@@ -19,6 +19,8 @@ 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.
+  - https://github.com/Shopify/flash-list/pull/502
 
 ## [1.0.3] - 2022-07-01
 

documentation/docs/fundamentals/usage.md

@@ -453,6 +453,18 @@ refreshing?: boolean;
 
 Set this true while waiting for new data from a refresh.
 
+### `renderScrollComponent`
+
+```tsx
+import type { ScrollViewProps } from "react-native";
+
+renderScrollComponent?:
+    | React.ComponentType<ScrollViewProps>
+    | React.FC<ScrollViewProps>;
+```
+
+Rendered as the main scrollview.
+
 ### `viewabilityConfig`
 
 ```tsx

src/FlashList.tsx

@@ -281,6 +281,7 @@ class FlashList<T> extends React.PureComponent<
       initialScrollIndex,
       style,
       contentContainerStyle,
+      renderScrollComponent,
       ...restProps
     } = this.props;
 
@@ -355,6 +356,9 @@ class FlashList<T> extends React.PureComponent<
           windowCorrectionConfig={this.getUpdatedWindowCorrectionConfig()}
           itemAnimator={this.itemAnimator}
           suppressBoundedSizeException
+          externalScrollView={
+            renderScrollComponent as RecyclerListViewProps["externalScrollView"]
+          }
         />
       </StickyHeaderContainer>
     );

src/FlashListProps.ts

@@ -1,3 +1,4 @@
+import type React from "react";
 import {
   StyleProp,
   ScrollViewProps,
@@ -137,6 +138,13 @@ export interface FlashListProps<TItem> extends ScrollViewProps {
    */
   ListHeaderComponentStyle?: StyleProp<ViewStyle> | undefined;
 
+  /**
+   * Rendered as the main scrollview.
+   */
+  renderScrollComponent?:
+    | React.ComponentType<ScrollViewProps>
+    | React.FC<ScrollViewProps>;
+
   /**
    * 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.