### Start Example App Packager

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/CONTRIBUTING.md

Starts the Metro server for the example application. This is necessary to run the example app on devices or simulators.

```sh
yarn example start
```

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

### Start Development Server

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/README.md

Starts the local development server for the website.

```bash
yarn run dev
```

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

### Run Example App on Web

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/CONTRIBUTING.md

Builds and runs the example application on the web platform.

```sh
yarn example web
```

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

### Basic Usage Example

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/getting-started/quick-start.mdx

Demonstrates how to integrate GestureViewer for displaying and interacting with a list of images. Includes modal presentation, image rendering, and controller hooks for navigation and state management. Ensure react-native-reanimated and react-native-gesture-handler are installed.

```tsx
import { useCallback, useState } from 'react';
import { ScrollView, Image, Modal, View, Text, Button, Pressable } from 'react-native';
import {
  GestureViewer,
  GestureTrigger,
  useGestureViewerController,
  useGestureViewerEvent,
  useGestureViewerState,
} from 'react-native-gesture-image-viewer';

function App() {
  const images = [...];
  const [visible, setVisible] = useState(false);
  const [selectedIndex, setSelectedIndex] = useState(0);

  const { goToIndex, goToPrevious, goToNext } = useGestureViewerController();

  const { currentIndex, totalCount } = useGestureViewerState();

  const openModal = (index: number) => {
    setSelectedIndex(index);
    setVisible(true);
  };

  const renderImage = useCallback((imageUrl: string) => {
    return <Image source={{ uri: imageUrl }} style={{ width: '100%', height: '100%' }} resizeMode="contain" />;
  }, []);

  useGestureViewerEvent('zoomChange', (data) => {
    console.log(`Zoom changed from ${data.previousScale} to ${data.scale}`);
  });

  return (
    <View>
      {images.map((uri, index) => (
        <GestureTrigger key={uri} onPress={() => openModal(index)}>
          <Pressable>
            <Image source={{ uri }} />
          </Pressable>
        </GestureTrigger>
      ))}
      <Modal transparent visible={visible}>
        <GestureViewer
          data={images}
          initialIndex={selectedIndex}
          renderItem={renderImage}
          ListComponent={ScrollView}
          onDismiss={() => setVisible(false)}
        />
        <View>
          <Button title="Prev" onPress={goToPrevious} />
          <Button title="Jump to index 2" onPress={() => goToIndex(2)} />
          <Button title="Next" onPress={goToNext} />
          <Text>{`${currentIndex + 1} / ${totalCount}`}</Text>
        </View>
      </Modal>
    </View>
  );
}

```

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

### Run Example App on iOS

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/CONTRIBUTING.md

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

```sh
yarn example ios
```

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

### Install Dependencies

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/README.md

Installs the necessary project dependencies using yarn.

```bash
yarn install
```

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

### Run Example App on Android

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/CONTRIBUTING.md

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

```sh
yarn example android
```

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

### Complete Example with Dismiss Handling

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/trigger-based-animations.mdx

A comprehensive example demonstrating the use of `onDismissStart`, `onDismiss`, and `renderContainer` with its `dismiss` method for managing viewer dismissal.

```tsx
function ImageViewer() {
  const [visible, setVisible] = useState(false);
  const [showUI, setShowUI] = useState(true);

  return (
    <Modal visible={visible} transparent>
      <GestureViewer
        onDismissStart={() => setShowUI(false)}
        onDismiss={() => setVisible(false)}
        renderContainer={(children, { dismiss }) => (
          <View>
            {children}
            {showUI && (
              <View>
                <Button onPress={dismiss} title="Close" />
              </View>
            )}
          </View>
        )}
      />
    </Modal>
  );
}
```

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

### Install React Native Gesture Image Viewer

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/getting-started/installation.mdx

Finally, install the react-native-gesture-image-viewer package using your preferred package manager. This command installs the main library after its dependencies are met.

```bash
npx react-native-gesture-image-viewer install
```

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

### Install Project Dependencies

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/CONTRIBUTING.md

Run this command in the root directory to install all project dependencies using Yarn workspaces.

```sh
yarn
```

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

### Install React Native Worklets

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/getting-started/installation.mdx

Install the react-native-worklets package separately, as it has been modularized from react-native-reanimated. This is necessary for Reanimated v4.

```bash
npx react-native-worklets install
```

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

### Install React Native Reanimated

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/getting-started/installation.mdx

Use this command to install the React Native Reanimated package. Ensure you are using Reanimated v4 or higher for compatibility with version 2.x of this library.

```bash
npx react-native-reanimated install
```

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

### Install React Native Gesture Handler

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/getting-started/installation.mdx

Install the react-native-gesture-handler package. This library is a core dependency for gesture interactions in react-native-gesture-image-viewer.

```bash
npx react-native-gesture-handler install
```

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

### Handling Dismissal Start with onDismissStart

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/trigger-based-animations.mdx

Use the `onDismissStart` callback to hide UI elements immediately when the dismiss animation begins. This is useful for elements that should disappear before the animation completes.

