react-native-platform-touchable - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #typescript #llm #golang #go #machine-learning #docker #cli #vue #pytorch #ios #mcp

react-native-platform-touchable

(★ 438)

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

File Explorer

Download Latest Version (.zip)

.eslintrc
.gitignore
example.js
LICENSE
package.json
PlatformTouchable.js
README.md
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/rnc-archive/react-native-platform-touchable

Downloads the entire project code from GitHub to your computer.

cd react-native-platform-touchable

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

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

Type this command into your terminal and run it.

yarn add react-native-platform-touchable

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-native-platform-touchable is no longer maintained

🚨 We recommend using [react-native-gesture-handler buttons](https://software-mansion.github.io/react-native-gesture-handler/docs/component-buttons.html) instead!

<hr />

#`<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:

```javascript
  // 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
```

```javascript
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](http://facebook.github.io/react-native/releases/0.45/docs/view.html#onlayout)
- `pressRetentionOffset` - see [React Native
  documentation](https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html#pressretentionoffset).
- accessibility props - see [`TouchableWithoutFeedback`](https://facebook.github.io/react-native/docs/touchablewithoutfeedback#props) for the list of supported props and [Accessibility guide](https://facebook.github.io/react-native/docs/accessibility.html) 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

- See [this example on Snack](https://snack.expo.io/ry3Xv9HNW) that demonstrates how to have `Touchable` with `TouchableNativeFeedback` behavior respect rounded corners from `borderRadius`.
- Known issue: rounded corners do not work if you use a `foreground` ripple, see [facebook/react-native/issues/14798](https://github.com/facebook/react-native/issues/14798)