https://github.com/rnc-archive/react-native-platform-touchable
A wrapper around the various Touchable* components built into React Native core with platform defaults
https://github.com/rnc-archive/react-native-platform-touchable
button component react-native
Last synced: 13 days ago
JSON representation
A wrapper around the various Touchable* components built into React Native core with platform defaults
- Host: GitHub
- URL: https://github.com/rnc-archive/react-native-platform-touchable
- Owner: rnc-archive
- License: bsd-3-clause
- Archived: true
- Created: 2017-07-01T20:16:47.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-05-14T22:04:58.000Z (over 5 years ago)
- Last Synced: 2024-07-30T02:42:12.375Z (over 1 year ago)
- Topics: button, component, react-native
- Language: JavaScript
- Homepage:
- Size: 95.7 KB
- Stars: 440
- Watchers: 8
- Forks: 30
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-frontend - react-native-platform-touchable
README
# 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!
#``
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
// Bad
```
## 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 (
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](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)