Description:
A tiny, fast, and animated image gallery for React Native.
How to use it:
1. Install and import the image gallery component.
# Yarn $ yarn add react-native-animated-gallery # NPM $ npm i react-native-animated-gallery
import * as React from "react";
import { Text, View } from "react-native";
import AnimatedGallery from "react-native-animated-gallery";2. Create an image gallery in your app.
export default () => {
const images = [
{
id: 1,
url: "1.jpg",
},
{
id: 2,
url: "3.jpg",
},
{
id: 3,
url: "3.jpg",
},
];
const Loader = () => {
return (
<View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
<Text>Loading Text Here..</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>
);
};3. Available gallery props.
/** * Provides Data to the component */ imageUrls: Array<any>; /** * Provides custom loader to component */ renderLoader?: React.ReactElement | null; /** * Set the size of the thumb nail to square proprtion. */ imageSize?: number; /** * Set the sapcing between thumb nail */ spacing?: number; /** * Set the border width for thumb nail */ thumbBorderWidth?: number; /** * Set the border color for thumb nail */ thumbBorderColor?: string; /** * Disable the fullscreen view of image */ disablefullScreen?: boolean; /** * Set backgroundColor for the gallery */ backgroundColor?: string; /** * 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. */ onEndReached?: () => void; /** * Reverses the direction of scroll. Uses scale transforms of -1. */ invertThumbDirection?: boolean | null; /** * Reverses the direction of scroll of gallery. Uses scale transforms of -1. */ invertGalleryDirection?: boolean | null;
Preview:
