@appandflow/touchable - npm Package Compare versions

Comparing version 0.0.1 to 1.0.0

package.json

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

README.md

@@ -0,1 +1,9 @@
+# @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.
+
+## 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}`
+
 ## Installation
@@ -5,2 +13,57 @@
 
-## Usage
+## Usage
+
+`import Touchable from '@appandflow/touchable';`
+
+Touchable become like a view and have access to all his props.
+
+## Props
+
+### feedback
+
+- opacity
+- highlight
+- none
+
+### disabled
+
+You can disabled 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.
+
+**If pass false don't forget to pass a feedback**
+
+## Example
+
+Play with on [Expo](https://exp.host/@equimper/example)
+
+Take a look at example folder also. [Link](https://github.com/AppAndFlow/react-native-touchable/blob/master/example)
+
+```js
+import React, { Component } from 'react';
+import { Text, View, Alert } from 'react-native';
+import Touchable from '@appandflow/touchable';
+
+class App extends Component {
+  _handleAlert = feedback => {
+    Alert.alert(`You touch the feedback: ${feedback}`)
+  }
+  render() {
+    return (
+      <View style={styles.container}>
+        <Touchable feedback="opacity" style={[styles.button, styles.opacity]} onPress={() => this._handleAlert('opacity')}>
+          <Text style={styles.buttonText}>OPACITY</Text>
+        </Touchable>
+        <Touchable feedback="highlight" style={[styles.button, styles.highlight]} onPress={() => this._handleAlert('highlight')}>
+          <Text style={styles.buttonText}>HIGHLIGHT</Text>
+        </Touchable>
+        <Touchable feedback="none" style={[styles.button, styles.none]} onPress={() => this._handleAlert('none')}>
+          <Text style={styles.buttonText}>NONE</Text>
+        </Touchable>
+      </View>
+    );
+  }
+}
+```

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5692

increased by52.07%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

68

increased by1260%

No dependency changes