/pressto-button

Setup

Add PressablesConfig with haptics to your root layout:

import { PressablesConfig } from "pressto";
import * as Haptics from "expo-haptics";

export default function RootLayout() {
  return (
    <PressablesConfig
      globalHandlers={{
        onPressIn: () => Haptics.selectionAsync(),
      }}
    >
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      </Stack>
    </PressablesConfig>
  );
}

Usage

import { PressableScale, PressableOpacity } from "pressto";

// Scales down on press
<PressableScale onPress={() => {}}>
  <Text>Scale</Text>
</PressableScale>

// Fades when pressed
<PressableOpacity onPress={() => {}}>
  <Text>Opacity</Text>
</PressableOpacity>

Supports standard Pressable props.

Notes

Do not add extra animations beyond what Pressto provides. Custom animations can cause text to appear blurry when pressing. Use only the built-in scale/opacity effects.