### Start Metro Server for Example App

Source: https://github.com/margelo/react-native-skottie/blob/main/CONTRIBUTING.md

Use this command to start the Metro bundler for the example application. Changes to JavaScript code will be reflected without a rebuild.

```sh
yarn example start
```

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

### iOS Project Setup

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/QUICK_REFERENCE.md

Navigate to the `ios` directory, install CocoaPods dependencies, and then run the iOS application.

```bash
cd ios
pod install --repo-update
cd ..
react-native run-ios
```

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

### Enable New Architecture for iOS Example App

Source: https://github.com/margelo/react-native-skottie/blob/main/CONTRIBUTING.md

Commands to prepare and run the iOS example app with the new architecture enabled. This involves installing pods and then running the app.

```sh
RCT_NEW_ARCH_ENABLED=1 yarn example pods
yarn example ios
```

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

### Bootstrap Project Dependencies

Source: https://github.com/margelo/react-native-skottie/blob/main/CONTRIBUTING.md

This script installs all project dependencies and initializes native modules (pods) for the example app.

```sh
yarn bootstrap
```

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

### Run Example App on Android

Source: https://github.com/margelo/react-native-skottie/blob/main/CONTRIBUTING.md

Execute this command to build and run the example application on an Android device or emulator.

```sh
yarn example android
```

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

### Run Example App on iOS

Source: https://github.com/margelo/react-native-skottie/blob/main/CONTRIBUTING.md

Execute this command to build and run the example application on an iOS simulator or device.

```sh
yarn example ios
```

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

### Install react-native-skottie

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/00_START_HERE.md

Install the library and its peer dependency, @shopify/react-native-skia. Then, run pod install for iOS and build the project.

```bash
npm install react-native-skottie @shopify/react-native-skia
cd ios && pod install && cd ..
react-native run-ios  # or run-android
```

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

### Install react-native-skottie and Dependencies

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/QUICK_REFERENCE.md

Install the library and its peer dependency, @shopify/react-native-skia. After installation, navigate to the ios directory to install pods and then run the application.

```bash
npm install react-native-skottie @shopify/react-native-skia
cd ios && pod install && cd ..
react-native run-ios      # or run-android
```

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

### Install Project Dependencies

Source: https://github.com/margelo/react-native-skottie/blob/main/CONTRIBUTING.md

Run this command in the package directory to install all required dependencies for the project.

```shell
yarn
```

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

### Install iOS CocoaPods

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/configuration.md

Install the necessary pods for your iOS project after navigating to the 'ios' directory.

```bash
pod install
```

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

### Run Example App on Android with New Architecture

Source: https://github.com/margelo/react-native-skottie/blob/main/CONTRIBUTING.md

This command enables the new architecture for the Android example app during runtime. Ensure your environment is set up for the new architecture.

```sh
ORG_GRADLE_PROJECT_newArchEnabled=true yarn example android
```

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

### Install react-native-skottie using npm

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/platform-support.md

Use this command to add the react-native-skottie library to your project with npm.

```bash
npm install react-native-skottie
```

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

### Copy Skia Headers for Development

Source: https://github.com/margelo/react-native-skottie/blob/main/CONTRIBUTING.md

Execute this command to copy the Skia submodule headers into the example directory, which is necessary for development.

```shell
yarn dev:module-copy-skia-headers
```

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

### Navigation Map Example

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/00_START_HERE.md

This diagram illustrates the recommended reading order and navigation path through the documentation for React Native Skottie.

```markdown
START HERE (this file)
    ↓
QUICK_REFERENCE.md (syntax)
    ↓
api-reference/skottie-component.md (component)
    ↓
Choose your path:
  - Control with refs → api-reference/ref-api.md
  - Use Reanimated → api-reference/reanimated-integration.md
  - Load animations → api-reference/source-loading.md
  - Learn types → types.md
  - Configure → configuration.md
  - Setup platform → platform-support.md
```

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

### Install react-native-skottie using yarn

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/platform-support.md

Use this command to add the react-native-skottie library to your project with yarn.

```bash
yarn add react-native-skottie
```

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

### Install @shopify/react-native-skia dependency

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/platform-support.md

Install the Skia dependency if it's not already present in your project. This is required for react-native-skottie to function.

```bash
npm install @shopify/react-native-skia
```

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

### Full Skottie Example with Imperative and Reanimated Control

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/QUICK_REFERENCE.md

A complete example demonstrating how to use Skottie with both imperative controls (play, pause, reset) and Reanimated for animation progress. It includes switching between control methods and displaying animation details.

