SlidingErrorSheet - AMiSi Mobile Starter

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

Usage

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.