react-native-gesture-image-viewer - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #react #ai #golang #machine-learning #docker #macos #awesome #vue #security #pytorch #openai #open-source

react-native-gesture-image-viewer

(★ 85)

🖼️ React Native Image Viewer - Reanimated-powered image gestures with full control

파일 탐색기

최종 버전 다운로드 (.zip)

- config.json
- README.md
- - bug_report.yml
  - config.yml
- - ci.yml
  - release.yml
- extensions.json
- settings.json
- example.gif
- example.png
- example.webp
- logo.png
- - ExpoSnackEmbed.tsx
- - env.d.ts
- - index.css
  - index.tsx
- .gitignore
- expo-snack.d.ts
- package.json
- README.md
- rspress.config.ts
- tsconfig.json
- - adaptive-icon.png
  - favicon.png
  - icon.png
  - splash-icon.png
- - App.tsx
  - Example.tsx
- .gitignore
- app.json
- babel.config.js
- index.js
- metro.config.js
- package.json
- tsconfig.json
- - dismiss.test.ts
  - manager.test.ts
  - registry.test.ts
  - renderItemActive.test.tsx
  - scheduleInitialScroll.test.ts
  - useGestureViewerInitialScroll.test.tsx
  - useGestureViewerPaging.test.tsx
  - useGestureViewerPaging.web.test.tsx
  - utils.test.ts
  - webScroll.test.ts
- - dismiss.ts
  - FlashList.ts
  - index.ts
  - tapZoom.ts
  - webScroll.ts
  - zoom.ts
- GestureTrigger.tsx
- GestureViewer.tsx
- GestureViewerManager.ts
- GestureViewerRegistry.ts
- index.tsx
- scheduleInitialScroll.ts
- types.ts
- useGestureViewer.ts
- useGestureViewerController.ts
- useGestureViewerEvent.ts
- useGestureViewerPaging.ts
- useGestureViewerPaging.types.ts
- useGestureViewerPaging.web.ts
- useGestureViewerState.ts
- WebPagingFixStyle.tsx
.editorconfig
.gitattributes
.gitignore
.nvmrc
.oxfmtrc.json
.oxlintrc.json
.watchmanconfig
babel.config.js
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
jest-setup.js
jest.config.js
lefthook.yml
LICENSE
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
README-ko_kr.md
README.md
tsconfig.build.json
tsconfig.json

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React Native Gesture Image Viewer

> English | [한국어](./README-ko_kr.md)

<div align="center">
  <img src="./assets/logo.png" width="300px" alt="React Native Gesture Image Viewer logo" />
</div>

## Overview

Have you ever struggled with implementing complex gesture handling and animations when building image galleries or content viewers in React Native?

Existing libraries often have limited customization options or performance issues. `react-native-gesture-image-viewer` is a high-performance **universal gesture viewer** library built on React Native Reanimated and Gesture Handler, providing complete customization and intuitive gesture support for not only images but also videos, custom components, and any other content.

<p align="center">
  <img src="./assets/example.webp" width="600" alt="Gesture and zoom demo" />
</p>

### Key Features

- 🤌 **Complete Gesture Support** - Pinch zoom, double-tap zoom, swipe navigation, pan when zoomed-in, and vertical drag to dismiss
- 🏎️ **High-Performance Animations** - Smooth and responsive animations at 60fps and beyond, powered by React Native Reanimated
- 🎨 **Full Customization** - Total control over components, styles, and gesture behavior
- 🎛️ **External Control API** - Trigger actions programmatically from buttons or other UI components
- 🧩 **Multi-Instance Management** - Manage multiple viewers independently using unique IDs
- 🧬 **Flexible Integration** - Use with Modal, [React Native Modal](https://www.npmjs.com/package/react-native-modal), ScrollView, FlatList, [FlashList](https://www.npmjs.com/package/@shopify/flash-list), [Expo Image](https://www.npmjs.com/package/expo-image), [FastImage](https://github.com/DylanVann/react-native-fast-image), and more
- 🧠 **Full TypeScript Support** - Great developer experience with type inference and safety
- 🌐 **Cross-Platform** - Runs on iOS, Android, and Web with Expo Go and New Architecture compatibility
- 🪄 **Easy-to-Use API** - Simple and intuitive API that requires minimal setup

## Quick Start

### 📚 Documentation

Full documentation is available at: <https://react-native-gesture-image-viewer.pages.dev>

### Examples & Demo

- [📁 Example Project](/example/) - Real implementation code with various use cases
- [🥠 Expo Go](https://snack.expo.dev/@harang/react-native-gesture-image-viewer-v2) - Try it instantly on Expo Snack

### 🤖 AI

- [llms.txt](https://react-native-gesture-image-viewer.pages.dev/llms.txt): A structured index file containing the titles, links, and brief descriptions of all documentation pages.
- [llms-full.txt](https://react-native-gesture-image-viewer.pages.dev/llms-full.txt): A full-content file that concatenates the complete content of every documentation page into a single file.

### Basic Usage

`react-native-gesture-image-viewer` is a library focused purely on gesture interactions for complete customization.

```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>
  );
}
```

## Contributing

For details on how to contribute to the project and set up the development environment, please refer to the [Contributing Guide](CONTRIBUTING.md).

## License

[MIT](./LICENSE)