https://github.com/vivekjm/react-native-animated-gallery
🚀 Tiny and fast animated image gallery for react-native
https://github.com/vivekjm/react-native-animated-gallery
animated-image gallery-viewer imageviewer-component react-native
Last synced: over 1 year ago
JSON representation
🚀 Tiny and fast animated image gallery for react-native
- Host: GitHub
- URL: https://github.com/vivekjm/react-native-animated-gallery
- Owner: vivekjm
- License: mit
- Created: 2021-06-10T19:30:20.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2022-08-18T12:12:59.000Z (almost 4 years ago)
- Last Synced: 2024-10-12T08:45:29.917Z (over 1 year ago)
- Topics: animated-image, gallery-viewer, imageviewer-component, react-native
- Language: TypeScript
- Homepage:
- Size: 50.2 MB
- Stars: 35
- Watchers: 3
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native Animated Gallery
##    
#
#### 🚀 Tiny and fast animated image gallery with pinch/zoom support for react-native
#
 Â Â Â Â Â Â Â Â Â Â Â 
## Getting started
`npm i @akumzy/react-native-animated-gallery --save`
or
`yarn add @akumzy/react-native-animated-gallery`
#### iOS
No additional step is required.
#### Android
No additional step is required.
## Usage
First of all, import the component.
```javascript
import AnimatedGallery from "@akumzy/react-native-animated-gallery"
```
Then use it like this.
```javascript
import * as React from "react"
import { Text, View } from "react-native"
import AnimatedGallery from "@akumzy/react-native-animated-gallery"
export default () => {
const images = [
{
id: 1,
url: "https://images.pexels.com/photos/2347011/pexels-photo-2347011.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
},
{
id: 2,
url: "https://images.pexels.com/photos/2387877/pexels-photo-2387877.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
},
{
id: 3,
url: "https://images.pexels.com/photos/1624360/pexels-photo-1624360.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
},
]
const Loader = () => {
return (
Custom Loader..
)
}
return (
}
disablefullScreen={false}
thumbBorderWidth={3}
thumbBorderColor={"white"}
spacing={8}
imageSize={90}
backgroundColor={"#0000"}
onEndReached={() => {
console.log("yay! end reached")
}}
invertThumbDirection={false}
invertGalleryDirection={false}
/>
)
}
```
## Props
- [`imageUrls`](#imageUrls)
- [`renderLoader`](#renderLoader)
- [`imageSize`](#imageSize)
- [`spacing`](#spacing)
- [`thumbBorderWidth`](#thumbBorderWidth)
- [`thumbBorderColor`](#thumbBorderColor)
- [`disablefullScreen`](#disablefullScreen)
- [`backgroundColor`](#backgroundColor)
- [`onEndReached`](#onEndReached)
- [`invertThumbDirection`](#invertThumbDirection)
- [`invertGalleryDirection`](#invertGalleryDirection)
---
# Reference
## Props
### `imageUrls`
Provides Data to the component
| Type | Required |
| ----- | -------- |
| Array | yes |
---
### `renderLoader`
Custom loader for component
| Type | Required |
| ------------ | -------- |
| ReactElement | no |
---
### `imageSize`
Set the size of the thumb nail to square proprtion
| Type | Required |
| --------- | -------- |
| imageSize | number |
---
### `spacing`
Set the sapcing between thumb nail.
| Type | Required |
| ------- | -------- |
| spacing | number |
---
### `thumbBorderWidth`
Set the border width for thumb nail.
| Type | Required |
| ------ | -------- |
| number | No |
---
### `thumbBorderColor`
Set the border color for thumb nail
| Type | Required |
| ------ | -------- |
| string | No |
---
### `disablefullScreen`
Disable the fullscreen view of image
| Type | Required |
| ------- | -------- |
| boolean | No |
### `backgroundColor`
Set the backgroundColor for gallery when not in fullscreen mode
| Type | Required |
| ------ | -------- |
| string | No |
### `onEndReached`
Called when all rows have been rendered and the list has been scrolled to within onEndReachedThreshold of the bottom. The native scroll event is provided.
| Type | Required |
| -------- | -------- |
| function | No |
### `invertThumbDirection`
Reverses the direction of scroll. Uses scale transforms of -1.
| Type | Required |
| ------- | -------- |
| boolean | No |
### `invertGalleryDirection`
Reverses the direction of scroll of gallery. Uses scale transforms of -1.
| Type | Required |
| ------- | -------- |
| boolean | No |
---
## Author
Vivek JM
vivekjm77@gmail.com