Skip to content

πŸš€ Tiny and fast animated image gallery for react-native

License

Notifications You must be signed in to change notification settings

vivekjm/react-native-animated-gallery

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

24 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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
[email protected]