### Start Example App Packager

Source: https://github.com/enzomanuelmangano/pressto/blob/main/CONTRIBUTING.md

Starts the Metro server for the example application. This is necessary to run the example app.

```sh
bun example start
```

--------------------------------

### Install Pressto (bun)

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/INTEGRATION_GUIDE.md

Install the pressto library using bun.

```bash
bun add pressto
```

--------------------------------

### Run Example App on Web

Source: https://github.com/enzomanuelmangano/pressto/blob/main/CONTRIBUTING.md

Builds and runs the example application in a web browser.

```sh
bun example web
```

--------------------------------

### Quickstart with PressableScale

Source: https://github.com/enzomanuelmangano/pressto/blob/main/README.md

Integrate PressableScale into your React Native application for a smooth scaling animation on press. This example demonstrates basic usage with a simple text child.

```jsx
import { PressableScale } from 'pressto';

function App() {
  return (
    <PressableScale onPress={() => console.log('pressed')}> 
      <Text>Press me</Text>
    </PressableScale>
  );
}
```

--------------------------------

### Install Pressto (npm)

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/INTEGRATION_GUIDE.md

Install the pressto library using npm.

```bash
npm install pressto
```

--------------------------------

### Run Example App on Android

Source: https://github.com/enzomanuelmangano/pressto/blob/main/CONTRIBUTING.md

Builds and runs the example application on an Android device or emulator.

```sh
bun example android
```

--------------------------------

### Run Example App on iOS

Source: https://github.com/enzomanuelmangano/pressto/blob/main/CONTRIBUTING.md

Builds and runs the example application on an iOS device or simulator.

```sh
bun example ios
```

--------------------------------

### Complete Pressto Configuration Example

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/configuration.md

A comprehensive example showing how to set up global configurations for Pressto, including animation, visual properties, metadata, global handlers, default props, and web-specific settings.

```typescript
import { PressablesConfig, PressableScale } from 'pressto';
import { Easing } from 'react-native-reanimated';
import * as Haptics from 'expo-haptics';

type AppTheme = {
  colors: {
    primary: '#6366F1';
    text: '#FFFFFF';
  };
  spacing: {
    small: 8;
    medium: 16;
    large: 24;
  };
};

const theme: AppTheme = {
  colors: {
    primary: '#6366F1',
    text: '#FFFFFF',
  },
  spacing: {
    small: 8,
    medium: 16,
    large: 24,
  },
};

export default function App() {
  return (
    <PressablesConfig<'spring', AppTheme>
      // Animation
      animationType="spring"
      animationConfig={{
        mass: 1,
        damping: 25,
        stiffness: 180,
      }}

      // Visual
      config={{
        activeOpacity: 0.6,
        minScale: 0.95,
        baseScale: 1,
      }}

      // Metadata
      metadata={theme}

      // Handlers
      globalHandlers={{
        onPress: ({ metadata }) => {
          Haptics.selectionAsync();
          analytics.track('press', {
            theme: metadata?.colors.primary,
          });
        },
      }}

      // Default props
      defaultProps={{
        rippleColor: 'rgba(255, 255, 255, 0.2)',
        hitSlop: { top: 8, bottom: 8, left: 8, right: 8 },
        accessibilityRole: 'button',
      }}

      // Web
      activateOnHover={true}>
      <NavigationContainer>
        <YourApp />
      </NavigationContainer>
    </PressablesConfig>
  );
}
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/enzomanuelmangano/pressto/blob/main/CONTRIBUTING.md

Installs all project dependencies using Bun workspaces. This command should be run in the root directory.

```sh
bun install
```

--------------------------------

### Install Peer Dependencies (bun)

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/INTEGRATION_GUIDE.md

Install required peer dependencies for pressto using bun.

```bash
bun add react-native-gesture-handler react-native-reanimated react-native-worklets
```

--------------------------------

### Install Peer Dependencies (npm)

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/INTEGRATION_GUIDE.md

Install required peer dependencies for pressto using npm.

```bash
npm install react-native-gesture-handler react-native-reanimated react-native-worklets
```

--------------------------------

### Install eslint-plugin-pressto with npm, yarn, or bun

Source: https://github.com/enzomanuelmangano/pressto/blob/main/eslint-plugin-pressto/README.md

Install the plugin as a development dependency using your preferred package manager.

```bash
npm install --save-dev eslint-plugin-pressto
# or
yarn add -D eslint-plugin-pressto
# or
bun add -D eslint-plugin-pressto
```

--------------------------------

### Complete PressablesConfig Setup

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/pressables-config.md

Demonstrates a full setup of PressablesConfig with spring animation, custom configuration, theme metadata, default props, and global press handlers. This is typically used at the root of your application to provide a consistent pressable experience.

```typescript
import { PressablesConfig, PressableScale, PressableOpacity } from 'pressto';
import { Easing } from 'react-native-reanimated';

type AppTheme = {
  colors: {
    primary: '#6366F1';
    text: '#FFFFFF';
  };
};

const theme: AppTheme = {
  colors: {
    primary: '#6366F1',
    text: '#FFFFFF',
  },
};

export default function App() {
  return (
    <PressablesConfig<'spring', AppTheme>
      animationType="spring"
      animationConfig={{ damping: 25, stiffness: 180 }}
      config={{
        activeOpacity: 0.6,
        minScale: 0.95,
      }}
      metadata={theme}
      defaultProps={{
        rippleColor: 'rgba(255, 255, 255, 0.2)',
        accessibilityRole: 'button',
      }}
      globalHandlers={{
        onPress: ({ metadata }) => {
          console.log('Pressed with theme:', metadata.colors.primary);
        },
      }}
    >
      <NavigationContainer>
        <YourApp />
      </NavigationContainer>
    </PressablesConfig>
  );
}
```

--------------------------------

### Minimal PressableScale Setup

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/EXPORTS.md

Import and use the basic PressableScale component for simple press interactions.

```typescript
import { PressableScale } from 'pressto';