```typescript
import { useRef, useState, useEffect, useMemo } from 'react';
import { View, Button, Text } from 'react-native';
import { Skottie, SkottieAPI, type SkottieViewRef } from 'react-native-skottie';
import {
  useSharedValue,
  withTiming,
  withRepeat,
  Easing,
} from 'react-native-reanimated';
import animationData from './animation.json';

export default function CompleteExample() {
  const refRef = useRef<SkottieViewRef>(null);
  const [method, setMethod] = useState<'imperative' | 'reanimated'>('imperative');
  const progress = useSharedValue(0);
  const animation = useMemo(() => SkottieAPI.createFrom(animationData), []);

  useEffect(() => {
    if (method === 'reanimated') {
      progress.value = withRepeat(
        withTiming(1, { duration: animation.duration * 1000, easing: Easing.linear }),
        -1
      );
    }
  }, [method, animation.duration, progress]);

  return (
    <View style={{ flex: 1 }}>
      {method === 'imperative' ? (
        <Skottie ref={refRef} source={animationData} style={{ flex: 1 }} />
      ) : (
        <Skottie source={animation} progress={progress} style={{ flex: 1 }} />
      )}

      <View style={{ padding: 16, gap: 8 }}>
        <Button
          title="Switch to Imperative"
          onPress={() => setMethod('imperative')}
        />
        <Button
          title="Switch to Reanimated"
          onPress={() => setMethod('reanimated')}
        />
        {method === 'imperative' && (
          <>
            <Button title="Play" onPress={() => refRef.current?.play()} />
            <Button title="Pause" onPress={() => refRef.current?.pause()} />
            <Button title="Reset" onPress={() => refRef.current?.reset()} />
          </>
        )}
        <Text>Duration: {animation.duration}ms, FPS: {animation.fps}</Text>
      </View>
    </View>
  );
}
```

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

### play()

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/api-reference/ref-api.md

Starts playing the animation from its current position. It can optionally take a callback function that is invoked when the animation finishes or is cancelled.

```APIDOC
## play()

### Description
Starts playing the animation from the current progress position. If the animation is already playing, this call has no effect. It respects the `loop` prop and can accept an optional callback for completion.

### Method
`play(onAnimationFinish?: (isCancelled?: boolean) => void): void`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
#### onAnimationFinish
- **onAnimationFinish** (`(isCancelled?: boolean) => void`) - Optional - Callback function invoked when the animation finishes. `isCancelled` is true if playback was interrupted before completion. This callback overrides the component-level `onAnimationFinish` prop for this specific play session.

### Request Example
```typescript
// Simple play without callback
skottieRef.current?.play();

// Play with completion callback
skottieRef.current?.play(() => {
  console.log('Animation finished!');
});

// Play with loop detection
let playCount = 0;
skottieRef.current?.play((isCancelled) => {
  if (!isCancelled) {
    playCount++;
    console.log(`Animation loop completed: ${playCount}`);
  }
});
```

### Response
#### Success Response
Void

#### Response Example
None
```

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

### Skottie Component ResizeMode Example

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/types.md

Shows how to use the 'cover' resizeMode to make a Skottie animation fill its container.

```typescript
import { Skottie } from 'react-native-skottie';
import animationData from './animation.json';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <Skottie
        source={animationData}
        autoPlay={true}
        resizeMode="cover"
        style={{ flex: 1 }}
      />
    </View>
  );
}
```

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

### Verify New Architecture in Metro Logs

Source: https://github.com/margelo/react-native-skottie/blob/main/CONTRIBUTING.md

Check the Metro bundler logs for this output to confirm the example app is running with the new architecture enabled.

```sh
Running "SkiaSkottieExample" with {"fabric":true,"initialProps":{"concurrentRoot":true},"rootTag":1}
```

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

### Fix iOS Pod Install Failures

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/platform-support.md

Troubleshoot and resolve iOS pod installation failures by cleaning the Pods directory and reinstalling with updated repositories.

```bash
cd ios
rm -rf Pods Podfile.lock
pod install --repo-update
cd ..
react-native run-ios
```

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

### Skottie DotLottie File Support

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/api-reference/skottie-component.md

Demonstrates using the Skottie component with a DotLottie file. This example shows basic auto-play functionality with a DotLottie source. Ensure the DotLottieFile is correctly imported.

```typescript
import { Skottie } from 'react-native-skottie';
import DotLottieFile from './animation.lottie';

export default function App() {
  return (
    <Skottie
      source={DotLottieFile}
      autoPlay={true}
      style={{ flex: 1 }}
    />
  );
}
```

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

