feat: custom scroll view component

marcocesarato · Jan 15, 2022 · 0c7f425 · 0c7f425
1 parent 4f3c3cb
commit 0c7f425
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 2 deletions.
diff --git a/docs/docs/props.md b/docs/docs/props.md
@@ -61,7 +61,13 @@ Removes the wrapping view component that is added by BigList.
 Using `controlItemRender` will add more arguments to `renderItem`.
 
 ```ts
-renderItem({ item: unknown, index: number, section: number, key: string, style: object });
+renderItem({
+  item: unknown,
+  index: number,
+  section: number,
+  key: string,
+  style: object,
+});
 ```
 
 :::note
@@ -213,6 +219,14 @@ Wrap the entire list into an accessory component.
 | -------- | -------- |
 | function | No       |
 
+### `ScrollViewComponent`
+
+Custom component to use instead of react-native's `ScrollView` (e.g. `ScrollView` from `react-native-gesture-handler`)
+
+| Type      | Required | Default                     |
+| --------- | -------- | --------------------------- |
+| component | No       | react-native's `ScrollView` |
+
 ### `renderAccessory`
 
 ```ts

diff --git a/lib/BigList.jsx b/lib/BigList.jsx
@@ -953,6 +953,7 @@ class BigList extends PureComponent {
       hideMarginalsOnEmpty,
       hideFooterOnEmpty,
       hideHeaderOnEmpty,
+      ScrollViewComponent,
       ...props
     } = this.props;
 
@@ -1006,7 +1007,9 @@ class BigList extends PureComponent {
     );
 
     const scrollView = wrapper(
-      <ScrollView {...scrollViewProps}>{this.renderItems()}</ScrollView>,
+      <ScrollViewComponent {...scrollViewProps}>
+        {this.renderItems()}
+      </ScrollViewComponent>,
     );
 
     const scrollStyle = mergeViewStyle(
@@ -1125,6 +1128,7 @@ BigList.propTypes = {
   ]),
   sections: PropTypes.array,
   stickySectionHeadersEnabled: PropTypes.bool,
+  ScrollViewComponent: PropTypes.func,
 };
 
 BigList.defaultProps = {
@@ -1168,6 +1172,7 @@ BigList.defaultProps = {
   insetBottom: 0,
   contentInset: { top: 0, right: 0, left: 0, bottom: 0 },
   onEndReachedThreshold: 0,
+  ScrollViewComponent: ScrollView,
 };
 
 export default BigList;
diff --git a/lib/index.d.ts b/lib/index.d.ts
@@ -77,6 +77,7 @@ interface BigListProps<ItemT>
   sections?: ItemT[][] | null | undefined;
   stickySectionHeadersEnabled?: boolean;
   children?: null | undefined;
+  ScrollViewComponent?: React.ComponentType<ScrollViewProps>;
 }
 export default class BigList<ItemT = any> extends PureComponent<
   BigListProps<ItemT>