<PressableScale onPress={() => {}}>
  <Text>Press me</Text>
</PressableScale>
```

--------------------------------

### Install Pressto and Dependencies

Source: https://github.com/enzomanuelmangano/pressto/blob/main/README.md

Install Pressto along with its required peer dependencies: react-native-reanimated, react-native-gesture-handler, and react-native-worklets.

```sh
bun add pressto react-native-reanimated react-native-gesture-handler react-native-worklets
```

--------------------------------

### Basic PressableOpacity Example

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/built-in-pressables.md

This snippet demonstrates the basic usage of PressableOpacity. It wraps a Text component and logs a message to the console when pressed.

```typescript
import { PressableOpacity } from 'pressto';

<PressableOpacity onPress={() => console.log('Pressed!')}>
  <Text>Tap me</Text>
</PressableOpacity>
```

--------------------------------

### Example: Global Analytics Handler

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/configuration.md

Use global handlers to track button presses with associated metadata. This example sends an analytics event when a button is pressed.

```typescript
<PressablesConfig
  globalHandlers={{
    onPress: ({ metadata }) => {
      analytics.track('button_pressed', {
        name: metadata?.name,
      });
    },
  }}>
  <PressableScale metadata={{ name: 'submit' }}>
    <Text>Submit</Text>
  </PressableScale>
  
  <PressableScale metadata={{ name: 'cancel' }}>
    <Text>Cancel</Text>
  </PressableScale>
</PressablesConfig>
```

--------------------------------

### Basic Spring Animation Setup

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/pressables-config.md

Set up a spring animation for Pressable components. This requires importing PressablesConfig and PressableScale from 'pressto' and Easing from 'react-native-reanimated'.

```typescript
import { PressablesConfig, PressableScale } from 'pressto';
import { Easing } from 'react-native-reanimated';

export default function App() {
  return (
    <PressablesConfig
      animationType="spring"
      animationConfig={{ damping: 20, stiffness: 150, mass: 1 }}
    >
      <PressableScale onPress={() => console.log('Pressed!')}>
        <Text>Spring Animation</Text>
      </PressableScale>
    </PressablesConfig>
  );
}
```

--------------------------------

### Correct usage of createAnimatedPressable with 'worklet' directive

Source: https://github.com/enzomanuelmangano/pressto/blob/main/eslint-plugin-pressto/README.md

These examples demonstrate the correct implementation using the 'worklet' directive, ensuring functions run on the UI thread.

```javascript
const AnimatedButton = createAnimatedPressable(() => {
  'worklet';
  return {
    opacity: withSpring(1),
  };
});

const AnimatedButton = createAnimatedPressable(function() {
  'worklet';
  return {
    opacity: withSpring(1),
  };
});
```

--------------------------------

### PressableOpacity for Link-like Navigation

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/built-in-pressables.md

This example demonstrates using PressableOpacity to create a link-like element. It customizes the active opacity and uses the onPress handler to navigate to a different route.

```typescript
<PressableOpacity
  config={{ activeOpacity: 0.7 }}
  onPress={() => navigate('/details')}
>
  <Text style={{ color: '#0099FF' }}>Go to details</Text>
</PressableOpacity>
```

--------------------------------

### Usage Example for AnimatedPressable

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/types.md

Demonstrates how to use AnimatedPressableStyleOptions within a custom animated pressable component to control styles based on component state and provided options.

```typescript
const MyPressable = createAnimatedPressable((progress, options) => {
  'worklet';
  const {
    isPressed,
    isToggled,
    isSelected,
    metadata,
    config,
    withAnimation,
  } = options;

  return {
    opacity: withAnimation(isPressed ? 0.7 : 1),
    backgroundColor: isToggled ? '#4CAF50' : '#2196F3',
  };
});
```

--------------------------------

### Example: Default Accessibility Properties

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/configuration.md

Set default accessibility properties for pressable components. This ensures better screen reader support and accessibility compliance out-of-the-box.

```typescript
<PressablesConfig
  defaultProps={{
    accessibilityRole: 'button',
    accessible: true,
  }}>
  <YourApp />
</PressablesConfig>
```

--------------------------------

### Global Configuration: Adjust Scale and Opacity

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/INTEGRATION_GUIDE.md

Globally set the active opacity and minimum scale for all pressable components. This example increases the fade effect and scaling.

```typescript
<PressablesConfig
  config={{
    activeOpacity: 0.3,      // More fade
    minScale: 0.9,           // More scale
  }}
>
  <YourApp />
</PressablesConfig>
```

--------------------------------

### Example: Global Haptics Handler

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/configuration.md

Implement global haptic feedback for all press events. This snippet uses expo-haptics to provide a selection feedback when any pressable is activated.

```typescript
import * as Haptics from 'expo-haptics';

<PressablesConfig
  globalHandlers={{
    onPress: () => Haptics.selectionAsync(),
  }}>
  <YourApp />
</PressablesConfig>
```

--------------------------------

### Global Press Event Handling

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/types.md

Demonstrates how to use global handlers within PressablesConfig to process press event options. This example tracks press events for analytics.

```typescript
<PressablesConfig
  globalHandlers={{
    onPress: (options) => {
      analytics.track('press', {
        toggled: options.isToggled,
        selected: options.isSelected,
      });
    },
  }}
>
  ...