```tsx
function App() {
  const [visible, setVisible] = useState(false);
  const [showExternalUI, setShowExternalUI] = useState(false); // [!code highlight]

  // [!code highlight:3]
  const handleDismissStart = () => {
    setShowExternalUI(false);
  };

  return (
    <Modal visible={visible} transparent>
      <GestureViewer
        onDismissStart={handleDismissStart} // [!code highlight]
        {...modalProps}
      />
      // [!code highlight:5]
      {showExternalUI && (
        <View>
          <Text>{`${currentIndex + 1} / ${totalCount}`}</Text>
        </View>
      )}
    </Modal>
  );
}
```

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

### Controlling GestureViewer Programmatically

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/programmatic-control.mdx

Use the `useGestureViewerController` hook to get functions for controlling the `GestureViewer`. This snippet demonstrates how to implement zoom, reset, rotate, and navigation controls.

```tsx
import { GestureViewer, useGestureViewerController } from 'react-native-gesture-image-viewer';

function App() {
  const { goToIndex, goToPrevious, goToNext, zoomIn, zoomOut, resetZoom, rotate } = 
    useGestureViewerController();

  return (
    <View>
      <GestureViewer data={images} renderItem={renderImage} />
      {/* Zoom Controls & Rotation Controls */}
      <View>
        <Button title="Zoom In" onPress={() => zoomIn(0.25)} />
        <Button title="Zoom Out" onPress={() => zoomOut(0.25)} />
        <Button 
          title="Reset"
          onPress={() => {
            rotate(0);
            resetZoom();
          }}
        />
        <Button title="Rotate Clockwise" onPress={() => rotate(90)} />
        <Button title="Rotate Counter Clockwise" onPress={() => rotate(90, false)} />
      </View>
      {/* Navigation Controls */}
      <View>
        <Button title="Prev" onPress={goToPrevious} />
        <Button title="Jump to index 2" onPress={() => goToIndex(2)} />
        <Button title="Next" onPress={goToNext} />
      </View>
    </View>
  );
}
```

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

### Build for Production

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/README.md

Builds the website for production deployment.

```bash
yarn run build
```

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

### Preview Production Build

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/README.md

Locally previews the production build of the website.

```bash
yarn run preview
```

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

### llms-full.txt for Complete AI Documentation

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/getting-started/ai.mdx

This file concatenates the complete documentation for the current version, allowing AI to have a broader understanding without following individual links. It consumes more tokens.

```txt
https://react-native-gesture-image-viewer.pages.dev/llms-full.txt
```

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

### GestureTrigger with TouchableOpacity Child

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/trigger-based-animations.mdx

Example of using GestureTrigger with a TouchableOpacity as its child component. The GestureTrigger will inject the press handler.

```tsx
// Using TouchableOpacity
<GestureTrigger onPress={handlePress}>
  <TouchableOpacity>
    <Text>View Image</Text>
  </TouchableOpacity>
</GestureTrigger>
```

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

### Prebuild Expo Project for Reanimated

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/getting-started/installation.mdx

If using Expo, run this command to prebuild your project and update native code, which is necessary for Reanimated 4 to function correctly, especially with Expo SDK 54 (beta).

```bash
npx expo prebuild
```

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

### Accessing GestureViewer State with useGestureViewerState

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/gesture-viewer-state.mdx

Use the `useGestureViewerState` hook to get the `currentIndex` and `totalCount` from a GestureViewer instance. This hook requires the `GestureViewer` component to be rendered in the tree.

```tsx
import { GestureViewer, useGestureViewerState } from 'react-native-gesture-image-viewer';

function App() {
  const { currentIndex, totalCount } = useGestureViewerState();

  return (
    <View>
      <GestureViewer data={images} renderItem={renderImage} />
      <View>
        <Text>{`${currentIndex + 1} / ${totalCount}`}</Text>
      </View>
    </View>
  );
}
```

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

### enableLoop

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/gesture-viewer-props.mdx

Enables loop mode. When true, navigating next from the last item goes to the first item, and navigating previous from the first item goes to the last item. Defaults to false.

```APIDOC
## enableLoop

### Description
Enables loop mode. When `true`, navigating next from the last item goes to the first item, and navigating previous from the first item goes to the last item.

### Default Value
`false`

### Usage Example
```tsx
<GestureViewer
  enableLoop={true}
/>
```
```

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

### llms.txt for AI Documentation Index

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/getting-started/ai.mdx

This file serves as a structured index for AI to discover specific documentation pages on demand. It is smaller and consumes fewer tokens.

```txt
https://react-native-gesture-image-viewer.pages.dev/llms.txt
```

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

### Use FlashList for handling many images

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/performance-optimization-tips.mdx

When dealing with a large number of images, consider using `FlashList` from `@shopify/flash-list`. `FlashList` is a performant alternative to `ScrollView` and `FlatList`, optimized for rendering long lists efficiently.

```tsx
import { useCallback, useState } from 'react';
import { Image, Modal } from 'react-native';
import { GestureViewer } from 'react-native-gesture-image-viewer';
import { FlashList } from '@shopify/flash-list'; 

function App() {
  const images = [...];
  const [visible, setVisible] = useState(false);

  const renderImage = useCallback((imageUrl: string) => {
    return <Image source={{ uri: imageUrl }} style={{ width: '100%', height: '100%' }} resizeMode="contain" />;
  }, []);

  return (
    <Modal visible={visible} onRequestClose={() => setVisible(false)}>
      <GestureViewer
        data={images}
        renderItem={renderImage}
        ListComponent={FlashList} 
        onDismiss={() => setVisible(false)}
      />
    </Modal>
  );
}
```

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