### Play Animation

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/api-reference/ref-api.md

Starts or resumes animation playback. Optionally accepts a callback for completion events. Use when direct control over playback start is needed.

```typescript
skottieRef.current?.play();
```

```typescript
skottieRef.current?.play(() => {
  console.log('Animation finished!');
});
```

```typescript
let playCount = 0;

skottieRef.current?.play((isCancelled) => {
  if (!isCancelled) {
    playCount++;
    console.log(`Animation loop completed: ${playCount}`);
  }
});
```

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

### Rebuild iOS App

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/configuration.md

Command to rebuild your iOS application after installing pods or making configuration changes.

```bash
react-native run-ios
```

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

### Pass Pre-created Skottie Instance to Skottie Component

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/api-reference/skottie-api.md

This example shows how to create a Skottie animation instance once using `useMemo` and then pass this pre-created instance to the `Skottie` component. This is useful for reusing animation instances.

```typescript
import { useMemo } from 'react';
import { Skottie, SkottieAPI } from 'react-native-skottie';
import animationData from './animation.json';

export default function App() {
  // Create the animation once and reuse it
  const animation = useMemo(
    () => SkottieAPI.createFrom(animationData),
    []
  );

  return (
    <Skottie
      source={animation}
      autoPlay={true}
      loop={true}
      style={{ flex: 1 }}
    />
  );
}
```

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

### Check Reanimated Version Compatibility

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/api-reference/reanimated-integration.md

Determine which version of Reanimated is installed in your project using the provided constants. This helps in writing version-specific logic if needed.

```typescript
import { HAS_REANIMATED2, HAS_REANIMATED3 } from 'react-native-skottie';

if (HAS_REANIMATED3) {
  console.log('Reanimated 3 is available');
} else if (HAS_REANIMATED2) {
  console.log('Reanimated 2 is available');
}
```

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

### Control Skottie Animation Playback with Reanimated

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/api-reference/skottie-api.md

This example shows how to use `SkottieAPI` with `react-native-reanimated` for fine-grained control over animation playback. It sets up a repeating animation that plays for its full duration.

```typescript
import { useEffect, useMemo } from 'react';
import { SkottieAPI, Skottie } from 'react-native-skottie';
import {
  useSharedValue,
  withTiming,
  Easing,
  withRepeat,
} from 'react-native-reanimated';
import animationData from './animation.json';

export default function ControlledAnimation() {
  const progress = useSharedValue(0);
  const animation = useMemo(
    () => SkottieAPI.createFrom(animationData),
    []
  );

  useEffect(() => {
    // Calculate duration from the animation instance
    const durationMs = animation.duration * 1000;
    
    progress.value = withRepeat(
      withTiming(1, {
        duration: durationMs,
        easing: Easing.linear,
      }),
      -1
    );
  }, [animation.duration, progress]);

  return (
    <Skottie
      source={animation}
      progress={progress}
      style={{ flex: 1 }}
    />
  );
}
```

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

### Loading DotLottie Files

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/api-reference/source-loading.md

Demonstrates how to load DotLottie files using different source types: require, string path, and SkSkottie instance.

```typescript
// As require
const dotLottie = require('./animation.lottie');

// As string path
const animationPath = './animations/animation.lottie';

// As SkSkottie instance
const animation = SkottieAPI.createFrom(require('./animation.lottie'));
```

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

### Troubleshooting Linking Issues

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/QUICK_REFERENCE.md

If you encounter 'Package doesn't seem to be linked' errors, run these commands to manually link the libraries and update pods.

```bash
react-native link react-native-skottie
react-native link @shopify/react-native-skia
cd ios && pod install && cd ..
react-native run-ios
```

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

### Reanimated Peer Dependency

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/api-reference/reanimated-integration.md

Ensure react-native-reanimated version 2.0.0 or higher is installed as a peer dependency.

```json
{
  "peerDependencies": {
    "react-native-reanimated": ">=2.0.0"
  }
}
```

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

### Import Reanimated Integration Utilities

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/DOCUMENTATION_INDEX.txt

Import utilities for integrating Skottie with Reanimated for synchronized animations.

```javascript
import {
  useSharedValue,
  startMapper,
  stopMapper,
  // ... (see reanimatedWrapper exports)
} from 'react-native-skottie'
```

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

### Basic Skottie Auto-Play

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/api-reference/skottie-component.md

Demonstrates how to use the Skottie component for basic auto-playing and looping animations. Ensure the LottieFile is correctly imported.