</PressablesConfig>
```

--------------------------------

### Pressto Peer Dependencies

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/EXPORTS.md

List of required peer dependencies for Pressto. Ensure these packages are installed and compatible versions are used.

```json
{
  "react": "*",
  "react-native": "*",
  "react-native-gesture-handler": "*",
  "react-native-reanimated": "*",
  "react-native-worklets": "*"
}
```

--------------------------------

### Metadata for Theming

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/ARCHITECTURE.md

Example of using the metadata pattern to inject design tokens, such as color values, into worklets for theming purposes. This allows dynamic styling based on theme configurations.

```typescript
metadata: { colors: { primary: '#FF5722' } }
```

--------------------------------

### PressableOpacity with Custom Active Opacity

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/built-in-pressables.md

This example shows how to customize the active opacity for PressableOpacity. It sets the active opacity to 0.3, resulting in a more pronounced fade when pressed.

```typescript
<PressableOpacity
  config={{ activeOpacity: 0.3 }}
  onPress={() => {}}
>
  <Text>More fade</Text>
</PressableOpacity>
```

--------------------------------

### Group Selection with PressableWithoutFeedback

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/built-in-pressables.md

This example shows how to use `PressableWithoutFeedback` for managing selection within a group of items. The visual feedback, such as the border color, is controlled based on whether the item is selected.

```typescript
<PressableWithoutFeedback
  onPress={() => selectOption(id)}
  metadata={{ id }}
>
  <View
    style={{
      borderColor: isSelected ? '#FFD700' : '#CCCCCC',
      borderWidth: 2,
    }}
  >
    <Text>{label}</Text>
  </View>
</PressableWithoutFeedback>
```

--------------------------------

### Usage of PressableChildrenCallbackParams

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/types.md

Example demonstrating how to use the `PressableChildrenCallbackParams` in a `PressableScale` component to control animated views based on press state.

```jsx
<PressableScale>
  {({ progress, isPressed, withAnimation }) => (
    <Animated.View
      style={{
        opacity: progress,
      }}>
      <Text>Press: {isPressed}</Text>
    </Animated.View>
  )}
</PressableScale>
```

--------------------------------

### Global Configuration: Adjust Animation Speed

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/INTEGRATION_GUIDE.md

Customize the duration of timing animations globally. This example sets a faster duration of 150ms.

```typescript
<PressablesConfig
  animationType="timing"
  animationConfig={{ duration: 150 }}  // Faster
>
  <YourApp />
</PressablesConfig>
```

--------------------------------

### Example: Default Touch Area Expansion

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/configuration.md

Configure a default `hitSlop` to increase the touchable area for all pressables. This improves usability by making it easier to tap smaller elements.

```typescript
<PressablesConfig
  defaultProps={{
    hitSlop: { top: 10, bottom: 10, left: 10, right: 10 },
  }}>
  <YourApp />
</PressablesConfig>
```

--------------------------------

### Configure Global Spring Animation

Source: https://github.com/enzomanuelmangano/pressto/blob/main/README.md

Use PressablesConfig to set a global spring animation for all pressables. This example applies a specific damping and stiffness to all pressable components within the App.

```jsx
import { PressablesConfig, PressableScale } from 'pressto';

function App() {
  return (
    <PressablesConfig
      animationType="spring"
      animationConfig={{ damping: 30, stiffness: 200 }}
      config={{ minScale: 0.9, activeOpacity: 0.6 }}
    >
      <PressableScale onPress={() => console.log('pressed')}>
        <Text>Now with spring animation!</Text>
      </PressableScale>
    </PressablesConfig>
  );
}
```

--------------------------------

### Type-Safe PressablesConfig with Generics

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/pressables-config.md

Use generics with PressablesConfig to ensure type safety for metadata. This example defines a `MyTheme` type and applies it to the `metadata` prop and the `onPress` handler.

```typescript
type MyTheme = { primary: string };

<PressablesConfig<'timing', MyTheme>
  animationType="timing"
  metadata={{ primary: '#FF5722' }}
  globalHandlers={{
    onPress: ({ metadata }) => {
      // metadata is typed as MyTheme | undefined
      console.log(metadata?.primary);
    },
  }}
>
  ...
</PressablesConfig>
```

--------------------------------

### Usage Pattern: Accessing Config and Tracking Selection

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/provider-hooks.md

Demonstrates how to use `usePressablesConfig` to get global settings and `useLastTouchedPressable` with `useDerivedValue` to track selection state reactively in React Native components.

```typescript
import {
  usePressablesConfig,
  useLastTouchedPressable,
} from 'pressto';
import { useId } from 'react';
import { useDerivedValue } from 'react-native-reanimated';

function MyPressable() {
  const config = usePressablesConfig();
  const lastTouched = useLastTouchedPressable();
  const myId = useId();

  const isSelected = useDerivedValue(() => {
    return lastTouched.get() === myId;
  });

  console.log('Config:', config.config.minScale);
  // isSelected changes reactively when lastTouched changes

  return (
    <PressableScale onPress={() => {}}>
      <Text>{isSelected.value ? 'Selected' : 'Not selected'}</Text>
    </PressableScale>
  );
}
```

--------------------------------

### Custom Timing Animation Configuration

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/pressables-config.md

Configure a timing animation with custom duration, easing, and pressable properties like opacity and scale. This example demonstrates overriding default press behavior.

```typescript
<PressablesConfig
  animationType="timing"
  animationConfig={{ duration: 150, easing: Easing.in(Easing.quad) }}
  config={{
    activeOpacity: 0.3,   // More transparent when pressed
    minScale: 0.9,        // More pronounced scale
    baseScale: 1,
  }}
>
  <YourApp />
</PressablesConfig>
```

--------------------------------

### Define and Use Scale Animation

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/ARCHITECTURE.md

Example of defining a scale animation and using the `createAnimatedPressable` factory to create a reusable pressable component. The component can be used multiple times with different props.

```typescript
// Define animation
const scaleAnimation = (progress, { config }) => ({
  transform: [{ scale: interpolate(progress, [0, 1], [1, config.minScale]) }],
});

// Create pressable
const MyPressable = createAnimatedPressable(scaleAnimation);

// Use multiple times with different props
<MyPressable onPress={() => {}} />
<MyPressable onPress={() => {}} metadata={{ id: 1 }} />
```

--------------------------------

### Creating a State-Aware Component with createAnimatedPressable

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/create-animated-pressable.md

Demonstrates building a state-aware component, `SelectableButton`, using `createAnimatedPressable`. This example shows how to manage and animate based on the `isSelected` state and pass custom `metadata` for each button instance. It uses `react-native-reanimated`'s `interpolate` for scaling and conditional styling for border color and width.

```typescript
import { createAnimatedPressable } from 'pressto';
import { interpolate } from 'react-native-reanimated';

const SelectableButton = createAnimatedPressable(
  (progress, { isSelected, metadata }) => {
    'worklet';

    const scale = interpolate(progress, [0, 1], [1, 0.95]);
    const borderColor = isSelected ? '#FFD700' : '#CCCCCC';
    const borderWidth = isSelected ? 2 : 1;

    return {
      transform: [{ scale }],
      borderColor,
      borderWidth,
    };
  }
);

export default function App() {
  return (
    <View>
      <SelectableButton
        metadata={{ id: 'option-1' }}
        onPress={(options) => {
          if (options.isSelected) {
            console.log('Option 1 is now selected');
          }
        }}>
        <Text>Option 1</Text>
      </SelectableButton>

      <SelectableButton
        metadata={{ id: 'option-2' }}
        onPress={(options) => {
          if (options.isSelected) {
            console.log('Option 2 is now selected');
          }
        }}>
        <Text>Option 2</Text>
      </SelectableButton>
    </View>
  );
}
```

--------------------------------

### Timing-Based Animation Pipeline

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/ARCHITECTURE.md

Illustrates the default timing-based animation flow, starting from user interaction to view transforms. This pipeline uses `withTiming` for interpolation over a specified duration.

```plaintext
active.set(true/false)  [User presses/releases]
    ↓
progress = useDerivedValue(...)  [Derives from active]
    ↓
withTiming(value, config)  [Interpolates: 0→1 over duration]
    ↓
animatedStyle(progress, options)  [Called in worklet]
    ↓
useAnimatedStyle(...)  [Applies result to View]
    ↓
View transforms (main thread)
```

--------------------------------

### Add Global Haptic Feedback Handler

Source: https://github.com/enzomanuelmangano/pressto/blob/main/README.md

Configure global handlers for all pressables using PressablesConfig. This example adds a global onPress handler that triggers haptic feedback using expo-haptics.

```jsx
import { PressablesConfig } from 'pressto';
import * as Haptics from 'expo-haptics';

function App() {
  return (
    <PressablesConfig
      globalHandlers={{
        onPress: () => {
          Haptics.selectionAsync();
        },
      }}
    >
      {/* All pressables will trigger haptics */}
      <YourApp />
    </PressablesConfig>
  );
}
```

--------------------------------

### Handle Press Events with Options

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/types.md

Example of how to access press event options within a component's onPress handler. Logs the current press, toggle, and selection states.

```typescript
<PressableScale
  onPress={(options) => {
    console.log('Pressed:', options.isPressed);
    console.log('Toggled:', options.isToggled);
    console.log('Selected:', options.isSelected);
  }}
>
  <Text>Button</Text>
</PressableScale>
```

--------------------------------

### Correct Interpolation Range

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/errors.md

This corrected example demonstrates the proper way to define the input and output ranges for `interpolate` to achieve the expected animation scaling. Ensure the output values correspond to the intended animation state at each point in the input range.

```typescript
// progress: 0 → idle, 1 → pressed
// baseScale: 1, minScale: 0.96
// Expected: when pressed (progress=1), scale down to 0.96

const MyPressable = createAnimatedPressable((progress, { config }) => {
  'worklet';
  return {
    transform: [
      {
        scale: interpolate(
          progress,
          [0, 1],
          [config.baseScale, config.minScale]  // ✓ Correct: 1 → 0.96
        ),
      },
    ],
  };
});
```

--------------------------------

### Basic Scale Animation with createAnimatedPressable

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/base-pressable.md

Demonstrates creating a pressable component with a basic scale animation based on press progress. Use this for simple interactive feedback.

```typescript
const MyPressable = createAnimatedPressable((progress, { config }) => {
  'worklet';
  return {
    transform: [
      {
        scale: interpolate(progress, [0, 1], [config.baseScale, config.minScale]),
      },
    ],
  };
});

export default function App() {
  return (
    <MyPressable onPress={() => console.log('pressed')}>
      <Text>Press me</Text>
    </MyPressable>
  );
}
```

--------------------------------

### Integration Test with Detox

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/ARCHITECTURE.md

Example of performing a tap action on an element using its testID in an E2E integration test with Detox.

```typescript
await element(by.id('submit-button')).tap();
```

--------------------------------

### Extending Configuration with Shallow Merge

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/ARCHITECTURE.md

Demonstrates how to extend Pressto's configuration using the `config` prop. Local configurations will override global settings via a shallow merge.

```typescript
<PressablesConfig config={{ minScale: 0.96 }}>
  <PressableScale config={{ minScale: 0.85 }} />  // Local override
