feat: add sticky section headers enabled prop

marcocesarato · Jun 9, 2021 · f392310 · f392310
1 parent eabc264
commit f392310
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 23 deletions.
diff --git a/docs/Props.md b/docs/Props.md
@@ -217,6 +217,14 @@ sectionFooterHeight(section: number)
 | ---------------- | -------- | ------- |
 | number, function | No       | `0`     |
 
+### `stickySectionHeadersEnabled`
+
+Makes section headers stick to the top of the screen until the next one pushes it off.
+
+| Type    | Required | Default |
+| ------- | -------- | ------- |
+| boolean | No       | `true`  |
+
 ### `scrollTopValue`
 
 Specify the initial scroll from the top of the list.

diff --git a/lib/BigList.jsx b/lib/BigList.jsx
@@ -598,16 +598,19 @@ class BigList extends PureComponent {
    * Component did mount.
    */
   componentDidMount() {
+    const { stickySectionHeadersEnabled } = this.props;
     const scrollView = this.getNativeScrollRef();
-    if (scrollView != null) {
-      if (Platform.OS !== "web") {
-        // Disabled on web
-        this.scrollTopValueAttachment = Animated.attachNativeEvent(
-          scrollView,
-          "onScroll",
-          [{ nativeEvent: { contentOffset: { y: this.scrollTopValue } } }],
-        );
-      }
+    if (
+      stickySectionHeadersEnabled &&
+      scrollView != null &&
+      Platform.OS !== "web"
+    ) {
+      // Disabled on web
+      this.scrollTopValueAttachment = Animated.attachNativeEvent(
+        scrollView,
+        "onScroll",
+        [{ nativeEvent: { contentOffset: { y: this.scrollTopValue } } }],
+      );
     }
   }
 
@@ -656,10 +659,21 @@ class BigList extends PureComponent {
       insetTop,
       insetBottom,
       actionSheetScrollRef,
+      stickySectionHeadersEnabled,
       ...props
     } = this.props;
 
     const wrapper = renderActionSheetScrollViewWrapper || ((val) => val);
+    const handleScroll =
+      stickySectionHeadersEnabled && Platform.OS === "web"
+        ? Animated.event(
+            [{ nativeEvent: { contentOffset: { y: this.scrollTopValue } } }],
+            {
+              listener: (event) => this.onScroll(event),
+              useNativeDriver: false,
+            },
+          )
+        : this.onScroll;
     const scrollViewProps = {
       ...props,
       ...{
@@ -669,20 +683,7 @@ class BigList extends PureComponent {
             actionSheetScrollRef.current = ref;
           }
         },
-        onScroll:
-          Platform.OS === "web"
-            ? Animated.event(
-                [
-                  {
-                    nativeEvent: { contentOffset: { y: this.scrollTopValue } },
-                  },
-                ],
-                {
-                  listener: (event) => this.onScroll(event),
-                  useNativeDriver: false,
-                },
-              )
-            : this.onScroll,
+        onScroll: handleScroll,
         onLayout: this.onLayout,
         onMomentumScrollEnd: this.onScrollEnd,
         onScrollEndDrag: this.onScrollEnd,
@@ -783,6 +784,7 @@ BigList.propTypes = {
     PropTypes.func,
   ]),
   sections: PropTypes.array,
+  stickySectionHeadersEnabled: PropTypes.bool,
 };
 
 BigList.defaultProps = {
@@ -802,6 +804,7 @@ BigList.defaultProps = {
   sectionHeight: 0,
   sectionFooterHeight: 0,
   // Scroll
+  stickySectionHeadersEnabled: true,
   removeClippedSubviews: false,
   scrollEventThrottle: Platform.OS === "web" ? 5 : 16,
   // Keyboard

diff --git a/lib/index.d.ts b/lib/index.d.ts
@@ -53,6 +53,7 @@ interface BigListProps<ItemT> extends ScrollViewProps {
   sectionFooterHeight?: string | number | ((section: number) => number);
   sectionHeight?: string | number | ((section: number) => number);
   sections?: ItemT[][];
+  stickySectionHeadersEnabled: boolean;
   children?: null | undefined;
 }
 export default class BigList<ItemT = any> extends PureComponent<