```typescript
import { Skottie } from 'react-native-skottie';
import LottieFile from './animation.json';

export default function App() {
  return (
    <Skottie
      source={LottieFile}
      autoPlay={true}
      loop={true}
      style={{ flex: 1 }}
    />
  );
}
```

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

### Documentation Structure Overview

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/00_START_HERE.md

This snippet shows the directory structure of the react-native-skottie documentation, helping users understand where to find specific information.

```text
/output/
├── 00_START_HERE.md              ← You are here
├── README.md                     ← Master index
├── QUICK_REFERENCE.md            ← Syntax & common patterns
├── API_OVERVIEW.md               ← Feature overview
├── DOCUMENTATION_INDEX.txt       ← Navigation guide
│
├── types.md                      ← Type definitions
├── configuration.md              ← Config options
├── platform-support.md           ← iOS/Android setup
│
└── api-reference/
    ├── skottie-component.md      ← Main component
    ├── skottie-api.md            ← Factory API
    ├── ref-api.md                ← Imperative control
    ├── reanimated-integration.md ← Reanimated patterns
    └── source-loading.md         ← Source formats

```

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

### Eased Animation with Reanimated

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/api-reference/reanimated-integration.md

Apply an easing function to the animation timing for a smoother playback experience. This example uses `Easing.ease` with `withTiming`.

```typescript
import { useEffect, useMemo } from 'react';
import { Skottie, SkottieAPI } from 'react-native-skottie';
import {
  useSharedValue,
  withTiming,
  Easing,
} from 'react-native-reanimated';
import animationData from './animation.json';

export default function EasedAnimation() {
  const progress = useSharedValue(0);
  const animation = useMemo(
    () => SkottieAPI.createFrom(animationData),
    []
  );

  useEffect(() => {
    progress.value = withTiming(1, {
      duration: animation.duration * 1000,
      easing: Easing.ease,
    });
  }, [animation.duration, progress]);

  return (
    <Skottie
      source={animation}
      progress={progress}
      style={{ flex: 1 }}
    />
  );
}
```

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

### Add React Native Reanimated Dependency

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/configuration.md

Install the react-native-reanimated library using Yarn. This is required for using the 'progress' prop with Reanimated-driven animations.

```bash
yarn add react-native-reanimated
```

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

### Run Unit Tests

Source: https://github.com/margelo/react-native-skottie/blob/main/CONTRIBUTING.md

Execute this command to run the project's unit tests using Jest.

```sh
yarn test
```

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

### Reanimated Integration for Skottie Animation

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/configuration.md

Example of integrating Skottie with react-native-reanimated to control animation progress. Ensure Reanimated is configured according to its documentation.

```typescript
import { Skottie, SkottieAPI } from 'react-native-skottie';
import {
  useSharedValue,
  withTiming,
  Easing,
  withRepeat,
} from 'react-native-reanimated';
import animationData from './animation.json';

export default function App() {
  const progress = useSharedValue(0);
  const animation = useSharedValue(() =>
    SkottieAPI.createFrom(animationData),
    []
  );

  useEffect(() => {
    progress.value = withRepeat(
      withTiming(1, {
        duration: animation.duration * 1000,
        easing: Easing.linear,
      }),
      -1
    );
  }, [animation.duration, progress]);

  return <Skottie source={animation} progress={progress} />;
}
```

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

### Lint Code with ESLint

Source: https://github.com/margelo/react-native-skottie/blob/main/CONTRIBUTING.md

Run this command to check the code for style and potential errors using ESLint.

```sh
yarn lint
```

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

### Add Proguard Rules for Release Builds

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/platform-support.md

Configure Proguard rules to prevent issues with Skia and Skottie native modules during Android release builds.

```bash
-keep class com.shopify.reactnative.skia.** { *; }
-keep class com.skiaskottie.** { *; }
```

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

### Control Skottie Animations with Reanimated

Source: https://github.com/margelo/react-native-skottie/blob/main/README.md

Drive Skottie animation progress using Reanimated shared values. Requires SkottieAPI to get animation duration.

```tsx
import { Skottie, SkottieAPI } from 'react-native-skottie';
import { useSharedValue, withTiming, Easing } from 'react-native-reanimated';

export default function App() {
  // A progress value from 0 to 1
  const progress = useSharedValue(0);

  // We need to run the animation on our own, therefor, we need to know the
  // animation's duration. We can either look that up from the lottie file,
  // or we can create the SkSkottie instance ourselves and get the duration:
  const skottieAnimation = useMemo(() => SkottieAPI.createFrom(lottieFile), []);
  const duration = skottieAnimation.duration;

  // Run the animation:
  useEffect(() => {
    // Will play the animation once …
    progress.value = withTiming(1, {
      duration: duration * 1000,
      easing: Easing.linear,
    });
    // … if you want to loop you could use withRepeat
  }, [duration]);

  return (
    <Skottie
      autoPlay={true}
      style={styles.flex1}
      source={LottieAnimationFile}
      // Pass the shared value to Skottie to drive the animation:
      progress={progress}
    />
  );
}
```

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