</PressablesConfig>
```

--------------------------------

### Access Configuration with usePressablesConfig

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/provider-hooks.md

Demonstrates how to retrieve and display specific configuration values like `activeOpacity`, `minScale`, and `baseScale` using the `usePressablesConfig` hook. This is helpful for debugging or displaying current settings.

```typescript
function DebugInfo() {
  const { config } = usePressablesConfig();

  return (
    <View>
      <Text>activeOpacity: {config.activeOpacity}</Text>
      <Text>minScale: {config.minScale}</Text>
      <Text>baseScale: {config.baseScale}</Text>
    </View>
  );
}
```

--------------------------------

### Global Configuration: Default Props

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/INTEGRATION_GUIDE.md

Set default props for all pressables globally. This example disables Android ripple and expands the touch area.

```typescript
<PressablesConfig
  defaultProps={{
    rippleColor: 'transparent',
    hitSlop: { top: 8, bottom: 8, left: 8, right: 8 },
  }}
>
  <YourApp />
</PressablesConfig>
```

--------------------------------

### Rotation Animation with createAnimatedPressable

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/create-animated-pressable.md

Creates a pressable component that rotates when pressed. This example does not require `react-native-reanimated` for interpolation, using direct degree calculation.

```typescript
import { createAnimatedPressable } from 'pressto';

const PressableRotate = createAnimatedPressable((progress) => {
  'worklet';
  return {
    transform: [{ rotate: `${progress * 45}deg` }],
  };
});

<PressableRotate onPress={() => {}}>
  <Text>Rotate me!</Text>
</PressableRotate>
```

--------------------------------

### Setting Global Pressable Configuration

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/types.md

Demonstrates how to set pressable configuration globally using the PressablesConfig component.

```typescript
<PressablesConfig
  config={{
    activeOpacity: 0.3,
    minScale: 0.9,
    baseScale: 1,
  }}
>
  ...
</PressablesConfig>
```

--------------------------------

### Accessibility Setup for Pressables

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/pressables-config.md

Configure default accessibility properties for Pressable components, such as `accessibilityRole` and `accessibilityLabel`. This ensures better usability for assistive technologies.

```typescript
<PressablesConfig
  defaultProps={{
    accessibilityRole: 'button',
    accessibilityLabel: 'Button',
  }}
>
  <YourApp />
</PressablesConfig>
```

--------------------------------

### isSelected Always False (Incorrect Usage)

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/errors.md

This example shows the incorrect usage where isSelected is always false because PressablesConfig or PressablesGroup is not wrapping the pressable component.

```typescript
// No PressablesConfig or PressablesGroup
<View>
  <PressableScale onPress={(options) => {
    console.log('isSelected:', options.isSelected);  // Always false
  }} />
</View>
```

--------------------------------

### Metadata Replacement Instead of Merging

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/errors.md

This example illustrates the default behavior where metadata provided to a Pressable component replaces, rather than merges with, the metadata from PressablesConfig.

```typescript
<PressablesConfig
  metadata={{ theme: 'light', user: 'john' }}
>
  <PressableScale metadata={{ user: 'jane' }}>
    {/* Expected: { theme: 'light', user: 'jane' } */}
    {/* Actual: { user: 'jane' } */}
  </PressableScale>
</PressablesConfig>
```

--------------------------------

### Platform-Specific Default Properties

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/pressables-config.md

Apply platform-specific default properties to Pressable components. This example sets a ripple color for Android and default hitSlop values.

```typescript
import { PressablesConfig } from 'pressto';
import { Platform } from 'react-native';

<PressablesConfig
  animationType="spring"
  defaultProps={{
    rippleColor: Platform.OS === 'android' ? '#00000033' : undefined,
    hitSlop: { top: 10, bottom: 10, left: 10, right: 10 },
  }}
>
  <YourApp />
</PressablesConfig>
```

--------------------------------

### Incorrect usage of createAnimatedPressable without 'worklet' directive

Source: https://github.com/enzomanuelmangano/pressto/blob/main/eslint-plugin-pressto/README.md

These examples show incorrect code where the 'worklet' directive is missing, which is required for functions passed to createAnimatedPressable.

```javascript
const AnimatedButton = createAnimatedPressable(() => {
  // Missing 'worklet' directive
  return {
    opacity: withSpring(1),
  };
});

// Arrow function with implicit return (not supported)
const AnimatedButton = createAnimatedPressable(() => ({
  opacity: withSpring(1),
}));
```

--------------------------------

### Animated Pressable with Metadata

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/base-pressable.md

Shows how to use metadata with createAnimatedPressable to customize styles, such as background color and opacity, based on component-specific data. Ensure the metadata type is correctly defined.

```typescript
type MyMetadata = { name: string; color: string };

const ThemedButton = createAnimatedPressable<MyMetadata>(
  (progress, { metadata }) => {
    'worklet';
    return {
      backgroundColor: metadata.color,
      opacity: progress * 0.5 + 0.5,
    };
  }
);

<ThemedButton
  metadata={{ name: 'checkout', color: '#FF5722' }}
  onPress={(options) => {
    console.log(`${options.metadata?.name} pressed`);
  }}
>
  <Text>Themed Button</Text>
</ThemedButton>
```

--------------------------------

### Use useLastTouchedPressable Hook

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/provider-hooks.md

Demonstrates how to use the useLastTouchedPressable hook to get the last touched pressable's ID and use it to conditionally style a component.

```typescript
import { useLastTouchedPressable } from 'pressto';
import { useDerivedValue } from 'react-native-reanimated';

