Skip to content

Commit e30c21d

Browse files
VoDucDuocVoDucDuoc
committed
feat: add image gallery component and related assets
1 parent b481dbc commit e30c21d

File tree

12 files changed

+15147
-27
lines changed

12 files changed

+15147
-27
lines changed

‎README.md‎

Lines changed: 76 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,93 @@
1-
# react-native-gesture-image
1+
# @duocvo/react-native-gesture-image
22

3-
This library provides a highly customizable and performant image viewer component for React Native applications. It supports advanced gestures such as pinch-to-zoom, panning, and double-tap to zoom in and out, making it ideal for creating rich, interactive image viewing experiences.
3+
This library provides a highly customizable and performant image viewer component for React Native applications. It supports advanced gestures such as pinch-to-zoom, panning, and double-tap to zoom in and out, making it ideal for creating rich, interactive image viewing experiences. Built with **[react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/)** for handling advanced touch gestures like pinch and pan, and **[react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/)** for providing smooth animations for zooming and panning.
44

5-
## Installation
5+
IOS|ANDROID
6+
--|--
7+
<video src="https://github.com/user-attachments/assets/d4ed6e2d-129d-475e-ad4f-bfbd9f916cda">|<video src="https://github.com/user-attachments/assets/a2b18502-bd07-4c39-8f40-b0001ea0ec60">
8+
9+
## Prerequisites
10+
11+
This library relies on the following dependencies to enable gesture and animation support:
12+
- **[react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/)**: Handles advanced touch gestures like pinch and pan.
13+
- **[react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/)**: Provides smooth animations for zooming and panning.
14+
15+
Install these prerequisites along with the library:
16+
17+
```sh
18+
npm install react-native-gesture-handler react-native-reanimated
19+
# or
20+
yarn add react-native-gesture-handler react-native-reanimated
21+
```
622

23+
## Installation
724
```sh
8-
npm install react-native-gesture-image
25+
npm install @duocvo/react-native-gesture-image
26+
#or
27+
yarn add @duocvo/react-native-gesture-image
928
```
1029

1130
## Usage
1231

32+
First, wrap your app with `GestureHandlerRootView` component:
1333

1434
```js
15-
import { multiply } from 'react-native-gesture-image';
35+
import { GestureHandlerRootView } from 'react-native-gesture-handler';
36+
37+
export default function App() {
38+
return (
39+
<GestureHandlerRootView>
40+
<ActualApp />
41+
</GestureHandlerRootView>
42+
);
43+
}
44+
```
45+
46+
Then, use the components provided by the library:
1647

17-
// ...
48+
```js
49+
import Gallery from '@duocvo/react-native-gesture-image';
1850

19-
const result = await multiply(3, 7);
51+
// Example usage of Gallery
52+
const images = [
53+
{ uri: 'https://example.com/image1.jpg' },
54+
{ uri: 'https://example.com/image2.jpg' },
55+
{ uri: 'https://example.com/image3.jpg' },
56+
];
57+
58+
<Gallery data={images} />
59+
```
60+
**Note:** Gallery is built on top of FlatList for rendering multiple images efficiently. If you don’t want to use FlatList and prefer a single image viewer, use ImageViewer instead. See the example below:
61+
```js
62+
import { ImageViewer } from '@duocvo/react-native-gesture-image';
63+
64+
// Example usage of ImageViewer
65+
const imageSource = { uri: 'https://example.com/image.jpg' };
66+
67+
<ImageViewer source={imageSource} />
2068
```
2169

70+
## Props
71+
72+
### Gallery
73+
74+
| Prop | Type | Default | Description | Required |
75+
|-----------------------|----------|---------|--------------------------------------------------|----------|
76+
| `data` | `array` | `[]` | Array of image sources | Yes |
77+
| `style` | `object` | | Custom style for the gallery container | No |
78+
| `imageStyle` | `object` | | Custom style for each image | No |
79+
| `containerStyle` | `object` | | Custom style for the gallery container | No |
80+
| `contentContainerStyle` | `object` | | Custom style for the content container | No |
81+
| `backdropColor` | `string` | `black` | Background color of the gallery | No |
82+
83+
84+
### ImageViewer
85+
86+
| Prop | Type | Default | Description | Required |
87+
|-------------------|----------|---------|--------------------------------------------------|----------|
88+
| `source` | `object` | | Source for the image | Yes |
89+
| `imageStyle` | `object` | | Custom style for the image | No |
90+
2291

2392
## Contributing
2493

‎example/assets/image1.jpeg‎

237 KB
Loading

‎example/assets/image2.jpeg‎

259 KB
Loading

‎example/assets/image3.jpeg‎

1.04 MB
Loading

‎example/src/App.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
1-
import { multiply } from 'react-native-gesture-image';
2-
import { Text, View, StyleSheet } from 'react-native';
1+
import { StyleSheet } from 'react-native';
2+
import { GestureHandlerRootView } from 'react-native-gesture-handler';
3+
import Gallery from 'react-native-gesture-image';
34

4-
const result = multiply(3, 7);
5+
const image1 = require('../assets/image1.jpeg');
6+
const image2 = require('../assets/image2.jpeg');
7+
const image3 = require('../assets/image3.jpeg');
58

