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:

Download Details:

Author: vivekjm

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/vivekjm/react-native-animated-gallery

License: MIT