### Run Unit Tests

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/CONTRIBUTING.md

Executes the unit tests for the project using Jest.

```sh
yarn test
```

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

### Lint Project Files

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/CONTRIBUTING.md

Runs ESLint to check for code style and potential errors in the project files.

```sh
yarn lint
```

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

### GestureTrigger and GestureViewer Integration

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/trigger-based-animations.mdx

Demonstrates how to use GestureTrigger to wrap gallery items and GestureViewer for modal display with trigger animations. Ensure the 'id' prop matches between GestureTrigger and GestureViewer.

```tsx
import { GestureTrigger, GestureViewer } from 'react-native-gesture-image-viewer';

function Gallery() {
  const [visible, setVisible] = useState(false);
  const [selectedIndex, setSelectedIndex] = useState(0);

  const openModal = (index: number) => {
    setSelectedIndex(index);
    setVisible(true);
  };

  return (
    <View>
      {/* Gallery Grid */}
      {images.map((uri, index) => (
        <GestureTrigger key={uri} id="gallery" index={index} onPress={() => openModal(index)}>
          <Pressable>
            <Image source={{ uri }} />
          </Pressable>
        </GestureTrigger>
      ))}

      {/* Modal */}
      <Modal visible={visible} transparent>
        <GestureViewer
          id="gallery"
          data={images}
          initialIndex={selectedIndex}
          renderItem={renderImage}
          onDismiss={() => setVisible(false)}
          triggerAnimation={{
            duration: 300,
            easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
            onAnimationComplete: () => console.log('Animation finished!'),
          }}
        />
      </Modal>
    </View>
  );
}
```

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

### Customizing GestureViewer Styles

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/style-customization.mdx

Demonstrates how to apply custom styles to the GestureViewer component, including container and backdrop styles, and how to render a custom container.

```tsx
import { GestureViewer } from 'react-native-gesture-image-viewer';

function App() {
  return (
    <GestureViewer
      width={400}
      height={400}
      containerStyle={
        {
          /* ... */
        }
      }
      backdropStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.90)' }}
      renderContainer={(children, { dismiss }) => <View style={{ flex: 1 }}>{children}</View>}
    />
  );
}
```

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

### Verify New Architecture Confirmation

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/CONTRIBUTING.md

Check Metro logs for this message to confirm the app is running with the new architecture (Fabric and concurrentRoot).

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

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

### Configuring Gesture Features

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/gesture-features.mdx

Demonstrates how to enable and configure various gesture features like dismiss, horizontal swipe, pinch zoom, double-tap zoom, and pan when zoomed within the GestureViewer component.

```tsx
import { GestureViewer } from 'react-native-gesture-image-viewer';

function App() {
  return (
    <GestureViewer
      data={images}
      renderItem={renderImage}
      dismiss={{
        enabled: true,
        direction: 'down',
        threshold: 80,
        resistance: 2,
        fadeBackdrop: true,
      }}
      enableHorizontalSwipe={true}
      enablePinchZoom={true}
      enableDoubleTapZoom={true}
      enablePanWhenZoomed={true}
    />
  );
}
```

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

### Managing Multiple GestureViewer Instances

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/multi-instance-management.mdx

This snippet demonstrates how to initialize and control two separate GestureViewer instances using unique IDs. It shows how to use hooks like useGestureViewerController, useGestureViewerState, and useGestureViewerEvent for each instance independently. This approach is useful when you need to display and manage multiple image galleries simultaneously.

```tsx
import {
  GestureViewer,
  GestureTrigger,
  useGestureViewerController,
  useGestureViewerEvent,
  useGestureViewerState,
} from 'react-native-gesture-image-viewer';

const firstViewerId = 'firstViewerId';
const secondViewerId = 'secondViewerId';

function App() {
  const { goToIndex: goToFirstIndex } = useGestureViewerController(firstViewerId);
  const { goToIndex: goToSecondIndex } = useGestureViewerController(secondViewerId);

  const { currentIndex: firstCurrentIndex } = useGestureViewerState(firstViewerId);
  const { currentIndex: secondCurrentIndex } = useGestureViewerState(secondViewerId);

  useGestureViewerEvent(firstViewerId, 'zoomChange', (data) => {
    console.log(`Gallery zoom: ${data.scale}x`);
  });

  useGestureViewerEvent(secondViewerId, 'zoomChange', (data) => {
    console.log(`Gallery zoom: ${data.scale}x`);
  });

  return (
    <View>
      <GestureTrigger id={firstViewerId}>
        <Pressable>
          <Image source={{ uri }} />
        </Pressable>
      </GestureTrigger>
      <GestureViewer id={firstViewerId} data={images} renderItem={renderImage} />
      <Button title="Go to index 2 (first)" onPress={() => goToFirstIndex(2)} />
      <GestureTrigger id={secondViewerId}>
        <Pressable>
          <Image source={{ uri }} />
        </Pressable>
      </GestureTrigger>
      <GestureViewer id={secondViewerId} data={images} renderItem={renderImage} />
      <Button title="Go to index 0 (second)" onPress={() => goToSecondIndex(0)} />
    </View>
  );
}
```

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

