https://github.com/mrousavy/react-native-pressable-opacity
A <PressableOpacity> and a supercharged <NativePressableOpacity> components for React Native
https://github.com/mrousavy/react-native-pressable-opacity
Last synced: 2 months ago
JSON representation
A <PressableOpacity> and a supercharged <NativePressableOpacity> components for React Native
- Host: GitHub
- URL: https://github.com/mrousavy/react-native-pressable-opacity
- Owner: mrousavy
- License: mit
- Created: 2020-10-08T09:54:39.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-04-20T16:08:10.000Z (about 3 years ago)
- Last Synced: 2024-05-02T00:59:21.450Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 1.3 MB
- Stars: 52
- Watchers: 4
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### ``
A component for responding to touches using the new [JS `Pressability` API](https://reactnative.dev/docs/pressable).
```jsx
Buy this Product
```
The following props are supported:
Name
Type
Explanation
Required
Default Value
disabledOpacity
number
The opacity to use when thedisabled
prop istrue
. Use1
to disable opacity changes when disabling the<PressableOpacity>
❌
0.3
activeOpacity
number
The opacity to use when the<PressableOpacity>
is in a pressed state.
❌
0.2
AllPressable
props
PressableProps
All properties from the React NativePressable
such asonPress
,children
ordisabled
.
❌
{}
### ``
**A supercharged ``.**
> Requires `react-native-gesture-handler` and `react-native-reanimated` (v2)
A component for responding to touches using the native [`TapGestureHandler`](https://docs.swmansion.com/react-native-gesture-handler/docs/handler-tap/) without ever going over the JS Bridge. Use this component if you want your Pressables to be able to receive touches, respond to touches, show visual animated feedback (opacity change) and dispatch a callback to JS without using the React Native Thread at all. This component will always be pressable, even when the React Native (JS) Thread freezes because of a heavy JS computation.
> ⚠️ Warning: This does not work in Modals on Android devices. See [software-mansion/react-native-gesture-handler issue #139](https://github.com/software-mansion/react-native-gesture-handler/issues/139)
```jsx
Buy this Product
```
The following props are supported:
Name
Type
Explanation
Required
Default Value
onPress
() => void
The event to fire after the<PressableOpacity>
has been pressed by the user.
✅
undefined
activeOpacity
number
The opacity to use when the<PressableOpacity>
is in a pressed state. Changes to and from this opacity will always be animated using a short linear timing animation.
❌
0.2
isInList
boolean
A flag indicating whether this<PressableOpacity>
is rendered in a ScrollView, FlatList or any other component that uses a swipe gesture. This will delay the animation for50ms
so swipe gestures don't immediately trigger opacity changes
❌
false
disabled
boolean
A flag indicating whether this<PressableOpacity>
should be disabled and therefore stop receiving touch events.
❌
false
ref
React.RefObject<TapGestureHandler>
A reference to the<TapGestureHandler>
component.
❌
false
AllView
props
ViewProps
All properties from the React NativeView
component such asstyle
orchildren
.
❌
{}
AllWithTimingConfig
props
WithTimingConfig
All properties from the react-native-reanimatedwithTiming
options parameter such asEasing
orduration
.
❌
{ duration: 50, easing: Easing.linear }
## Also try
* [react-native-pressable-scale](https://github.com/mrousavy/react-native-pressable-scale)