sophister / react-native-pull-to-refresh-custom

Custom pull to refresh Header supporting for React Native ScrollView/FlatList
97 stars 23 forks source link

fix max header height #23

Open ahmedmuhammedpro opened 2 years ago

ahmedmuhammedpro commented 2 years ago

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-pull-to-refresh-custom@1.0.3 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-pull-to-refresh-custom/lib/PullToRefresh.d.ts b/node_modules/react-native-pull-to-refresh-custom/lib/PullToRefresh.d.ts
index 6990cbb..c003cda 100644
--- a/node_modules/react-native-pull-to-refresh-custom/lib/PullToRefresh.d.ts
+++ b/node_modules/react-native-pull-to-refresh-custom/lib/PullToRefresh.d.ts
@@ -13,6 +13,7 @@ export interface Props {
     style: ViewStyle;
     HeaderComponent: ComponentType<PullToRefreshHeaderProps & RefAttributes<any>>;
     headerHeight: number;
+    maxScrollHeight: number;
     refreshTriggerHeight?: number;
     refreshingHoldHeight?: number;
     refreshing: boolean;
diff --git a/node_modules/react-native-pull-to-refresh-custom/src/PullToRefresh.tsx b/node_modules/react-native-pull-to-refresh-custom/src/PullToRefresh.tsx
index 7419a56..c25f2b6 100644
--- a/node_modules/react-native-pull-to-refresh-custom/src/PullToRefresh.tsx
+++ b/node_modules/react-native-pull-to-refresh-custom/src/PullToRefresh.tsx
@@ -45,6 +45,7 @@ export interface Props {
     children: JSX.Element;
     // 内部滚动组件,contentOffset.y <= topPullThreshold 时,触发顶部的下拉刷新动作
     topPullThreshold: number;
+    maxScrollHeight: number;
 }

 interface State {
@@ -118,7 +119,7 @@ export default class PullToRefresh extends Component<Props, State> {
                 // Returns whether this component should block native components from becoming the JS
                 // responder. Returns true by default. Is currently only supported on android.
                 return true;
-              },
+            },
         });
     }

@@ -164,26 +165,31 @@ export default class PullToRefresh extends Component<Props, State> {
     }

     onPanResponderMove(event: GestureResponderEvent, gestureState: PanResponderGestureState) {
-        if (gestureState.dy >= 0) {
-            // const dy = Math.max(0, gestureState.dy);
-            this.state.containerTop.setValue(gestureState.dy);
-        } else {
-            this.state.containerTop.setValue(0);
-            if (this.scrollRef) {
-                if (typeof this.scrollRef.scrollToOffset === 'function') {
-                    // inner is FlatList
-                    this.scrollRef.scrollToOffset({
-                        offset: -gestureState.dy,
-                        animated: true,
-                    });
-                } else if(typeof this.scrollRef.scrollTo === 'function') {
-                    // inner is ScrollView
-                    this.scrollRef.scrollTo({
-                        y: -gestureState.dy,
-                        animated: true,
-                    });
+        console.log(this.props.maxScrollHeight);
+        if (gestureState.dy < this.props.maxScrollHeight) {
+            if (gestureState.dy >= 0) {
+                // const dy = Math.max(0, gestureState.dy);
+                this.state.containerTop.setValue(gestureState.dy > this.props.headerHeight ? this.props.headerHeight : gestureState.dy);
+            } else {
+                this.state.containerTop.setValue(0);
+                if (this.scrollRef) {
+                    if (typeof this.scrollRef.scrollToOffset === 'function') {
+                        // inner is FlatList
+                        this.scrollRef.scrollToOffset({
+                            offset: -gestureState.dy,
+                            animated: true,
+                        });
+                    } else if (typeof this.scrollRef.scrollTo === 'function') {
+                        // inner is ScrollView
+                        this.scrollRef.scrollTo({
+                            y: -gestureState.dy,
+                            animated: true,
+                        });
+                    }
                 }
             }
+        } else {
+            this.state.containerTop.setValue(this.props.maxScrollHeight);
         }
     }

This issue body was partially generated by patch-package.