### Markdown Documentation for Specific Features

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/getting-started/ai.mdx

Individual Markdown files can be passed directly to AI for help with specific features. Providing a single page is often the most efficient option.

```markdown
https://react-native-gesture-image-viewer.pages.dev/guide/getting-started/overview.md
```

```markdown
https://react-native-gesture-image-viewer.pages.dev/guide/getting-started/quick-start.md
```

```markdown
https://react-native-gesture-image-viewer.pages.dev/guide/usage/programmatic-control.md
```

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

### Enable Loop Mode in GestureViewer

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/gesture-viewer-props.mdx

Use enableLoop to allow navigation from the last item to the first and vice versa. Defaults to false.

```tsx
import { GestureViewer } from 'react-native-gesture-image-viewer';

function App() {
  return (
    <GestureViewer
      enableLoop={true} // [!code highlight] 
    />
  );
}
```

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

### initialIndex

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/gesture-viewer-props.mdx

Sets the initial index value. Defaults to 0.

```APIDOC
## initialIndex

### Description
Sets the initial index value.

### Default Value
`0`
```

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

### Basic GestureViewer Integration

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/basic-usage.mdx

Renders a modal with GestureViewer to display a list of images. Requires ScrollView as the list component and a renderItem function to display each image.

```tsx
import { ScrollView, Image, Modal } from 'react-native';
import { GestureViewer } from 'react-native-gesture-image-viewer';

function App() {
  const images = [...];
  const [visible, setVisible] = useState(false);

  const renderImage = useCallback((imageUrl: string) => {
    return <Image source={{ uri: imageUrl }} style={{ width: '100%', height: '100%' }} resizeMode="contain" />;
  }, []);

  return (
    <Modal visible={visible} onRequestClose={() => setVisible(false)}>
      <GestureViewer
        data={images}
        renderItem={renderImage}
        ListComponent={ScrollView}
        onDismiss={() => setVisible(false)}
      />
    </Modal>
  );
}
```

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

### Typecheck Project Files

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/CONTRIBUTING.md

Runs TypeScript to check for type errors across the project files.

```sh
yarn typecheck
```

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

### Dismiss Behavior with Trigger Animation Logging

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/trigger-based-animations.mdx

Illustrates the dismiss animation behavior with trigger targeting, including logging messages for `onDismissStart` and `onDismiss` callbacks to track the animation lifecycle.

```tsx
<GestureViewer
  onDismissStart={() => {
    console.log('Dismiss animation started');
    setShowUI(false);
  }}
  onDismiss={() => {
    console.log('Dismiss animation complete');
    setVisible(false);
  }}
/>
```

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

### onSingleTap

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/gesture-viewer-props.mdx

Runs when the viewer confirms a single tap. This is useful for toggling viewer chrome such as headers, footers, captions, and action buttons without overlaying another pressable on top of the viewer. Does not fire for swipe, pinch, dismiss, or double-tap zoom gestures.

```APIDOC
## onSingleTap

### Description
Callback function that runs when the viewer confirms a single tap. This is useful for toggling viewer chrome such as headers, footers, captions, and action buttons without overlaying another pressable on top of the viewer. May resolve slightly later when double-tap zoom is enabled because the viewer waits to confirm it is not a double tap. Does not fire for swipe, pinch, dismiss, or double-tap zoom gestures.

### Usage Example
```tsx
<GestureViewer
  data={images}
  renderItem={renderImage}
  onSingleTap={() => setShowControls((prev) => !prev)}
/>
```
```

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

### Using a Custom List Component with GestureViewer

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/custom-components.mdx

Utilize the `ListComponent` prop to integrate custom list components like FlashList. The `listProps` prop provides type inference for autocompletion.

```tsx
import { FlashList } from '@shopify/flash-list';

function App() {
  return (
    <GestureViewer
      data={images}
      ListComponent={FlashList}
      listProps={
        {
          // ✅ FlashList props autocompletion
        }
      }
    />
  );
}
```

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

### Multiple GestureTrigger Instances with Unique IDs

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/trigger-based-animations.mdx

Shows how to use multiple GestureTrigger instances for different galleries (e.g., photos and videos) by assigning unique 'id' props. This allows independent animation management.

```tsx
// Photo gallery triggers
<GestureTrigger id="photos" index={index} onPress={() => openPhotoModal(index)}>
  <Image source={photo} />
</GestureTrigger>

// Video gallery triggers
<GestureTrigger id="videos" index={index} onPress={() => openVideoModal(index)}>
  <Video source={video} />
</GestureTrigger>
```

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

### Update Gesture Viewer Controller Imports and Usage

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/migration-from-1.x.mdx

Replace `GestureViewerControllerState` with `GestureViewerState` and use `useGestureViewerState` hook instead of `useGestureViewerController` for `currentIndex` and `totalCount`.

```diff
import {
  GestureViewer,
- GestureViewerControllerState,
+ GestureViewerState
  useGestureViewerController,
  useGestureViewerEvent,
+ useGestureViewerState,
} from 'react-native-gesture-image-viewer';

const {
  goToIndex, goToPrevious, goToNext, zoomIn, zoomOut, resetZoom, rotate,
- currentIndex, totalCount
} = useGestureViewerController();

+ const { currentIndex, totalCount } = useGestureViewerState();
```

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