function MyComponent() {
  const lastTouched = useLastTouchedPressable();

  const isSelected = useDerivedValue(() => {
    return lastTouched.get() === myPressableId;
  });

  return (
    <Animated.View style={{ opacity: isSelected.value ? 1 : 0.5 }}>
      <Text>Selected: {isSelected.value}</Text>
    </Animated.View>
  );
}
```

--------------------------------

### Using withAnimation Helper with createAnimatedPressable

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/create-animated-pressable.md

Shows how to use the `withAnimation` helper function within the `createAnimatedPressable` worklet. This helper simplifies applying animations based on state changes, pre-configured with active timing or spring configurations.

```typescript
import { createAnimatedPressable } from 'pressto';

const CustomAnimatedButton = createAnimatedPressable(
  (progress, { withAnimation, isToggled }) => {
    'worklet';

    // withAnimation is pre-configured with the active timing/spring + config
    const scale = withAnimation(isToggled ? 1.1 : 1);
    const opacity = withAnimation(isToggled ? 0.5 : 1);

    return {
      transform: [{ scale }],
      opacity,
    };
  }
);

<CustomAnimatedButton
  initialToggled={true}
  onPress={() => {}}>
  <Text>Click to toggle</Text>
</CustomAnimatedButton>
```

--------------------------------

### Configure Spring Animation Damping and Stiffness

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/configuration.md

Allows detailed configuration for spring animations. Adjust damping and stiffness for different spring behaviors like bounciness.

```typescript
<PressablesConfig
  animationType="spring"
  animationConfig={{ damping: 20, stiffness: 250 }}>
  <YourApp />
</PressablesConfig>
```

--------------------------------

### Global Configuration: Global Handlers

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/INTEGRATION_GUIDE.md

Implement global handlers for events like onPress to trigger analytics or haptics for all pressables without individual configuration.

```typescript
import { PressablesConfig } from 'pressto';
import * as Haptics from 'expo-haptics';

<PressablesConfig
  globalHandlers={{
    onPress: ({ metadata }) => {
      Haptics.selectionAsync();
      analytics.track('press', { id: metadata?.id });
    },
  }}
>
  <YourApp />
</PressablesConfig>
```

--------------------------------

### Synchronize External State with useLastTouchedPressable

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/provider-hooks.md

Example of synchronizing an external state variable (e.g., useState) with the last touched pressable ID using a useEffect hook.

```typescript
import { useLastTouchedPressable } from 'pressto';
import { useState, useEffect } from 'react';

function SyncedButtons() {
  const lastTouched = useLastTouchedPressable();
  const [selectedId, setSelectedId] = useState<string | null>(null);

  useEffect(() => {
    // Create a subscription or use a derived value to sync
    // Note: In a real worklet context, you'd use runOnJS for this
    setSelectedId(lastTouched.get());
  }, [lastTouched]);

  return (
    <View>
      <Text>Last selected: {selectedId}</Text>
    </View>
  );
}
```

--------------------------------

### Custom Selection Logic with useLastTouchedPressable

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/provider-hooks.md

Illustrates implementing custom selection logic for a group of items using useLastTouchedPressable and animated styles.

```typescript
import { useLastTouchedPressable } from 'pressto';
import { PressableScale } from 'pressto';
import { useId } from 'react';
import { useAnimatedStyle, useDerivedValue } from 'react-native-reanimated';

function ToggleGroup() {
  const lastTouched = useLastTouchedPressable();
  const items = ['Option A', 'Option B', 'Option C'];

  return (
    <View>
      {items.map((item, idx) => {
        const itemId = useId();

        const isSelected = useDerivedValue(() => {
          return lastTouched.get() === itemId;
        });

        const rStyle = useAnimatedStyle(() => ({
          backgroundColor: isSelected.value ? '#6366F1' : '#E0E0E0',
          color: isSelected.value ? '#FFF' : '#000',
        }));

        return (
          <PressableScale key={item}>
            <Animated.View style={rStyle}>
              <Text>{item}</Text>
            </Animated.View>
          </PressableScale>
        );
      })}
    </View>
  );
}
```

--------------------------------

### PressableScale Basic Usage

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/built-in-pressables.md

Demonstrates the basic implementation of PressableScale. It scales down when pressed and returns to its base scale when released.

```typescript
import { PressableScale } from 'pressto';

<PressableScale onPress={() => console.log('Pressed!')}>
  <Text>Tap me</Text>
</PressableScale>
```

--------------------------------

### Typecheck Project Files

Source: https://github.com/enzomanuelmangano/pressto/blob/main/CONTRIBUTING.md

Verifies the project files using TypeScript for type checking. This command should pass before committing.

```sh
bun run typecheck
```

--------------------------------

### Set Default Props Globally

Source: https://github.com/enzomanuelmangano/pressto/blob/main/README.md

Use PressablesConfig with the 'defaultProps' prop to set default properties for all pressables. This example disables the Android ripple effect globally.

```jsx
import { PressablesConfig, PressableScale } from 'pressto';