69
export default function App() {
710
return (
8-
<View style={styles.container}>
9-
<Text>Result: {result}</Text>
10-
</View>
11+
<GestureHandlerRootView style={styles.container}>
12+
<Gallery data={[image1, image2, image3]} />
13+
</GestureHandlerRootView>
1114
);
1215
}
1316

1417
const styles = StyleSheet.create({
1518
container: {
1619
flex: 1,
17-
alignItems: 'center',
18-
justifyContent: 'center',
1920
},
2021
});

‎package.json‎

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "react-native-gesture-image",
33
"version": "0.1.0",
4-
"description": "This library provides a highly customizable and performant image viewer component for React Native applications. It supports advanced gestures such as pinch-to-zoom, panning, and double-tap to zoom in and out, making it ideal for creating rich, interactive image viewing experiences.",
4+
"description": "This library provides a highly customizable and performant image viewer component for React Native applications. Itsupport advanced gestures such as pinch-to-zoom, panning, and double-tap to zoom in and out, making it ideal for creating rich, interactive image viewing experiences.",
55
"source": "./src/index.tsx",
66
"main": "./lib/commonjs/index.js",
77
"module": "./lib/module/index.js",
@@ -48,18 +48,32 @@
4848
"keywords": [
4949
"react-native",
5050
"ios",
51-
"android"
51+
"android",
52+
"image",
53+
"viewer",
54+
"gesture",
55+
"zoom",
56+
"pan",
57+
"double-tap",
58+
"pinch-to-zoom",
59+
"image-viewer",
60+
"react-native-image-viewer",
61+
"react-native-image-zoom",
62+
"react-native-image-pan-zoom",
63+
"react-native-image-gesture",
64+
"react-native-image-gesture-viewer",
65+
"gesture-image"
5266
],
5367
"repository": {
5468
"type": "git",
55-
"url": "git+https://github.com/VoDucDuoc/react-native-gesture-image.git.git"
69+
"url": "git+https://github.com/VoDucDuoc/react-native-gesture-image.git"
5670
},
57-
"author": "duocvo <duocvo2501@gmail.com> (https://github.com/VoDucDuoc)",
71+
"author": "Duoc Vo <duocvo2501@gmail.com> (https://github.com/VoDucDuoc)",
5872
"license": "MIT",
5973
"bugs": {
60-
"url": "https://github.com/VoDucDuoc/react-native-gesture-image.git/issues"
74+
"url": "https://github.com/VoDucDuoc/react-native-gesture-image/issues"
6175
},
62-
"homepage": "https://github.com/VoDucDuoc/react-native-gesture-image.git#readme",
76+
"homepage": "https://github.com/VoDucDuoc/react-native-gesture-image#readme",
6377
"publishConfig": {
6478
"registry": "https://registry.npmjs.org/"
6579
},
@@ -80,6 +94,8 @@
8094
"react": "18.3.1",
8195
"react-native": "0.76.7",
8296
"react-native-builder-bob": "^0.37.0",
97+
"react-native-gesture-handler": "~2.20.2",
98+
"react-native-reanimated": "~3.16.1",
8399
"release-it": "^17.10.0",
84100
"typescript": "^5.2.2"
85101
},
@@ -114,9 +130,6 @@
114130
"npm": {
115131
"publish": true
116132
},
117-
"github": {
118-
"release": true
119-
},
120133
"plugins": {
121134
"@release-it/conventional-changelog": {
122135
"preset": "angular"

‎src/Gallery.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React, { useCallback } from 'react';
2+
import {
3+
FlatList,
4+
type ImageSourcePropType,
5+
StyleSheet,
6+
View,
7+
} from 'react-native';
8+
import ImageViewer from './ImageViewer';
9+
import Animated from 'react-native-reanimated';
10+
import { SCREEN_WIDTH } from './constants';
11+
import type { GalleryProps } from './Type';
12+
13+
function Gallery({
14+
data = [],
15+
style,
16+
imageStyle,
17+
containerStyle,
18+
contentContainerStyle,
19+
backdropColor = 'black',
20+
}: GalleryProps) {
21+
const flatListRef = React.useRef<FlatList>(null);
22+
23+
const renderItem = useCallback(
24+
({ item, index }: { item: ImageSourcePropType; index: number }) => (
25+
<ImageViewer key={index} source={item} imageStyle={imageStyle} />
26+
),
27+
[imageStyle]
28+
);
29+
30+
return (
31+
<View style={[styles.container, containerStyle]}>
32+
<Animated.FlatList
33+
ref={flatListRef}
34+
data={data}
35+
renderItem={renderItem}
36+
horizontal
37+
pagingEnabled
38+
showsHorizontalScrollIndicator={false}
39+
bounces={false}
40+
getItemLayout={(_, index) => ({
41+
length: SCREEN_WIDTH,
42+
offset: SCREEN_WIDTH * index,
43+
index,
44+
})}
45+
style={[styles.container, { backgroundColor: backdropColor }, style]}
46+
contentContainerStyle={contentContainerStyle}
47+
/>
48+
</View>
49+
);
50+
}
51+
52+
const styles = StyleSheet.create({
53+
container: {
54+
flex: 1,
55+
},
56+
});
57+
58+
export default Gallery;

0 commit comments

Comments
 (0)