Skip to content
A wrapper around the various Touchable* components built into React Native core with platform defaults
JavaScript
Branch: master
Clone or download
Latest commit 35f75f8 Mar 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.eslintrc 1.1.0 Jul 1, 2017
.gitignore 1.1.0 Jul 1, 2017
LICENSE Add license Jul 1, 2017
PlatformTouchable.js 1.1.0 Jul 1, 2017
README.md Merge pull request #5 from bramus/patch-1 Mar 20, 2019
example.js Add example.js Jul 18, 2017
package.json Add license Jul 1, 2017
yarn.lock 1.1.0 Jul 1, 2017

README.md

<Touchable>

A wrapper around the various Touchable* components built into React Native core in order to use TouchableNativeFeedback whenever possible, provide an easier interface to using it, and flatten out API differences between the Touchable components.

  • iOS: Defaults to TouchableOpacity with default activeOpacity.

  • Android: Defaults to TouchableNativeFeedback with background from Android app style, unless Android API <= 20 / Android < 5.0, then defaults to TouchableOpacity.

  • Touchable requires exactly one child, for example:

    // Good
    <Touchable>
      <Child>
        <GrandChild />
        <GrandChild />
      </Child>
    </Touchable>
    
    // Bad
    <Touchable>
      <Child />
      <Child />
    </Touchable>

Usage

npm i react-native-platform-touchable --save

 # or

yarn add react-native-platform-touchable
import React from 'react';
import { Text, View } from 'react-native';
import Touchable from 'react-native-platform-touchable';

export default class App extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Touchable
          onPress={() => console.log('hello!')}
          style={{
            backgroundColor: '#eee',
            paddingVertical: 30,
            paddingHorizontal: 80,
          }}
          background={Touchable.Ripple('blue')}>
          <Text>Hello there!</Text>
        </Touchable>
      </View>
    );
  }
}

Statics

  • Touchable.SelectableBackground() - creates an object that represents android theme's default background for selectable elements
  • Touchable.SelectableBackgroundBorderless() - creates an object that represent android theme's default background for borderless selectable elements.
  • Touchable.Ripple(color: string, borderless: boolean) - creates an object that represents ripple drawable with specified color (as a string). If property borderless evaluates to true the ripple will render outside of the view bounds.

props

You can use the same props as you would use on TouchableOpacity, TouchableHighlight, TouchableNativeFeedback, and TouchableWithoutFeedback. Listed below.

  • fallback - If TouchableNativeFeedback is not available (on iOS and on Android API <= 20 / Android < 5.0), the component specified in this prop is used instead. Defaults to TouchableOpacity.

  • hitSlop - use this! pass in an object of the format { top: number, left: number, right: number, bottom: number }, this makes the Touchable easier to press by expanding the touchable area by the number of points that you specify on each side, without having to change the layout of the Touchable, eg: by adding padding.

  • onPress - fired when you press (touch in, release within bounds).

  • onPressIn - fired immediately on press in (like onmousedown on web)

  • onPressOut - fired immediately on press out (like onmouseout on web)

  • onLongPress - fired when you press and hold.

  • delayLongPress - time to wait for onLongPress to fire.

  • delayPressIn - time to wait for onPressIn to fire

  • delayPressOut - time to wait for onPressOut to fire

  • disabled - default false, when true the button is disabled.

  • onLayout - see onLayout documentation on View

  • accessibilityComponentType - see Accessibility guide

  • accessibilityTraits - see Accessibility guide

  • pressRetentionOffset - see React Native documentation.

Additional props used by TouchableOpacity (default iOS)

  • activeOpacity - sets the opacity to animate to when touch is active.

Additional props used by TouchableNativeFeedback (default Android)

  • background - customize the touch effect with Touchable.SelectableBackground, Touchable.SelectableBackgroundBorderless, or Touchable.Ripple(color: string, borderless: boolean).
  • foreground - same as background, should be used instead of background if the Touchable has any images as children and you want the ripple to be rendered above the image (if the image is not opaque, background will not be visible, you must use foreground)

Additional props used by TouchableHighlight

  • underlayColor - the color of the background when touch is active.
  • onHideUnderlay - fired immediately after the underlay is hidden
  • onShowUnderlay - fired immediately after the underlay is shown

Rounded corners on Touchables with TouchableNativeFeedback behavior

You can’t perform that action at this time.