function App() {
  return (
    <PressablesConfig defaultProps={{ rippleColor: 'transparent' }}>
      {/* All pressables will have ripple disabled */}
      <PressableScale onPress={() => console.log('No ripple!')}>
        <Text>Press me</Text>
      </PressableScale>

      {/* Individual pressables can still override */}
      <PressableScale rippleColor="blue" onPress={() => {}}>
        <Text>This one has blue ripple</Text>
      </PressableScale>
    </PressablesConfig>
  );
}
```

--------------------------------

### Incorrect Worklet Directive Usage

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/create-animated-pressable.md

This example shows the incorrect way to define an animation function without the 'worklet' directive, which will not be processed by Reanimated on the UI thread.

```typescript
const MyPressable = createAnimatedPressable((progress, options) => {
  return { opacity: progress };
});
```

--------------------------------

### Create Animated Pressable Factory

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/ARCHITECTURE.md

Use this factory to separate animation logic from component setup. Define animation styles once and create multiple pressable instances with them.

```typescript
const createAnimatedPressable = (animatedStyle) => {
  return (props) => (
    <BasePressable {...props} animatedStyle={animatedStyle} />
  );
};
```

--------------------------------

### BasePressable with Custom Press Handlers and Animated Style

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/base-pressable.md

Illustrates using BasePressable with custom onPressIn, onPress, onPressOut handlers, and an animatedStyle function to control opacity based on the press state. Useful for fine-grained control over interaction feedback.

```typescript
<BasePressable
  onPressIn={(options) => {
    console.log('Press started');
  }}
  onPress={(options) => {
    console.log('Pressed:', {
      isToggled: options.isToggled,
      isSelected: options.isSelected,
    });
  }}
  onPressOut={(options) => {
    console.log('Press ended');
  }}
  animatedStyle={(progress, { isPressed }) => ({
    opacity: isPressed ? 0.8 : 1,
  })}
>
  <Text>Interactive Button</Text>
</BasePressable>
```

--------------------------------

### Migrate from TouchableOpacity to PressableOpacity/PressableScale

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/INTEGRATION_GUIDE.md

Replace `TouchableOpacity` with `PressableOpacity` for a direct equivalent or `PressableScale` for a similar effect with scaling animation. Ensure to migrate the `onPress` handler and `style` prop accordingly.

```typescript
// Before
<TouchableOpacity onPress={() => {}} style={styles.button}>
  <Text>Old</Text>
</TouchableOpacity>

// After (equivalent)
<PressableOpacity onPress={() => {}} style={styles.button}>
  <Text>New</Text>
</PressableOpacity>

// Or (recommended)
<PressableScale onPress={() => {}} style={styles.button}>
  <Text>New</Text>
</PressableScale>
```

--------------------------------

### Mixed Timing Animation with Haptic Feedback

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/pressables-config.md

Combine timing animations with haptic feedback on press events. This example uses `expo-haptics` for selection feedback during a timed animation.

```typescript
import { PressablesConfig, PressableScale } from 'pressto';
import * as Haptics from 'expo-haptics';

<PressablesConfig
  animationType="timing"
  animationConfig={{ duration: 200 }}
  globalHandlers={{
    onPress: () => {
      Haptics.selectionAsync();
    },
  }}
>
  <YourApp />
</PressablesConfig>
```

--------------------------------

### PressableScale with Metadata

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/built-in-pressables.md

Demonstrates how to use custom metadata with PressableScale. A custom pressable component `MyScale` is created using `createAnimatedPressable` to handle metadata.

```typescript
const MyScale = createAnimatedPressable<{ name: string }>
  ((progress, { config }) => {
    'worklet';
    return {
      transform: [
        {
          scale: interpolate(progress, [0, 1], [config.baseScale, config.minScale]),
        },
      ],
    };
  });

<MyScale
  metadata={{ name: 'submit' }}
  onPress={(options) => {
    console.log(`${options.metadata?.name} pressed`);
  }}>
  <Text>Tracked</Text>
</MyScale>
```

--------------------------------

### Migrate from TouchableHighlight to PressableScale

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/INTEGRATION_GUIDE.md

When migrating from `TouchableHighlight`, use `PressableScale` and configure its `config` prop to match the `underlayColor` and `style` effects of the original component. This ensures a similar visual feedback.

```typescript
// Before
<TouchableHighlight
  onPress={() => {}}
  underlayColor="#CCCCCC"
  style={styles.button}>
  <Text>Old</Text>
</TouchableHighlight>

// After (custom animation matching the highlight effect)
<PressableScale
  onPress={() => {}}
  config={{ minScale: 0.95, activeOpacity: 0.8 }}
  style={styles.button}>
  <Text>New</Text>
</PressableScale>
```

--------------------------------

### Example: Default Android Ripple Color

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/configuration.md

Set a default ripple color for Android pressables. This ensures a consistent visual feedback for touch interactions on Android devices.

```typescript
<PressablesConfig
  defaultProps={{
    rippleColor: 'rgba(255, 255, 255, 0.2)',
  }}>
  <YourApp />
</PressablesConfig>
```

--------------------------------

### Wrapping App with PressablesConfig Provider

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/errors.md

To correctly configure pressables with global metadata and handlers, wrap your application's root component with the PressablesConfig provider. This ensures that pressables have access to the necessary configuration.

```typescript
export default function App() {
  return (
    <PressablesConfig>
      <YourApp />
    </PressablesConfig>
  );
}
```

--------------------------------

### Override Single Pressable Configuration

Source: https://github.com/enzomanuelmangano/pressto/blob/main/README.md

Override global configuration on a single pressable using the 'config' prop. This example shows how to change only the 'activeOpacity' for PressableOpacity and 'minScale' for PressableScale.

```jsx
{/* Inherits the rest of the config, only changes activeOpacity */}
<PressableOpacity config={{ activeOpacity: 0.7 }} />

<PressableScale config={{ minScale: 0.9 }} />
```

--------------------------------

### Create Simple Animated Pressable

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/INTEGRATION_GUIDE.md

Use `createAnimatedPressable` to define a pressable component with custom animations based on interaction progress. Requires `pressto` import.

```typescript
import { createAnimatedPressable } from 'pressto';