### Enable Auto Play in GestureViewer

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/gesture-viewer-props.mdx

Activate autoPlay to have the viewer automatically advance to the next item after a set interval. Defaults to false.

```tsx
import { GestureViewer } from 'react-native-gesture-image-viewer';

function App() {
  return (
    <GestureViewer
      // [!code highlight]
      autoPlay={true}
    />
  );
}
```

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

### enableSnapMode

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/gesture-viewer-props.mdx

Enables snap scrolling mode. When false (default), it uses paging mode. When true, snapToInterval is auto-calculated based on width and itemSpacing. Defaults to false.

```APIDOC
## enableSnapMode

### Description
Enables snap scrolling mode. When `false` (default), it uses paging mode (`pagingEnabled: true`). When `true`, `snapToInterval` is automatically calculated based on `width` and `itemSpacing` values. Use this option when you need item spacing.

### Default Value
`false`

### Usage Example
```tsx
<GestureViewer
  data={data}
  renderItem={renderItem}
  enableSnapMode={true}
/>
```
```

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

### Using a Custom Modal Component

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/custom-components.mdx

Integrate GestureViewer with a custom modal component. Ensure the modal's visibility and dismissal logic are correctly handled.

```tsx
import { FlatList, Image, Modal } from 'react-native';
import { GestureViewer } from 'react-native-gesture-image-viewer';

function App() {
  const images = [...];
  const [visible, setVisible] = useState(false);

  return (
    <Modal visible={visible} onRequestClose={() => setVisible(false)}>
      <GestureViewer
        data={images}
        renderItem={renderImage}
        ListComponent={FlatList}
        onDismiss={() => setVisible(false)}
      />
    </Modal>
  );
}
```

```tsx
import { FlatList, Image } from 'react-native';
import Modal from 'react-native-modal';
import { GestureViewer } from 'react-native-gesture-image-viewer';

function App() {
  const images = [...];
  const [visible, setVisible] = useState(false);

  return (
    <Modal
      isVisible={visible}
      onBackButtonPress={() => setVisible(false)}
      onBackdropPress={() => setVisible(false)}
      hasBackdrop={false}
      style={styles.modal}
      useNativeDriver={true}
      hideModalContentWhileAnimating={true}
      animationInTiming={300}
      animationOutTiming={300}
    >
      <GestureViewer
        data={images}
        renderItem={renderImage}
        ListComponent={FlatList}
        onDismiss={() => setVisible(false)}
      />
    </Modal>
  );
}
```

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

### itemSpacing

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/gesture-viewer-props.mdx

Sets the spacing between items in pixels. Only applied when enableSnapMode is true. Defaults to 0.

```APIDOC
## itemSpacing

### Description
Sets the spacing between items in pixels. Only applied when `enableSnapMode` is `true`.

### Default Value
`0`

### Usage Example
```tsx
<GestureViewer
  data={data}
  renderItem={renderItem}
  enableSnapMode={true}
  itemSpacing={16} // 16px spacing between items
/>
```
```

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

### GestureViewer Animation Configuration

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/trigger-based-animations.mdx

Customizes the trigger animation behavior for modal transitions using the 'triggerAnimation' prop. Supports duration, easing, reduce motion, and completion callbacks.

```tsx
import { ReduceMotion, Easing } from 'react-native-reanimated';

function App() {
  return (
    <GestureViewer
      triggerAnimation={{
        duration: 400, // Animation duration in ms
        easing: Easing.bezier(0.25, 0.1, 0.25, 1.0), // Custom easing function
        reduceMotion: ReduceMotion.System, // Respect system reduce motion
        onAnimationComplete: () => {
          // Callback when animation finishes
          console.log('Modal animation completed');
        },
      }}
    />
  );
}
```

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

### GestureViewerProps Interface

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/gesture-viewer-props.mdx

This section details the properties available for the GestureViewer component, allowing for fine-grained control over gesture interactions and visual feedback.

```APIDOC
## GestureViewerProps Interface

This interface defines the configurable properties for the `GestureViewer` component.

### Properties

- **`threshold`** (number) - Optional - Controls when `onDismiss` is called by applying a threshold value during vertical gestures. Defaults to 80.
- **`resistance`** (number) - Optional - Controls the range of vertical movement by applying resistance during dismiss gestures. Defaults to 2.
- **`fadeBackdrop`** (boolean) - Optional - Controls whether the background opacity gradually decreases during vertical drag gestures. When `false`, this animation is disabled. Defaults to `true`.
- **`enableHorizontalSwipe`** (boolean) - Optional - Controls left/right swipe gestures. When `false`, horizontal gestures are disabled. Defaults to `true`.
- **`enablePanWhenZoomed`** (boolean) - Optional - Only works when zoom is active, allows moving item position when zoomed. When `false`, gesture movement is disabled during zoom. Defaults to `true`.
- **`enablePinchZoom`** (boolean) - Optional - Controls two-finger pinch gestures. When `false`, two-finger zoom gestures are disabled. Defaults to `true`.
- **`enableDoubleTapZoom`** (boolean) - Optional - Controls double-tap zoom gestures. When `false`, double-tap zoom gestures are disabled. Defaults to `true`.
- **`enableLoop`** (boolean) - Optional - Enables infinite loop navigation. Defaults to `false`.
- **`enableSnapMode`** (boolean) - Optional - Enables snap scrolling mode. When `false` (default), it uses paging mode. When `true`, `snapToInterval` is automatically calculated based on `width` and `itemSpacing`.
- **`itemSpacing`** (number) - Optional - The spacing between items in pixels. Only applied when `enableSnapMode` is `true`. Defaults to 0.
- **`maxZoomScale`** (number) - Optional - The maximum zoom scale. Defaults to 2.
- **`triggerAnimation`** (TriggerAnimationConfig) - Optional - Trigger-based animation settings. Allows customization of animation duration, easing, and system reduce-motion behavior.

#### Example Usage for `triggerAnimation`

```tsx
<GestureViewer
  triggerAnimation={{
    duration: 250,
    easing: Easing.out(Easing.cubic),
    reduceMotion: 'system',
    onAnimationComplete: () => {
      console.log('Animation complete');
    },
  }}
