React Native Animated Gallery

🚀 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 [e-mail]