const PressableRotate = createAnimatedPressable((progress) => {
  'worklet';
  return {
    transform: [
      { rotate: `${progress * 45}deg` },
      { scale: interpolate(progress, [0, 1], [1, 0.95]) },
    ],
  };
});

<PressableRotate onPress={() => {}}>
  <Text>Rotate me!</Text>
</PressableRotate>
```

--------------------------------

### Replace Pressables with PressableScale

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/INTEGRATION_GUIDE.md

Replace standard React Native Pressable components with pressto's PressableScale for enhanced press effects. This example shows a basic navigation trigger.

```typescript
// Before
import { Pressable, Text } from 'react-native';

<Pressable onPress={() => navigate('Details')}> 
  <Text>Open Details</Text>
</Pressable>

// After
import { PressableScale, Text } from 'react-native';

<PressableScale onPress={() => navigate('Details')}> 
  <Text>Open Details</Text>
</PressableScale>
```

--------------------------------

### Run Unit Tests

Source: https://github.com/enzomanuelmangano/pressto/blob/main/CONTRIBUTING.md

Executes the unit tests for the project using Jest. All tests should pass before committing.

```sh
bun test
```

--------------------------------

### Global Analytics Handlers for Presses

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/pressables-config.md

Implement global press handlers to track events across all Pressable components. This example shows how to log button presses with associated metadata.

```typescript
import { PressablesConfig, PressableScale } from 'pressto';

<PressablesConfig
  globalHandlers={{
    onPress: ({ metadata }) => {
      // Track all button presses
      analytics.track('button_pressed', {
        name: metadata?.name,
      });
    },
  }}
  metadata={{ screen: 'home' }}
>
  <PressableScale metadata={{ name: 'submit' }}>
    <Text>Submit</Text>
  </PressableScale>

  <PressableScale metadata={{ name: 'cancel' }}>
    <Text>Cancel</Text>
  </PressableScale>
</PressablesConfig>
```

--------------------------------

### Configure ESLint with Legacy Config

Source: https://github.com/enzomanuelmangano/pressto/blob/main/eslint-plugin-pressto/README.md

Integrate eslint-plugin-pressto into your ESLint configuration using the legacy config format.

```javascript
module.exports = {
  plugins: ['pressto'],
  rules: {
    'pressto/require-worklet-directive': 'error',
  },
};
```

--------------------------------

### Incorrect Metadata Type in PressablesConfig

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/errors.md

This example demonstrates a metadata type mismatch where the provided metadata contains keys not defined in the generic type parameter for PressablesConfig, leading to a TypeScript error.

```typescript
type Theme = { primary: string };

<PressablesConfig<'timing', Theme>
  metadata={{ primary: '#FF5722', secondary: '#4CAF50' }}
  // Error: 'secondary' not in Theme
>
  ...
```

--------------------------------

### PressablesConfig

Source: https://github.com/enzomanuelmangano/pressto/blob/main/README.md

Provides global configuration for all pressable components, including animation types, default props, and shared handlers.

```APIDOC
### `PressablesConfig`

Global configuration provider.

**Props:**

- `animationType`: 'timing' | 'spring' - Default: 'timing'
- `animationConfig`: Timing/spring config object
- `config`: { activeOpacity, minScale, baseScale }
- `defaultProps`: Default props applied to all pressables (e.g., `rippleColor`, `hitSlop`)
- `globalHandlers`: { onPress, onPressIn, onPressOut } - Receive each pressable's `metadata`; opt a pressable out with `skipGlobalHandlers`
- `metadata`: Default metadata for all pressables (type-safe); overridable per component
- `activateOnHover`: boolean - Web only
```

--------------------------------

### Configure Pressables with Metadata

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/README.md

Pass arbitrary data to animations and handlers using metadata for theming and tracking without prop drilling.

```typescript
<PressablesConfig metadata={{ colors: { primary: '#FF5722' } }}>
  <PressableScale />  // Receives metadata in animatedStyle and handlers
</PressablesConfig>
```

--------------------------------

### Configure Timing Animation with Custom Easing

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/configuration.md

Allows detailed configuration for timing animations, including custom easing functions from react-native-reanimated.

```typescript
import { Easing } from 'react-native-reanimated';

<PressablesConfig
  animationType="timing"
  animationConfig={{
    duration: 300,
    easing: Easing.in(Easing.cubic),
  }}>
  <YourApp />
</PressablesConfig>
```

--------------------------------

### Simple Scale Animation with createAnimatedPressable

Source: https://github.com/enzomanuelmangano/pressto/blob/main/_autodocs/api-reference/create-animated-pressable.md

Demonstrates how to create a pressable component that scales down when pressed. Requires `react-native-reanimated` for interpolation.

```typescript
import { createAnimatedPressable } from 'pressto';
import { interpolate } from 'react-native-reanimated';

const PressableScale = createAnimatedPressable((progress, { config }) => {
  'worklet';
  return {
    transform: [
      {
        scale: interpolate(progress, [0, 1], [config.baseScale, config.minScale]),
      },
    ],
  };
});

export default function App() {
  return (
    <PressableScale onPress={() => console.log('Pressed!')}>
      <Text>Tap me</Text>
    </PressableScale>
  );
}
```

--------------------------------

### Configure ESLint with Flat Config

Source: https://github.com/enzomanuelmangano/pressto/blob/main/eslint-plugin-pressto/README.md

Integrate eslint-plugin-pressto into your ESLint configuration using the flat config format.

```javascript
const presstoPlugin = require('eslint-plugin-pressto');

module.exports = [
  {
    plugins: {
      pressto: presstoPlugin,
    },
    rules: {
      'pressto/require-worklet-directive': 'error',
    },
  },
];
```