/>
```
```

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

### autoPlayInterval

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/gesture-viewer-props.mdx

Sets the interval between auto play in milliseconds. Defaults to 3000. Must be a positive integer. Values below 250ms are clamped to 250ms at runtime.

```APIDOC
## autoPlayInterval

### Description
Sets the interval between auto play in milliseconds. Must be a positive integer. Values below 250ms are clamped to 250ms at runtime.

### Default Value
`3000`

### Usage Example
```tsx
<GestureViewer
  autoPlay={true}
  autoPlayInterval={3000}
/>
```
```

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

### GestureTrigger for Seamless Transitions

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/basic-usage.mdx

Implements trigger-based animations using GestureTrigger to create smooth transitions from thumbnail elements to the full modal view, enhancing visual continuity.

```tsx
import { GestureTrigger, GestureViewer } from 'react-native-gesture-image-viewer';

function App() {
  const [visible, setVisible] = useState(false);

  return (
    <View>
      <GestureTrigger onPress={() => setVisible(true)}>
        <Pressable>
          <Image source={{ uri }} />
        </Pressable>
      </GestureTrigger>
      <GestureViewer data={images} renderItem={renderImage} onDismiss={() => setVisible(false)} />
    </View>
  );
}
```

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

### TriggerAnimation Configuration Interface

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/trigger-based-animations.mdx

Defines the configuration options for trigger animations, including duration, easing function, reduce motion preference, and a completion callback.

```typescript
interface TriggerAnimationConfig {
  duration?: number; // Animation duration in milliseconds
  easing?: EasingFunction; // Custom easing function
  reduceMotion?: boolean; // Respect system reduce motion preference
  onAnimationComplete?: () => void; // Callback fired when animation completes
}
```

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

### Fix Formatting Errors

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/CONTRIBUTING.md

Runs ESLint with the --fix flag to automatically correct formatting issues in the project files.

```sh
yarn lint --fix
```

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

### autoPlay

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/gesture-viewer-props.mdx

Enables auto play mode. When true, the viewer will automatically play the next item after the specified interval. Defaults to false.

```APIDOC
## autoPlay

### Description
Enables auto play mode. When `true`, the viewer will automatically play the next item after the specified interval. When `enableLoop` is enabled, the viewer will loop back to the first item after the last item. When `enableLoop` is disabled, the viewer will stop at the last item. When there is only one item, auto-play is disabled. When zoom or rotate gestures are detected, the auto-play will be paused.

### Default Value
`false`

### Usage Example
```tsx
<GestureViewer
  autoPlay={true}
/>
```
```

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

### Enable Snap Mode in GestureViewer

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/gesture-viewer-props.mdx

Set enableSnapMode to true to activate snap scrolling. This mode automatically calculates snapToInterval based on width and itemSpacing, useful when item spacing is needed. Defaults to false.

```tsx
import { GestureViewer } from 'react-native-gesture-image-viewer';

function App() {
  return (
    <GestureViewer
      data={data}
      renderItem={renderItem}
      enableSnapMode={true} // [!code highlight] 
    />
  );
}
```

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

### Handle Single Tap in GestureViewer

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/gesture-viewer-props.mdx

Use onSingleTap to execute a function when a single tap is confirmed. This is useful for toggling UI elements like headers or footers. Note that it may resolve slightly later if double-tap zoom is enabled.

```tsx
import { GestureViewer } from 'react-native-gesture-image-viewer';

function App() {
  const [showControls, setShowControls] = useState(true);

  return (
    <GestureViewer
      data={images}
      renderItem={renderImage}
      onSingleTap={() => setShowControls((prev) => !prev)} // [!code highlight]
    />
  );
}
```

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

### GestureViewer Trigger Animation Configuration

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/gesture-viewer-props.mdx

Configure animation duration, easing, and reduce motion behavior for trigger-based animations. Use this to customize the animation's feel and system accessibility compliance.

```tsx
 <GestureViewer
   triggerAnimation={{
     duration: 250,
     easing: Easing.out(Easing.cubic),
     reduceMotion: 'system',
     onAnimationComplete: () => {
       console.log('Animation complete');
     },
   }}
 />
```

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

### Customizing Content Components with renderItem

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/custom-components.mdx

