overlay labels style

Author: alexbrillant

Diff for: README.md

@@ -96,35 +96,104 @@ npm install react-native-deck-swiper --save
 ### Swipe overlay labels
 | Props    | type   | description                                                                                             | default                          |
 |:----------|:--------|:---------------------------------------------------------------------------------------------------------|:----------------------------------|
-| overlayLabels| object | swipe labels info | null, see below for format |
+| overlayLabels| object | swipe labels title and style | null, see below for format |
+| overlayLabelStyle | object | swipe labels style | null, see below for format |
+| overlayLabelWrapperStyle | object   | overlay label wrapper style | see below for default | 
 
-Demo inside the [Exemples Folder](https://github.com/alexbrillant/react-native-deck-swiper/tree/master/Exemples)
+### overlayLabelStyle
+```javascript
+{
+  fontSize: 45,
+  fontWeight: 'bold',
+  borderRadius: 10,
+  padding: 10,
+  overflow: 'hidden'
+}
+```
+
+### overlayLabelWrapperStyle default props: 
+```javascript
+{
+  position: 'absolute',
+  backgroundColor: 'transparent',
+  zIndex: 2,
+  flex: 1,
+  width: '100%',
+  height: '100%'
+} 
+```
+
+### overlayLabels default props : 
 
 ```javascript
 {
   bottom: {
     title: 'BLEAH',
-    swipeColor: '#946C8C',
-    backgroundOpacity: '0.75',
-    fontColor: '#FFF'
+    style: {
+      label: {
+        backgroundColor: 'black',
+        borderColor: 'black',
+        color: 'white',
+        borderWidth: 1
+      },
+      wrapper: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    }
   },
   left: {
     title: 'NOPE',
-    swipeColor: '#4A2359',
-    backgroundOpacity: '0.75',
-    fontColor: '#FFF'
+    style: {
+      label: {
+        backgroundColor: 'black',
+        borderColor: 'black',
+        color: 'white',
+        borderWidth: 1
+      },
+      wrapper: {
+        flexDirection: 'column',
+        alignItems: 'flex-end',
+        justifyContent: 'flex-start',
+        marginTop: 30,
+        marginLeft: -30
+      }
+    }
   },
   right: {
     title: 'LIKE',
-    swipeColor: '#FA9F8C',
-    backgroundOpacity: '0.75',
-    fontColor: '#FFF'
+    style: {
+      label: {
+        backgroundColor: 'black',
+        borderColor: 'black',
+        color: 'white',
+        borderWidth: 1
+      },
+      wrapper: {
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        justifyContent: 'flex-start',
+        marginTop: 30,
+        marginLeft: 30
+      }
+    }
   },
   top: {
     title: 'SUPER LIKE',
-    swipeColor: '#FFC37B',
-    backgroundOpacity: '0.75',
-    fontColor: '#FFF'
+    style: {
+      label: {
+        backgroundColor: 'black',
+        borderColor: 'black',
+        color: 'white',
+        borderWidth: 1
+      },
+      wrapper: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    }
   }
 }
 ```

Diff for: Swiper.js

@@ -458,71 +458,22 @@ class Swiper extends React.Component {
   }
 
   calculateOverlayLabelStyle = () => {
-    let externalStyles = styles.overlayLabel
-    let dynamicStyles = {}
-    const labelProps = this.props.overlayLabels[this.state.labelType]
-
-    if (labelProps && this.state.labelType !== LABEL_TYPES.NONE) {
-      dynamicStyles = {
-        backgroundColor: this.hex2rgba(
-          labelProps.swipeColor,
-          labelProps.backgroundOpacity
-        ),
-        borderColor: labelProps.swipeColor,
-        color: labelProps.fontColor,
-        borderWidth: 1
-      }
-    } else {
-      externalStyles = styles.hideOverlayLabel
+    let overlayLabelStyle = this.props.overlayLabels[this.state.labelType].style.label
+
+    if (this.state.labelType === LABEL_TYPES.NONE) {
+      overlayLabelStyle = styles.hideOverlayLabel
     }
 
-    return [externalStyles, dynamicStyles]
+    return [this.props.overlayLabelStyle, overlayLabelStyle]
   }
 
   calculateOverlayLabelWrapperStyle = () => {
-    let dynamicStyles = {}
-    switch (this.state.labelType) {
-      case LABEL_TYPES.BOTTOM:
-        dynamicStyles = {
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center'
-        }
-        break
-
-      case LABEL_TYPES.LEFT:
-        dynamicStyles = {
-          flexDirection: 'column',
-          alignItems: 'flex-end',
-          justifyContent: 'flex-start',
-          marginTop: 30,
-          marginLeft: -30
-        }
-        break
-
-      case LABEL_TYPES.RIGHT:
-        dynamicStyles = {
-          flexDirection: 'column',
-          alignItems: 'flex-start',
-          justifyContent: 'flex-start',
-          marginTop: 30,
-          marginLeft: 30
-        }
-        break
-
-      case LABEL_TYPES.TOP:
-        dynamicStyles = {
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center'
-        }
-        break
-    }
+    let dynamicStyles = this.props.overlayLabels[this.state.labelType].style.wrapper
 
     const opacity = this.props.animateOverlayLabelsOpacity
       ? this.interpolateOverlayLabelsOpacity()
       : 1
-    return [styles.overlayLabelWrapper, dynamicStyles, { opacity }]
+    return [this.props.overlayLabelWrapperStyle, dynamicStyles, { opacity }]
   }
 
   calculateSwipableCardStyle = () => {
@@ -789,6 +740,8 @@ Swiper.propTypes = {
   outputRotationRange: PropTypes.array,
   outputCardOpacityRange: PropTypes.array,
   overlayLabels: PropTypes.object,
+  overlayLabelStyle: PropTypes.object,
+  overlayLabelWrapperStyle: PropTypes.object,
   previousCardInitialPositionX: PropTypes.number,
   previousCardInitialPositionY: PropTypes.number,
   renderCard: PropTypes.func.isRequired,
@@ -870,6 +823,8 @@ Swiper.defaultProps = {
   outputOverlayLabelsOpacityRangeY: [1, 0, 0, 0, 1],
   outputRotationRange: ['-10deg', '0deg', '10deg'],
   overlayLabels: null,
+  overlayLabelStyle: styles.overlayLabel,
+  overlayLabelWrapperStyle: styles.overlayLabelWrapper,
   previousCardInitialPositionX: 0,
   previousCardInitialPositionY: -height,
   secondCardZoom: 0.97,

Diff for: styles.js

@@ -37,6 +37,30 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     padding: 10,
     overflow: 'hidden'
+  },
+  bottomOverlayLabelWrapper: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  topOverlayLabelWrapper: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  rightOverlayLabelWrapper: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    marginTop: 30,
+    marginLeft: 30
+  },
+  leftOverlayLabelWrapper: {
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+    justifyContent: 'flex-start',
+    marginTop: 30,
+    marginLeft: -30
   }
 })