Pressable

Installation

Pressable ships with the library — install it once, then import:

import { Pressable } from "@delacour/react-native-ui/pressable";

Or copy the source into your project, to own and edit it:

bunx delacour@latest add pressable

Usage

app/index.tsx

import { Pressable } from "@/components/ui/pressable";
import { Text } from "@/components/ui/text";
import { View } from "react-native";

export default function Example() {
  function open() {
    console.log("opened");
  }

  return (
    <View className="flex-1 items-center justify-center p-4">
      <Pressable feedback="scale" haptic="selection" onPress={open}>
        <Text>Open</Text>
      </Pressable>
    </View>
  );
}

Feedback

scale, fade, scale-fade and none are the shared vocabulary — every pressable in the library resolves through it rather than keeping a private map.

Named feedback

<Pressable feedback="scale">…</Pressable>
<Pressable feedback="fade">…</Pressable>
<Pressable feedback="scale-fade">…</Pressable>
<Pressable feedback="none">…</Pressable>

Explicit values

pressedScale and pressedOpacity win on the axis they name and leave the other to feedback.

<Pressable pressedScale={0.92}>…</Pressable>
<Pressable feedback="scale" pressedOpacity={0.5}>…</Pressable>

Disabled and busy

Both block the gesture; only disabled announces the control as disabled. Use busy for a temporary state the component clears itself.

<Pressable disabled>…</Pressable>
<Pressable busy>…</Pressable>

Haptics

haptic plays inside the gesture worklet, so the tap and the haptic land in the same frame.

<Pressable haptic="selection">…</Pressable>

asChild

Renders into the single child element instead of emitting a View.

<Pressable asChild haptic="medium">
  <View className="rounded-xl border border-border bg-card p-4">…</View>
</Pressable>

Worklets

Cross back to JS with scheduleOnRN from react-native-worklets, never Reanimated's runOnJS — since Reanimated 4 that is a deprecated shim forwarding to exactly this call.

scheduleOnRN(onPress);          // not runOnJS(onPress)()

Every pressable in the library extends this — Button, ListGroup.Item, Accordion.Trigger, Checkbox and Radio all inherit the vocabulary rather than restating it. ViewProps passes through, minus style.

Prop

Type

Neither disabled nor busy applies any opacity of its own — that is the caller's variant's job. A bare Pressable with no feedback presses to { opacity: 0.9, scale: 0.97 }, which fades less than fade does.

Exports

import {
  Pressable,
  type PressableProps,
  type HapticFeedback,
  PRESSABLE_FEEDBACK,
  PRESSABLE_FEEDBACKS,
  PRESSABLE_FEEDBACK_FALLBACK,
  resolvePressedState,
} from "@delacour/react-native-ui/pressable";