### Network Animation Loading

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/api-reference/source-loading.md

Demonstrates fetching Lottie animation data from a network API and rendering it using the Skottie component. Includes loading and error handling.

```typescript
import { Skottie } from 'react-native-skottie';
import { useState, useEffect } from 'react';
import { ActivityIndicator } from 'react-native';
import type { AnimationObject } from 'react-native-skottie';

export function NetworkAnimation() {
  const [animation, setAnimation] = useState<AnimationObject | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/animations/my-animation.json')
      .then(res => res.json())
      .then(data => {
        setAnimation(data);
        setLoading(false);
      })
      .catch(err => {
        console.error(err);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <ActivityIndicator />;
  }

  if (!animation) {
    return null;
  }

  return <Skottie source={animation} autoPlay={true} style={{ flex: 1 }} />;
}
```

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

### Create Skottie Animation from File Path

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/api-reference/skottie-api.md

This snippet demonstrates creating a Skottie animation instance by providing a file path string to the `createFrom` method.

```typescript
import { SkottieAPI } from 'react-native-skottie';

const animation = SkottieAPI.createFrom('./path/to/animation.json');
```

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

### Reanimated-Driven Skottie Animation with Custom Duration

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/configuration.md

Integrate with Reanimated for fully controlled animations driven by a shared value. This example sets a custom 2-second duration for the animation.

```typescript
const progress = useSharedValue(0);
const animation = SkottieAPI.createFrom(animationData);

useEffect(() => {
  progress.value = withTiming(1, {
    duration: 2000, // 2 seconds
  });
}, [progress]);

<Skottie source={animation} progress={progress} />
```

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

### Loading Skottie Animation from Different Sources

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/DOCUMENTATION_INDEX.txt

Demonstrates various ways to load animation data for the Skottie component, including imported JSON, file paths, direct objects, and SkSkottie instances.

```javascript
// Imported: import data from './animation.json'
// Path: './animations/animation.json'
// Object: { v: "5.5", fr: 30, ... }
// SkSkottie: SkottieAPI.createFrom(data)
```

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

### Publish New Version to npm

Source: https://github.com/margelo/react-native-skottie/blob/main/CONTRIBUTING.md

Run this script to automate the process of publishing a new version of the package to npm, including version bumping and tag creation.

```sh
yarn release
```

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

### Check Skottie Module Import

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/platform-support.md

Verify that the react-native-skottie native module is correctly installed and linked by attempting to import its components. If this import fails, it indicates a problem with the native module linking.

```typescript
import { Skottie, SkottieAPI } from 'react-native-skottie';

// If this fails, the native module is not linked
console.log('Skottie module loaded successfully');
```

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

### Creating and Using Animations with SkottieAPI

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/QUICK_REFERENCE.md

Demonstrates how to create a Skottie animation from various sources, access its metadata, seek to a specific progress point, and render it to a canvas.

```typescript
import { SkottieAPI } from 'react-native-skottie';

const animation = SkottieAPI.createFrom(animationData);

console.log(`Duration: ${animation.duration}ms`);
console.log(`FPS: ${animation.fps}`);
console.log(`Total frames: ${(animation.duration / 1000) * animation.fps}`);

animation.seek(0.5);

animation.render(canvas, rect);
```

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

### Spring Animation for Skottie Progress

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/api-reference/reanimated-integration.md

Applies a spring animation to the Skottie progress value. The animation starts automatically on component mount and uses configurable spring physics. Requires react-native-reanimated.

```typescript
import { useEffect, useMemo } from 'react';
import { Skottie, SkottieAPI } from 'react-native-skottie';
import {
  useSharedValue,
  withSpring,
} from 'react-native-reanimated';
import animationData from './animation.json';

export default function SpringAnimation() {
  const progress = useSharedValue(0);
  const animation = useMemo(
    () => SkottieAPI.createFrom(animationData),
    []
  );

  useEffect(() => {
    progress.value = withSpring(1, {
      damping: 10,
      mass: 1,
      stiffness: 100,
      overshootClamping: false,
      restSpeedThreshold: 0.001,
      restDisplacementThreshold: 0.001,
    });
  }, [progress]);

  return (
    <Skottie source={animation} progress={progress} style={{ flex: 1 }} />
  );
}
```

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

