react-native-pressable-opacity

A Pressable that lowers opacity when pressed.

npm i react-native-pressable-opacity

$3

A component for responding to touches using the new JS Pressability API.

``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`.	❌	`{}`

`$3`

A supercharged .

> Requires react-native-gesture-handler and react-native-reanimated (v2)

A component for responding to touches using the native TapGestureHandler 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

`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

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.

❌

{}

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 }