@akumzy/react-native-animated-gallery
TypeScript icon, indicating that this package has built-in type declarations

1.2.1 • Public • Published

React Native Animated Gallery

npm npm

🚀 Tiny and fast animated image gallery with pinch/zoom support for react-native

           

Getting started

npm i @akumzy/react-native-animated-gallery --save

or

yarn add @akumzy/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 "@akumzy/react-native-animated-gallery"

Then use it like this.

import * as React from "react"
import { Text, View } from "react-native"
import AnimatedGallery from "@akumzy/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


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

invertGalleryDirection

Reverses the direction of scroll of gallery. Uses scale transforms of -1.

Type Required
boolean No

Author

Vivek JM
vivekjm77@gmail.com

Package Sidebar

Install

npm i @akumzy/react-native-animated-gallery

Weekly Downloads

37

Version

1.2.1

License

MIT

Unpacked Size

23.6 kB

Total Files

15

Last publish

Collaborators

  • akumzy