### Import SkottieAPI Factory

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/DOCUMENTATION_INDEX.txt

Import the SkottieAPI factory for creating animation instances.

```javascript
import { SkottieAPI } from 'react-native-skottie'
```

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

### Imperative Skottie Control with Refs

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/QUICK_REFERENCE.md

Control Skottie playback imperatively using a ref. Use `useRef` to get a reference to the SkottieViewRef and call methods like `play()`, `pause()`, or `reset()` on `ref.current`.

```typescript
const ref = useRef<SkottieViewRef>(null);

// In event handlers:
ref.current?.play();       // Start playing
ref.current?.pause();      // Pause at current position
ref.current?.reset();      // Reset to beginning

// Usage:
<Skottie ref={ref} source={animationData} />
<Button title="Play" onPress={() => ref.current?.play()} />
```

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

### Ref API (Imperative Control)

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/QUICK_REFERENCE.md

Details on how to control the Skottie animation imperatively using a ref, including methods for play, pause, and reset.

```APIDOC
## Ref API (Imperative Control)

```typescript
const ref = useRef<SkottieViewRef>(null);

// In event handlers:
ref.current?.play();       // Start playing
ref.current?.pause();      // Pause at current position
ref.current?.reset();      // Reset to beginning

// Usage:
<Skottie ref={ref} source={animationData} />
<Button title="Play" onPress={() => ref.current?.play()} />
```
```

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

### Skottie Animation Finish Callback

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/api-reference/skottie-component.md

Shows how to use the onAnimationFinish callback to execute logic when an animation completes. The callback receives an 'isCancelled' boolean. This example increments a play count when the animation finishes without being cancelled.

```typescript
import { useState } from 'react';
import { Text, View } from 'react-native';
import { Skottie } from 'react-native-skottie';
import LottieFile from './animation.json';

export default function App() {
  const [playCount, setPlayCount] = useState(0);

  return (
    <View style={{ flex: 1 }}>
      <Skottie
        source={LottieFile}
        autoPlay={true}
        loop={true}
        style={{ flex: 1 }}
        onAnimationFinish={(isCancelled) => {
          if (!isCancelled) {
            setPlayCount(prev => prev + 1);
          }
        }}
      />
      <Text>Plays: {playCount}</Text>
    </View>
  );
}
```

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

### Import Skottie Component

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/DOCUMENTATION_INDEX.txt

Import the main Skottie component from the library.

```javascript
import { Skottie } from 'react-native-skottie'
```

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

### Reanimated Worklet Integration for Animation Control

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/api-reference/reanimated-integration.md

Use Reanimated worklets and shared values to control animation progress and handle completion events. This example demonstrates setting animation duration, progress, and triggering a JavaScript callback on completion.

```typescript
import { useEffect, useMemo } from 'react';
import { Skottie, SkottieAPI } from 'react-native-skottie';
import {
  useSharedValue,
  withTiming,
  runOnJS,
} from 'react-native-reanimated';
import animationData from './animation.json';

export default function WorkletIntegration() {
  const progress = useSharedValue(0);
  const isFinished = useSharedValue(false);
  const animation = useMemo(
    () => SkottieAPI.createFrom(animationData),
    []
  );

  const onAnimationFinish = () => {
    console.log('Animation finished via worklet');
  };

  useEffect(() => {
    progress.value = withTiming(
      1,
      {
        duration: animation.duration * 1000,
      },
      (finished) => {
        if (finished) {
          isFinished.value = true;
          runOnJS(onAnimationFinish)();
        }
      }
    );
  }, [animation.duration, progress, isFinished]);

  return (
    <Skottie source={animation} progress={progress} style={{ flex: 1 }} />
  );
}
```

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

### Run Android Native Module Linking

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/configuration.md

Command to link the react-native-skottie native module for Android. This is typically done if automatic linking is not available.

```bash
react-native link react-native-skottie
```

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

### Create Skottie Animation from DotLottie URI

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/api-reference/skottie-api.md

Use this method to create a Skottie animation instance from a DotLottie file specified by a URI. It's typically used with `require()` or `import` for bundled files.

```typescript
import { SkottieAPI } from 'react-native-skottie';

// Typically used with require() or import for bundled files
const animation = SkottieAPI.createFrom(require('./animation.lottie'));
```

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

### Use SkSkottie Instance for Repeated Animations

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/QUICK_REFERENCE.md

For performance, create a SkSkottie instance using `useMemo` when an animation will be reused to avoid recreating it on every render.

