rn-viewpager - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

package.json

 {
   "name": "rn-viewpager",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "ViewPager component for react-native, same api on both android and ios.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -137,5 +137,2 @@ # React-Native-ViewPager
 }
-```
-
-## Known issue
-- onPageScrollStateChanged prop not support on iOS ):
+```

viewpager/IndicatorViewPager.js

@@ -61,5 +61,9 @@ /**
 
-    setPage(index) {
-        this.refs[VIEWPAGER_REF].setPage(index);
+    setPage(selectedPage) {
+        this.refs[VIEWPAGER_REF].setPage(selectedPage);
     }
+
+    setPageWithoutAnimation(selectedPage) {
+        this.refs[VIEWPAGER_REF].setPageWithoutAnimation(selectedPage);
+    }
 }
@@ -66,0 +70,0 @@ const styles = StyleSheet.create({

viewpager/ViewPager.js

@@ -8,3 +8,3 @@ /**
 import React, {Component} from 'react';
-import {StyleSheet, View, ViewPagerAndroid, ScrollView, Platform} from 'react-native';
+import {StyleSheet, View, ViewPagerAndroid, ScrollView, Platform, PanResponder} from 'react-native';
 
@@ -14,6 +14,10 @@ const SCROLLVIEW_REF = 'scrollView';
 
+const SCROLL_STATE = {
+    idle: 'idle',
+    settling: 'settling',
+    dragging: 'dragging'
+};
 export default class ViewPager extends Component {
-    static propTypes = {
-        ...ViewPagerAndroid.propTypes
-    };
+    static propTypes = {...ViewPagerAndroid.propTypes};
+
     static defaultProps = {
@@ -24,6 +28,7 @@ initialPage: 0,
         onPageSelected: null,
+        onPageScrollStateChanged: null,
         /**
          * iOS not support yet
          */
-        onPageScrollStateChanged: null,
+        pageMargin: 0
     };
@@ -33,2 +38,14 @@
 
+    _scrollState = SCROLL_STATE.idle;
+
+    _panResponder = PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderGrant: () => this._setScrollState(SCROLL_STATE.dragging),
+        onPanResponderMove: () => null,
+        onPanResponderRelease: () => this._setScrollState(SCROLL_STATE.settling),
+        onPanResponderTerminate: () => null,
+        onPanResponderTerminationRequest: (evt, gestureState) => true,
+    });
+
     render() {
@@ -56,2 +73,4 @@ return Platform.OS === 'ios' ? this._renderOnIOS() : (
         let initialPage = Math.min(Math.max(0, this.props.initialPage), childrenCount - 1);
+        let needMonitorScroll = !!this.props.onPageScroll || !!this.props.onPageSelected || !!this.props.onPageScrollStateChanged;
+        let needMonitorTouch = !!this.props.onPageScrollStateChanged;
         let props = {
@@ -63,2 +82,3 @@ ...this.props,
             pagingEnabled: true,
+            scrollsToTop: false,
             showsHorizontalScrollIndicator: false,
@@ -69,7 +89,8 @@ showsVerticalScrollIndicator: false,
             decelerationRate: 0.9,
-
-            onScroll: !this.props.onPageScroll && !this.props.onPageSelected ? null : this._onScrollOnIOS.bind(this),
-            scrollEventThrottle: !this.props.onPageScroll && !this.props.onPageSelected ? 0 : ( this.props.onPageScroll ? 8 : 1)
+            onScroll: needMonitorScroll ? this._onScrollOnIOS.bind(this) : null,
+            scrollEventThrottle: needMonitorScroll ? ( this.props.onPageScroll ? 8 : 1) : 0,
         };
-        if (this.props.style && !this.props.style.height) return (<ScrollView {...props}/>);
+        if (needMonitorTouch) props = Object.assign(props, this._panResponder.panHandlers);
+        if (this.props.style && !this.props.style.height)
+            return <ScrollView {...props}/>;
         else return (
@@ -79,9 +100,6 @@ <View style={this.props.style}>
             </View>
-        )
-
+        );
     }
 
     _onScrollOnIOS(e) {
-        if (!this.props.onPageScroll && !this.props.onPageSelected)return;
-
         let {x} = e.nativeEvent.contentOffset, offset, position = Math.floor(x / this.state.width);
@@ -92,3 +110,6 @@ offset = x / this.state.width - position;
 
-        if (this.props.onPageSelected && offset === 0) this.props.onPageSelected({position});
+        if (this.props.onPageSelected && offset === 0) {
+            this.props.onPageSelected({position});
+            this.props.onPageScrollStateChanged && this._setScrollState(SCROLL_STATE.idle);
+        }
     }
@@ -124,14 +145,25 @@
 
-    setPageWithoutAnimation(index) {
-        this.refs[SCROLLVIEW_REF].scrollTo({x: this.state.width * index, animated: false});
+    _setScrollState(scrollState) {
+        if (scrollState === this._scrollState) return;
+        this.props.onPageScrollStateChanged && this.props.onPageScrollStateChanged(scrollState);
+        this._scrollState = scrollState;
     }
 
-    setPage(index) {
+    setPageWithoutAnimation(selectedPage) {
         if (Platform.OS === 'ios')
-            this.refs[SCROLLVIEW_REF].scrollTo({x: this.state.width * index});
+            this.refs[SCROLLVIEW_REF].scrollTo({x: this.state.width * selectedPage, animated: false});
         else {
-            this.refs[VIEWPAGER_REF].setPage(index);
-            if (this.props.onPageSelected) this.props.onPageSelected({position: index});
+            this.refs[VIEWPAGER_REF].setPageWithoutAnimation(selectedPage);
+            if (this.props.onPageSelected) this.props.onPageSelected({position: selectedPage});
         }
     }
+
+    setPage(selectedPage) {
+        if (Platform.OS === 'ios')
+            this.refs[SCROLLVIEW_REF].scrollTo({x: this.state.width * selectedPage});
+        else {
+            this.refs[VIEWPAGER_REF].setPage(selectedPage);
+            if (this.props.onPageSelected) this.props.onPageSelected({position: selectedPage});
+        }
+    }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 2 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1282048

increased by997.39%

Number of package files

22

increased by22.22%

Lines of code

478

increased by7.66%

Worsened metrics

Number of lines in readme file

137

decreased by-2.14%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes