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 Pressable that lowers opacity when pressed.

  
npm i react-native-pressable-opacity

  


  


  


  

  




### ``

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 the disabled prop is true. Use 1 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

  

  

    All Pressable props

    PressableProps

    All properties from the React Native Pressable such as onPress, children or disabled.

    ❌

    {}

  

### ``

**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 for 50ms 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

  

  

    All View props

    ViewProps

    All properties from the React Native View component such as style or children.

    ❌

    {}

  

  

    All WithTimingConfig props

    WithTimingConfig

    All properties from the react-native-reanimated withTiming options parameter such as Easing or duration.

    ❌

    { duration: 50, easing: Easing.linear }

  

## Also try

* [react-native-pressable-scale](https://github.com/mrousavy/react-native-pressable-scale)