```typescript
const anim = useMemo(() => SkottieAPI.createFrom(data), []);
<Skottie source={anim} />
```

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

### Clean Build Folders

Source: https://github.com/margelo/react-native-skottie/blob/main/CONTRIBUTING.md

Run this command to remove all build artifacts. This is useful when switching architectures or encountering build issues.

```sh
yarn clean
```

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

### SkottieAPI createFrom Method Signature

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/QUICK_REFERENCE.md

Details the signature for the `createFrom` method, which converts various animation sources into a native SkSkottie instance. It outlines the expected parameters and return type, along with potential errors.

```typescript
SkottieAPI.createFrom(source: SkottieViewSource): SkSkottie
```

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

### Link native modules manually

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/platform-support.md

If automatic linking fails, use these commands to manually link the native modules for react-native-skottie and its Skia dependency.

```bash
react-native link react-native-skottie
react-native link @shopify/react-native-skia
```

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

### SkottieAPI.createFrom

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/api-reference/skottie-api.md

Creates a Skottie animation instance from various sources including JSON objects, file paths, URIs, or existing SkSkottie instances. It returns a native Skottie instance with properties like duration and fps, and methods for rendering and seeking.

```APIDOC
## SkottieAPI.createFrom

### Description
Creates a Skottie animation instance from a given source.

### Method
`SkottieAPI.createFrom(source: SkottieViewSource): SkSkottie`

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- None

### Parameters
- **source** (`number | string | AnimationObject | SkSkottie`) - Required - The animation source. Can be a JSON object, file path string, URI string for DotLottie files, or an imported animation file. If an `SkSkottie` instance is passed, it is returned as-is.

### Return Type
**`SkSkottie`** - A native Skottie instance with the following properties and methods:
- **duration** (`number`) - The total duration of the animation in milliseconds.
- **fps** (`number`) - The frames per second of the animation.
- **render** (`(canvas: SkCanvas, rect: SkRect) => void`) - Render the animation at the current progress to a Skia canvas within the given rectangle.
- **seek** (`(progress: number) => void`) - Seek to a specific progress value (0-1).

### Throws
- Throws an error with message `'[react-native-skottie] Invalid src prop provided. Cant resolve asset source.'` if a numeric asset source cannot be resolved.
- Throws an error with message `'[react-native-skottie] Invalid src prop provided.'` if the source type is invalid.

### Request Example
```typescript
import { SkottieAPI } from 'react-native-skottie';
import animationData from './animation.json';

const animation = SkottieAPI.createFrom(animationData);
console.log(`Duration: ${animation.duration}ms`);
console.log(`FPS: ${animation.fps}`);
```

### Response
#### Success Response (200)
- **SkSkottie instance** with `duration`, `fps`, `render`, and `seek` members.

#### Response Example
```json
{
  "duration": 1000,
  "fps": 60,
  "render": "[Function: render]",
  "seek": "[Function: seek]"
}
```
```

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

### Imperative Control API

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/API_OVERVIEW.md

Provides programmatic control over animations using refs, allowing for direct invocation of playback methods.

```APIDOC
## Imperative Control API

### Description
Control animations programmatically via refs.

### Usage
```typescript
const skottieRef = useRef<SkottieViewRef>(null);

skottieRef.current?.play();
skottieRef.current?.pause();
skottieRef.current?.reset();
```

### Methods
- `play()` - Start playing the animation.
- `pause()` - Pause the animation at its current frame.
- `reset()` - Reset the animation to its beginning.
```

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

### Create SkSkottie Instance

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/api-reference/source-loading.md

Create a SkSkottie instance from animation data using SkottieAPI.createFrom. This instance can be passed directly to the Skottie component.

```typescript
import { Skottie, SkottieAPI } from 'react-native-skottie';
import { useMemo } from 'react';
import animationData from './animation.json';

const animation = useMemo(
  () => SkottieAPI.createFrom(animationData),
  []
);

<Skottie source={animation} autoPlay={true} />
```

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

### Basic Skottie Component with String Source

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/api-reference/source-loading.md

Use a string source to directly reference an animation file. This is useful for simple, static file loading.

```typescript
<Skottie source="./animations/animation.json" autoPlay={true} />
```

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

### DotLottie Files Animation Source

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/QUICK_REFERENCE.md

Import and use animations from DotLottie files. Ensure the file is correctly imported.

```typescript
import dotLottie from './animation.lottie';
<Skottie source={dotLottie} />
```

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

### Navigate to iOS Directory

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/configuration.md

Change the current directory to the 'ios' folder within your React Native project.

```bash
cd ios
```

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

