# @appandflow/touchable

> [![npm (scoped)](https://img.shields.io/npm/v/@appandflow/touchable.svg)](https://www.npmjs.com/package/@appandflow/touchable) [![Travis branch](https://img.shields.io/travis/AppAndFlow/react-native-touchable/master.svg)](https://travis-ci.org/AppAndFlow/

Latest version **2.0.0** (published 2018-03-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @appandflow/touchable
pnpm add @appandflow/touchable
yarn add @appandflow/touchable
bun add @appandflow/touchable
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2018-03-19 |
| First published | 2017-05-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 45 |
| Author | AppAndFlow |
| Maintainers | appandflow-user, equimper, janicduplessis |
| Keywords | react-native, appandflow, button, touchable |

## Links

- npm: https://www.npmjs.com/package/@appandflow/touchable
- Repository: https://github.com/AppAndFlow/react-native-touchable
- Homepage: https://github.com/AppAndFlow/react-native-touchable#readme
- Issues: https://github.com/AppAndFlow/react-native-touchable.git/issues
- npm.io page: https://npm.io/package/@appandflow/touchable

## Recent versions

- 2.0.0 (latest) — 2018-03-19
- 1.2.2 — 2017-09-19
- 1.2.1 — 2017-08-23
- 1.2.0 — 2017-08-23
- 1.1.1 — 2017-07-03
- 1.1.0 — 2017-07-03
- 1.0.1 — 2017-06-11
- 1.0.0 — 2017-05-12
- 0.0.1 — 2017-05-12

## README

# @appandflow/touchable

[![npm (scoped)](https://img.shields.io/npm/v/@appandflow/touchable.svg)](https://www.npmjs.com/package/@appandflow/touchable) [![Travis branch](https://img.shields.io/travis/AppAndFlow/react-native-touchable/master.svg)](https://travis-ci.org/AppAndFlow/react-native-touchable)

A wrapper for react-native `Touchable` components to simplify the API and make the Android ripple effect work by default.

## Why use this library?

It lets you import only component and forget about which platform you are using, it will default to the best behavior for the platform.

## Installation

`yarn add @appandflow/touchable`

## Usage

`import Touchable from '@appandflow/touchable';`

## Props

### feedback

- opacity
- highlight
- none

### disabled

You can disable the touch by passing disabled `true`. Default `false`.

### native [Android only]

Toggle whether or not to use the ripple effects on Android. By default this is true on Android.

**If false don't forget to add 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>
    );
  }
}
```

---
_Source: https://npm.io/package/@appandflow/touchable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._