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