Inject custom content components, such as expo-image or FastImage, using the `renderItem` prop to enable gesture support for various content types.

```tsx
import { GestureViewer } from 'react-native-gesture-image-viewer';
import { Image } from 'expo-image';

function App() {
  const renderImage = useCallback((imageUrl: string) => {
    return (
      <Image
        source={{ uri: imageUrl }}
        style={{ width: '100%', height: '100%' }}
        contentFit="contain"
      />
    );
  }, []);

  return <GestureViewer data={images} renderItem={renderImage} />;
}
```

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

### Replace onIndexChange Prop with useEffect and useGestureViewerState

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/migration-from-1.x.mdx

The `onIndexChange` prop is removed. Use `useGestureViewerState` and `useEffect` to achieve the same functionality.

```comment
// Before
```

```tsx
<GestureViewer onIndexChange={(index) => console.log(index)} />;
```

```comment
// After
```

```tsx
const { currentIndex } = useGestureViewerState();

useEffect(() => {
  console.log(currentIndex);
}, [currentIndex]);
```

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

### Correct Trigger-Based Animation Implementation

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/trigger-based-animations.mdx

Use `onDismissStart` to hide UI elements and `onDismiss` to close the modal after the animation completes. This ensures animations play out naturally.

```tsx
// ❌ Avoid: This will bypass the trigger animation
<Button onPress={() => setVisible(false)} title="Close" />

// ❌ Avoid: This will cause the animation to break
const handleClose = () => {
  setShowUI(false);
  setVisible(false); // Closes too early
};
<Button onPress={handleClose} title="Close" />

// ✅ Correct: Let the animation complete naturally
<GestureViewer
  onDismissStart={() => setShowUI(false)}
  onDismiss={() => setVisible(false)}
  renderContainer={(children, { dismiss }) => (
    <View style={{ flex: 1 }}>
      {children}
      {showUI && (
        <View>
          <Button onPress={dismiss} title="Close" />
        </View>
      )}
    </View>
  )}
/>
```

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

### Wrap renderItem with useCallback

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/performance-optimization-tips.mdx

Wrap the `renderItem` function with `useCallback` to prevent unnecessary re-renders of list items. This is crucial for maintaining smooth scrolling performance when dealing with dynamic lists.

```tsx
import { useCallback, useState } from 'react';
import { ScrollView, Image, Modal } from 'react-native';
import { GestureViewer } from 'react-native-gesture-image-viewer';

function App() {
  const images = [...];
  const [visible, setVisible] = useState(false);

  const renderImage = useCallback((imageUrl: string) => {
    return <Image source={{ uri: imageUrl }} style={{ width: '100%', height: '100%' }} resizeMode="contain" />; 
  }, []);

  return (
    <Modal visible={visible} onRequestClose={() => setVisible(false)}>
      <GestureViewer
        data={images}
        renderItem={renderImage}
        ListComponent={ScrollView}
        onDismiss={() => setVisible(false)}
      />
    </Modal>
  );
}
```

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

### Use expo-image or FastImage for large images

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/performance-optimization-tips.mdx

For handling large images, it is recommended to use optimized image loading libraries like `expo-image` or `FastImage`. These libraries offer better performance and memory management compared to the default React Native `Image` component.

```tsx
import { ScrollView, Modal } from 'react-native';
import { GestureViewer } from 'react-native-gesture-image-viewer';
import { Image } from 'expo-image'; 

function App() {
  const images = [...];
  const [visible, setVisible] = useState(false);

  const renderImage = useCallback((imageUrl: string) => {
    return <Image source={{ uri: imageUrl }} style={{ width: '100%', height: '100%' }} contentFit="contain" />; 
  }, []);

  return (
    <Modal visible={visible} onRequestClose={() => setVisible(false)}>
      <GestureViewer
        data={images}
        renderItem={renderImage}
        ListComponent={ScrollView}
        onDismiss={() => setVisible(false)}
      />
    </Modal>
  );
}
```

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

### Subscribe to Viewer Events

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/handling-viewer-events.mdx

Use the useGestureViewerEvent hook to subscribe to zoom, rotation, and tap events. This hook requires the event type and a callback function that receives interaction data.

```tsx
import { GestureViewer, useGestureViewerEvent } from 'react-native-gesture-image-viewer';

function App() {
  useGestureViewerEvent('zoomChange', (data) => {
    console.log(`Zoom changed from ${data.previousScale} to ${data.scale}`);
  });

  useGestureViewerEvent('rotationChange', (data) => {
    console.log(`Rotation changed from ${data.previousRotation}° to ${data.rotation}°`);
  });

  useGestureViewerEvent('tap', (data) => {
    if (data.kind === 'single') {
      console.log(`Tapped item ${data.index} at (${data.x}, ${data.y})`);
    }
  });

  return <GestureViewer data={images} renderItem={renderImage} />;
}
```

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

### Programmatic Control with useGestureViewerController

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/basic-usage.mdx

Utilizes the useGestureViewerController hook to manage the GestureViewer's state, allowing navigation between images and zoom controls.

