https://github.com/appandflow/react-native-touchable

React-Native button helper library
https://github.com/appandflow/react-native-touchable

button react-native react-native-component

Last synced: 2 months ago
JSON representation

React-Native button helper library

• Host: GitHub
• URL: https://github.com/appandflow/react-native-touchable
• Owner: AppAndFlow
• License: mit
• Created: 2017-05-12T01:18:23.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-08-20T22:29:48.000Z (over 6 years ago)
• Last Synced: 2024-12-09T16:05:08.874Z (2 months ago)
• Topics: button, react-native, react-native-component
• Language: JavaScript
• Homepage:
• Size: 196 KB
• Stars: 46
• Watchers: 5
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

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. Based on [react-native-gesture-handler](https://github.com/kmagiera/react-native-gesture-handler).

## 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';`

If you are using things like `ScrollView` make sure to use the one included in react-native-gesture-handler for better interactions.

## Props

### feedback

* opacity

* highlight

* none

### disabled

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

### native [Android only]

TODO: This doesn't work anymore as of V2

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**

## History

### v2.0.0

* This version now uses [react-native-gesture-handler](https://github.com/kmagiera/react-native-gesture-handler). If you are using Expo it is included by default, otherwise you will need to install it. For a version that uses RN primitives use @^1.0.0.

* native={false} is not currently implemented.

* onLongPress is no longer supported, use LongPressGestureHandler from react-native-gesture-handler instead.

## Example

Take a look at example folder. [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 (

      

         this._handleAlert('opacity')}

        >

          OPACITY

        

         this._handleAlert('highlight')}

        >

          HIGHLIGHT

        

         this._handleAlert('none')}

        >

          NONE

        

      

    );

  }

}

```