rn-swipe-button - npm Package Compare versions

Comparing version 1.0.9 to 1.1.0

package.json

 {
   "name": "rn-swipe-button",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "react native swipe/slide button component",
@@ -27,2 +27,6 @@ "main": "index.js",
     "rn-slide-button",
+    "right-to-left-swipe-button",
+    "right-to-left-slide-button",
+    "swipe-right-to-left",
+    "swipe-left-to-right",
     "slide"
@@ -29,0 +33,0 @@ ],

README.md

@@ -25,2 +25,3 @@ <h2 style="color:darkgreen;">React Native Swipe Button Component</h2>
     <b>disabledThumbIconBorderColor</b>: PropTypes.string,
+    <b>enableRightToLeftSwipe</b>: PropTypes.bool,
     <b>height</b>: PropTypes.number,
@@ -50,3 +51,3 @@ <b>onSwipeSuccess</b>: PropTypes.func,
 import React, {Fragment} from 'react';
-import {Text, ToastAndroid} from 'react-native';
+import {View, ScrollView, Text, ToastAndroid} from 'react-native';
 import thumbIcon from './assets/thumbIcon.png';
@@ -59,2 +60,3 @@ import Icon from 'react-native-vector-icons/FontAwesome';
   const TwitterIcon = () => <Icon name="twitter" color="#3b5998" size={30} />;
+  const facebookIcon = () => <Icon name="facebook" color="#3b5998" size={30} />;
   return (
@@ -85,2 +87,18 @@ <View style={{padding: 15}}>
       <SwipeButton disabled={true} />
+      <Text style={{color: '#140866', fontSize: 20}}>
+        Enable right to left swipe
+      </Text>
+      <SwipeButton
+        enableRightToLeftSwipe
+        thumbIconBackgroundColor="#FFFFFF"
+        thumbIconComponent={facebookIcon}
+        title="Slide to unlock"
+        onSwipeSuccess={() => {
+          ToastAndroid.showWithGravity(
+            'Slide success!',
+            ToastAndroid.SHORT,
+            ToastAndroid.CENTER,
+          );
+        }}
+      />
       <Text style={{color: '#140866', fontSize: 20}}>Set height</Text>
@@ -98,2 +116,3 @@ <SwipeButton height={25} />
       />
+      <View style={{width: 200, height: 300}} />
     </View>
@@ -100,0 +119,0 @@ );

src/components/SwipeButton/index.js

@@ -89,2 +89,3 @@ import React from 'react';
       disabledThumbIconBorderColor,
+      enableRightToLeftSwipe,
       height,
@@ -139,2 +140,3 @@ onSwipeSuccess,
             disabledThumbIconBorderColor={disabledThumbIconBorderColor}
+            enableRightToLeftSwipe={enableRightToLeftSwipe}
             iconSize={height}
@@ -183,2 +185,3 @@ layoutWidth={this.state.layoutWidth}
   disabledThumbIconBorderColor: PropTypes.string,
+  enableRightToLeftSwipe: PropTypes.bool,
   height: PropTypes.number,
@@ -185,0 +188,0 @@ onSwipeSuccess: PropTypes.func,

src/components/SwipeThumb/index.js

@@ -71,3 +71,5 @@ import React from 'react';
     }
-    if (this.props.onSwipeSuccess) {this.props.onSwipeSuccess();}
+    if (this.props.onSwipeSuccess) {
+      this.props.onSwipeSuccess();
+    }
     this.reset();
@@ -77,4 +79,8 @@ }
   onPanResponderMove(event, gestureState) {
-    if (this.props.disabled) {return;}
-    const newWidth = this.defaultContainerWidth + gestureState.dx;
+    if (this.props.disabled) {
+      return;
+    }
+    const rtlMultiplier = this.props.enableRightToLeftSwipe ? -1 : 1;
+    const newWidth =
+      this.defaultContainerWidth + rtlMultiplier * gestureState.dx;
     if (newWidth < this.defaultContainerWidth) {
@@ -94,4 +100,8 @@ // Reached starting position
   onPanResponderRelease(event, gestureState) {
-    if (this.props.disabled) {return;}
-    const newWidth = this.defaultContainerWidth + gestureState.dx;
+    if (this.props.disabled) {
+      return;
+    }
+    const rtlMultiplier = this.props.enableRightToLeftSwipe ? -1 : 1;
+    const newWidth =
+      this.defaultContainerWidth + rtlMultiplier * gestureState.dx;
     const successThresholdWidth =
@@ -123,3 +133,5 @@ this.maxWidth * (this.props.swipeSuccessThreshold / 100);
     }).start(() => {
-      if (this.props.onSwipeSuccess) {this.props.onSwipeSuccess();}
+      if (this.props.onSwipeSuccess) {
+        this.props.onSwipeSuccess();
+      }
       // this.reset(); // Enable this line to reset the thumb after successful swipe
@@ -177,3 +189,9 @@ });
   render() {
-    const {disabled, title, onSwipeSuccess, screenReaderEnabled} = this.props;
+    const {
+      disabled,
+      title,
+      onSwipeSuccess,
+      screenReaderEnabled,
+      enableRightToLeftSwipe,
+    } = this.props;
     const panStyle = {
@@ -183,3 +201,3 @@ backgroundColor: this.state.backgroundColor,
       width: this.state.animatedWidth,
-      ...styles.container,
+      ...(enableRightToLeftSwipe ? styles.containerRTL : styles.container),
     };
@@ -219,2 +237,3 @@ if (screenReaderEnabled) {
   disabledThumbIconBorderColor: PropTypes.string,
+  enableRightToLeftSwipe: PropTypes.bool,
   iconSize: PropTypes.number,
@@ -221,0 +240,0 @@ layoutWidth: PropTypes.number,

src/components/SwipeThumb/styles.js

@@ -9,2 +9,3 @@ import {StyleSheet} from 'react-native';
     alignItems: 'flex-end',
+    alignSelf: 'flex-start',
     borderRadius: maxContainerHeight / 2,
@@ -15,2 +16,10 @@ borderRightWidth: 0,
   },
+  containerRTL: {
+    alignItems: 'flex-start',
+    alignSelf: 'flex-end',
+    borderRadius: maxContainerHeight / 2,
+    borderLeftWidth: 0,
+    borderWidth,
+    margin,
+  },
   icon: {
@@ -17,0 +26,0 @@ alignItems: 'center',

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

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

23615

increased by6.86%

Lines of code

491

increased by6.74%

Number of lines in readme file

117

increased by19.39%

No dependency changes