```tsx
import { GestureViewer, useGestureViewerController } from 'react-native-gesture-image-viewer';

function App() {
  const { goToIndex, goToPrevious, goToNext, zoomIn, zoomOut, resetZoom, rotate } = 
    useGestureViewerController();

  return (
    <View>
      <GestureViewer data={images} renderItem={renderImage} />
      <View>
        <Button title="Prev" onPress={goToPrevious} />
        <Button title="Jump to index 2" onPress={() => goToIndex(2)} />
        <Button title="Next" onPress={goToNext} />
      </View>
    </View>
  );
}
```

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

### Update Metro Configuration

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/migration-from-1.x.mdx

Remove the wrapWithReanimatedMetroConfig from your metro.config.js when migrating.

```diff
- const { wrapWithReanimatedMetroConfig } = require('react-native-reanimated/metro-config');

const config = {
  // Your existing Metro configuration options
};

- module.exports = wrapWithReanimatedMetroConfig(config);
+ module.exports = config
```

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

### Configure Babel for React Native Worklets

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/getting-started/installation.mdx

For React Native CLI projects, manually add the react-native-worklets/plugin to your babel.config.js. This plugin must be listed last in the plugins array.

```javascript
module.exports = {
  presets: [
    ... // don't add it here :)
  ],
  plugins: [
    ...
    // for web
    '@babel/plugin-proposal-export-namespace-from', // [!code highlight]
    // react-native-worklets/plugin has to be listed last.
    'react-native-worklets/plugin', // [!code highlight]
  ],
};
```

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

### Set Item Spacing in GestureViewer

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/gesture-viewer-props.mdx

Configure itemSpacing to define the space between items in pixels. This prop is only effective when enableSnapMode is set to true.

```tsx
import { GestureViewer } from 'react-native-gesture-image-viewer';

function App() {
  return (
    <GestureViewer
      data={data}
      renderItem={renderItem}
      // [!code highlight:2]
      enableSnapMode={true}
      itemSpacing={16} // 16px spacing between items
    />
  );
}
```

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

### Update Gesture Props for GestureViewer

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/migration-from-1.x.mdx

Refactor gesture-related props to use a nested `dismiss` object and new naming conventions for improved clarity and organization.

```diff
<GestureViewer
-  enableDismissGesture
-  dismissThreshold
-  resistance
-  animateBackdrop
+  dismiss={{
+    enabled: true,
+    threshold: 80,
+    resistance: 2,
+    fadeBackdrop: true,
+  }}

-  useSnap
+  enableSnapMode

-  enableZoomPanGesture
+  enablePanWhenZoomed

-  enableZoomGesture
+  enablePinchZoom

-  enableSwipeGesture
+  enableHorizontalSwipe
/>
```

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

### Dismissing Programmatically with renderContainer's dismiss

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/trigger-based-animations.mdx

Dismiss the viewer programmatically using the `dismiss` helper provided by `renderContainer`. This ensures the dismiss animation targets the original thumbnail position.

```tsx
<GestureViewer
  renderContainer={(children, { dismiss }) => ( // [!code highlight]
    <View >
      {children}
      <Pressable

        {
          This button will properly trigger the dismiss animation
          back to the original thumbnail position
        }
        onPress={dismiss} // [!code highlight]
      >
        <Text>Close</Text>
      </Pressable>
    </View>
  )}
/>
```

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

### GestureTrigger with Custom Component Child

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/trigger-based-animations.mdx

Demonstrates using a custom pressable component as a child of GestureTrigger. Ensure the custom component accepts and forwards the 'onPress' prop.

```tsx
// Using custom component
function CustomButton({ onPress, children }) {
  return <Pressable onPress={onPress}>{children}</Pressable>;
}

<GestureTrigger>
  <CustomButton onPress={handlePress}>
    <Text>Custom Button</Text>
  </CustomButton>
</GestureTrigger>
```

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

### Listen to Events on a Specific Instance

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/handling-viewer-events.mdx

To listen for events on a particular GestureViewer instance, provide the instance ID as the first argument to the useGestureViewerEvent hook. The default instance ID is 'default'.

```ts
// Listen to events on a specific instance
useGestureViewerEvent('gallery', 'zoomChange', (data) => {
  console.log(`Gallery zoom: ${data.scale}x`);
});

```

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

### GestureTrigger with onPress on GestureTrigger

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/trigger-based-animations.mdx

Recommended method for handling press events directly on the GestureTrigger component. The component will automatically manage the modal transition.

```tsx
<GestureTrigger onPress={() => openModal(index)}>
  <Pressable>
    <Image source={{ uri }} />
  </Pressable>
</GestureTrigger>
```

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

### maxZoomScale

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/gesture-viewer-props.mdx

Controls the maximum zoom scale multiplier. Defaults to 2.

```APIDOC
## maxZoomScale

### Description
Controls the maximum zoom scale multiplier.

### Default Value
`2`
```

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

### Set Auto Play Interval in GestureViewer

Source: https://github.com/saseungmin/react-native-gesture-image-viewer/blob/main/docs/docs/2.x/en/guide/usage/gesture-viewer-props.mdx

Adjust autoPlayInterval to control the time in milliseconds between automatic item transitions. The minimum value is 250ms.

```tsx
import { GestureViewer } from 'react-native-gesture-image-viewer';

function App() {
  return (
    <GestureViewer
      // [!code highlight:2]
      autoPlay={true}
      autoPlayInterval={3000}
    />
  );
}
```