### Basic Skottie Animation with Defaults

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/configuration.md

Use this snippet for simple, autoplaying animations that loop infinitely with a 'contain' resize mode. No manual progress control is needed.

```typescript
<Skottie source={animationData} autoPlay={true} />
```

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

### Imperative Skottie Control with Ref

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/api-reference/skottie-component.md

Shows how to control Skottie animations imperatively using a ref. This allows calling methods like play, pause, and reset on the animation instance. Requires importing SkottieViewRef for type safety.

```typescript
import { useRef } from 'react';
import { Button, View } from 'react-native';
import { Skottie, type SkottieViewRef } from 'react-native-skottie';
import LottieFile from './animation.json';

export default function App() {
  const skottieRef = useRef<SkottieViewRef>(null);

  return (
    <View style={{ flex: 1 }}>
      <Skottie
        ref={skottieRef}
        source={LottieFile}
        style={{ flex: 1 }}
      />
      <Button
        title="Play"
        onPress={() => skottieRef.current?.play()}
      />
      <Button
        title="Pause"
        onPress={() => skottieRef.current?.pause()}
      />
      <Button
        title="Reset"
        onPress={() => skottieRef.current?.reset()}
      />
    </View>
  );
}
```

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

### SkottieAPI Methods

Source: https://github.com/margelo/react-native-skottie/blob/main/README.md

Methods provided by the SkottieAPI for creating and managing Skottie instances.

```APIDOC
## SkottieAPI Methods

### Description
Methods provided by the SkottieAPI for creating and managing Skottie instances, useful for advanced control with libraries like reanimated.

### Methods

| Method name           | Description                                                          |
|-----------------------|----------------------------------------------------------------------|
| SkottieAPI.createFrom | Creates a Skottie instance from a source (string, json, file import) |
```

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

### Check Gradle Dependency Tree

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/platform-support.md

Inspect the Gradle dependency tree to identify version conflicts with other libraries in your Android project.

```bash
./gradlew app:dependencies
```

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

### Dynamically Loading Skottie Animation from Document Directory

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/api-reference/source-loading.md

Load animations dynamically from the app's document directory using a state variable for the path. This is ideal for runtime-downloaded or user-selected animations.

```typescript
import { Skottie } from 'react-native-skottie';
import { documentDirectoryPath } from 'react-native-fs';
import { useState, useEffect } from 'react';

export function DynamicAnimation({ animationName }: { animationName: string }) {
  const [animationPath, setAnimationPath] = useState<string>('');

  useEffect(() => {
    const path = `${documentDirectoryPath}/animations/${animationName}.json`;
    setAnimationPath(path);
  }, [animationName]);

  if (!animationPath) {
    return null;
  }

  return (
    <Skottie
      source={animationPath}
      autoPlay={true}
      style={{ flex: 1 }}
    />
  );
}
```

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

### Skottie Component with Pre-created SkSkottie Instance

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/types.md

Use this snippet when providing a pre-created SkSkottie instance, typically generated by SkottieAPI.createFrom(), as the source for the Skottie component. This is useful for performance optimizations or when managing animation instances manually. Ensures the animation is automatically played.

```typescript
import { useMemo } from 'react';
import { Skottie, SkottieAPI } from 'react-native-skottie';
import animationData from './animation.json';

const MyComponent = () => {
  const animation = useMemo(
    () => SkottieAPI.createFrom(animationData),
    []
  );

  return <Skottie source={animation} autoPlay={true} />;
};

```

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

### Query Skottie Animation Metadata Before Rendering

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/api-reference/skottie-api.md

This snippet demonstrates how to query animation metadata such as duration and FPS before rendering the animation. It creates an animation instance and extracts its properties.

```typescript
import { useMemo, useEffect } from 'react';
import { Text, View } from 'react-native';
import { SkottieAPI } from 'react-native-skottie';
import animationData from './animation.json';

export default function AnimationInfo() {
  const [info, setInfo] = useMemo(() => {
    const anim = SkottieAPI.createFrom(animationData);
    return {
      duration: anim.duration,
      fps: anim.fps,
      animationInstance: anim,
    };
  }, []);

  return (
    <View>
      <Text>Duration: {info.duration}ms</Text>
      <Text>FPS: {info.fps}</Text>
      <Text>Estimated total frames: {(info.duration / 1000) * info.fps}</Text>
    </View>
  );
}
```

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

### Rebuild Android App

Source: https://github.com/margelo/react-native-skottie/blob/main/_autodocs/configuration.md

Command to rebuild your Android application after making configuration changes or linking native modules.

```bash
react-native run-android
```