@appandflow/touchable - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

LICENSE.md

@@ -0,0 +0,0 @@ MIT License

package.json

 {
   "name": "@appandflow/touchable",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "main": "./src/Touchable.js",
@@ -5,0 +5,0 @@ "private": false,

README.md

@@ -5,7 +5,7 @@ # @appandflow/touchable
 
-An helper to react-native touchable element. Work with all the feedback provided by react-native and add the ripple effect for android by default.
+A wrapper for react-native `Touchable` components to simplify the API and make the Android ripple effect work by default.
 
 ## Why use this library?
 
-Let you import only one component and don't care about the platform. Also get native feedback by default for android. Don't worry you can disabled this effect by passing `native={false}`
+It lets you import only component and forget about which platform you are using, it will default to the best behavior for the platform.
 
@@ -20,4 +20,2 @@ ## Installation
 
-Touchable become like a view and have access to all his props.
-
 ## Props
@@ -33,7 +31,7 @@
 
-You can disabled the touch by passing disabled true. Default false.
+You can disable the touch by passing disabled `true`. Default `false`.
 
 ### native [Android only]
 
-For don't get the native effect just pass native false. By default this is true.
+Toggle whether or not to use the ripple effects on Android. By default this is true on Android.
 
@@ -40,0 +38,0 @@ **If false don't forget to add a feedback**

src/__tests__/Touchable-tests.js

@@ -0,0 +0,0 @@ // @flow

src/Touchable.js

@@ -11,4 +11,48 @@ // @flow
   View,
+  StyleSheet,
 } from 'react-native';
 
+// Touchable highlight is tricky and certain style props must be included
+// either on the Touchable component or the inner container view. Some must also
+// be included on both.
+const OUTER_VIEW_KEYS = new Set([
+  'margin',
+  'marginHorizontal',
+  'marginVertical',
+  'marginLeft',
+  'marginRight',
+  'marginTop',
+  'marginBottom',
+]);
+const BOTH_VIEW_KEYS = new Set([
+  'borderRadius',
+  'borderTopLeftRadius',
+  'borderTopRightRadius',
+  'borderBottomLeftRadius',
+  'borderBottomRightRadius',
+]);
+
+function separateStyle(style) {
+  if (!style) {
+    return { inner: style, outer: null };
+  }
+
+  const resolvedStyle = StyleSheet.flatten(style);
+  const inner = {};
+  const outer = {};
+
+  Object.keys(resolvedStyle).forEach(key => {
+    if (BOTH_VIEW_KEYS.has(key)) {
+      outer[key] = resolvedStyle[key];
+      inner[key] = resolvedStyle[key];
+    } else if (OUTER_VIEW_KEYS.has(key)) {
+      outer[key] = resolvedStyle[key];
+    } else {
+      inner[key] = resolvedStyle[key];
+    }
+  });
+
+  return { inner, outer };
+}
+
 type Props = {
@@ -20,5 +64,13 @@ feedback: 'opacity' | 'highlight' | 'none',
   disabled?: boolean,
+  hitSlop?: { top?: number, bottom?: number, left?: number, right?: number },
+  tintColor?: string,
 };
 
 export default class Touchable extends Component {
+  static defaultProps = {
+    native: true,
+    overflow: false,
+    disabled: false,
+  };
+
   props: Props;
@@ -28,6 +80,8 @@ render() {
       feedback,
-      native = true,
-      overflow = false,
+      native,
+      overflow,
       onPress,
       disabled,
+      hitSlop,
+      tintColor,
       ...others
@@ -41,4 +95,5 @@ } = this.props;
         <TouchableNativeFeedback
-          background={TouchableNativeFeedback.Ripple(undefined, overflow)}
+          background={TouchableNativeFeedback.Ripple(tintColor, overflow)}
           disabled={disabled}
+          hitSlop={hitSlop}
           onPress={onPress}
@@ -51,6 +106,12 @@ >
       return (
-        <TouchableOpacity {...others} onPress={onPress} disabled={disabled} />
+        <TouchableOpacity
+          {...others}
+          onPress={onPress}
+          disabled={disabled}
+          hitSlop={hitSlop}
+        />
       );
     } else if (feedback === 'highlight') {
       const { style, children, ...othersWithoutStyle } = others;
+      const { inner, outer } = separateStyle(style);
       return (
@@ -60,5 +121,7 @@ <TouchableHighlight
           disabled={disabled}
+          hitSlop={hitSlop}
           {...othersWithoutStyle}
+          style={outer}
         >
-          <View style={style}>{children}</View>
+          <View style={inner}>{children}</View>
         </TouchableHighlight>
@@ -68,3 +131,7 @@ );
       return (
-        <TouchableWithoutFeedback disabled={disabled} onPress={onPress}>
+        <TouchableWithoutFeedback
+          disabled={disabled}
+          hitSlop={hitSlop}
+          onPress={onPress}
+        >
           <View {...others} />
@@ -71,0 +138,0 @@ </TouchableWithoutFeedback>

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17058

increased by7.15%

Lines of code

180

increased by51.26%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

81

decreased by-2.41%

No dependency changes