# LottieStatusAnimation

A specialized component for displaying trade status animations.

## Import

```tsx
import { LottieStatusAnimation } from '@coinbase/cds-mobile/animation/LottieStatusAnimation'
```

## Examples

The LottieStatusAnimation component for mobile provides the same status animation functionality as the web version, optimized for React Native. It's perfect for showing trade or transaction status with smooth, engaging animations.

### Basic usage

```tsx
function BasicExample() {
  const [status, setStatus] = useState('loading');

  return (
    <VStack gap={3} alignItems="center">
      <LottieStatusAnimation status={status} height={200} width={200} />
      <HStack gap={1} flexWrap="wrap" justifyContent="center">
        <Button onClick={() => setStatus('loading')}>Loading</Button>
        <Button onClick={() => setStatus('success')}>Success</Button>
        <Button onClick={() => setStatus('failure')}>Failure</Button>
        <Button onClick={() => setStatus('pending')}>Pending</Button>
        <Button onClick={() => setStatus('cardSuccess')}>Card Success</Button>
      </HStack>
    </VStack>
  );
}
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `height` | `string \| number` | Yes | `-` | We use aspect ratio to calculate the unset dimension based on the set dimension and a given aspect ratio. Only width or height is allowed, but not both. |
| `width` | `string \| number` | Yes | `-` | We use aspect ratio to calculate the unset dimension based on the set dimension and a given aspect ratio. Only width or height is allowed, but not both. |
| `onFinish` | `(() => void)` | No | `-` | - |
| `status` | `loading \| success \| cardSuccess \| failure \| pending` | No | `loading` | - |
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |


