> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mobile-starter.amisi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# SlidingErrorSheet

> Present an animated bottom error action that supports swipe dismissal

export const LocalUiPlayground = ({component, title, height = 640}) => {
  const [playgroundUrl, setPlaygroundUrl] = useState(null);
  useEffect(() => {
    const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
    setPlaygroundUrl(isLocal ? 'http://localhost:8090/' : 'https://selcouthdigital.github.io/amisi-mobile-starter/');
  }, []);
  if (!playgroundUrl) {
    return null;
  }
  return <div className="not-prose my-6 overflow-hidden rounded-xl border border-zinc-950/10 bg-white dark:border-white/10 dark:bg-zinc-950">
      <iframe src={`${playgroundUrl}?component=${component}`} title={title} className="block w-full" style={{
    height
  }} loading="lazy" />
    </div>;
};

`SlidingErrorSheet` animates from the bottom of its positioned parent. Wrap your app in the gesture-handler root required by React Native Gesture Handler.

<LocalUiPlayground component="sliding-error-sheet" title="Interactive SlidingErrorSheet example" />

## Usage

```tsx theme={null}
import { useState } from 'react';

import { Button, SlidingErrorSheet, View } from '@amisi-mobile-starter/ui';

export const RetryPanel = () => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <View className="flex-1">
      <Button onPress={() => setIsVisible(true)}>Show error</Button>
      <SlidingErrorSheet
        title="Could not sync"
        description="Check your connection and try again."
        actionLabel="Retry"
        isVisible={isVisible}
        onAction={() => setIsVisible(false)}
        onClose={() => setIsVisible(false)}
      />
    </View>
  );
};
```

## Props

| Prop          | Type         | Default     | Description                                                              |
| ------------- | ------------ | ----------- | ------------------------------------------------------------------------ |
| `title`       | `string`     | Required    | Sheet heading.                                                           |
| `description` | `string`     | Required    | Error details.                                                           |
| `actionLabel` | `string`     | Required    | Action button label.                                                     |
| `isVisible`   | `boolean`    | Required    | Controls the entrance and exit animations and pointer events.            |
| `onClose`     | `() => void` | Required    | Runs after a downward dismissal gesture.                                 |
| `onAction`    | `() => void` | `undefined` | Runs when the action is pressed. Without it, the action calls `onClose`. |

The sheet dismisses after more than 72 points of downward travel or more than 900 points per second of downward velocity.