README
React Native Animated Gallery
npm">
🚀 Tiny and fast animated image gallery for react-native
          Â
Getting started
npm i react-native-animated-gallery --save
or
yarn add react-native-animated-gallery
iOS
No additional step is required.
Android
No additional step is required.
Usage
First of all, import the component.
import AnimatedGallery from "react-native-animated-gallery";
Then use it like this.
import * as React from "react";
import { Text, View } from "react-native";
import AnimatedGallery from "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 (
<View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
<Text>Custom Loader..</Text>
</View>
);
};
return (
<View style={{ flex: 1, backgroundColor: "#fff" }}>
<AnimatedGallery
imageUrls={images}
renderLoader={<Loader />}
disablefullScreen={false}
thumbBorderWidth={3}
thumbBorderColor={"white"}
spacing={8}
imageSize={90}
backgroundColor={"#0000"}
onEndReached={() => {
console.log("yay! end reached");
}}
invertThumbDirection={false}
invertGalleryDirection={false}
/>
</View>
);
};
Props
imageUrls
renderLoader
imageSize
spacing
thumbBorderWidth
thumbBorderColor
disablefullScreen
backgroundColor
onEndReached
invertThumbDirection
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 |
invertThumbDirection
Reverses the direction of scroll of gallery. Uses scale transforms of -1.
Type | Required |
---|---|
boolean | No |
Author
Vivek JM vivekjm77@gmail.com |