react-native-platform-touchable

by react-native-community

react-native-community /react-native-platform-touchable

A wrapper around the various Touchable* components built into React Native core with platform defaul...

444 Stars 32 Forks Last release: Not found BSD 3-Clause "New" or "Revised" License 14 Commits 2 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

react-native-platform-touchable is no longer maintained

🚨 We recommend using react-native-gesture-handler buttons instead!


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
  
    
      
      
    
  

// Bad

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 ( console.log('hello!')} style={{ backgroundColor: '#eee', paddingVertical: 30, paddingHorizontal: 80, }} background={Touchable.Ripple('blue')}> Hello there! ); } }

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
  • pressRetentionOffset
    - see React Native documentation.
  • accessibility props - see

    TouchableWithoutFeedback
    for the list of supported props and Accessibility guide for more information.

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.