diff --git a/README.md b/README.md index 31a4862..971b4be 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # React Native Animated Gallery -## ![npm](https://img.shields.io/npm/l/react-native-animated-gallery) ![npm](https://img.shields.io/npm/v/react-native-animated-gallery) ![npm](https://img.shields.io/david/DIGIEGGS/rn-country-code-picker) +## ![npm](https://img.shields.io/npm/l/react-native-animated-gallery) ![npm](https://img.shields.io/npm/v/react-native-animated-gallery) ![npm](https://img.shields.io/david/dev/vivekjm/react-native-animated-gallery) ![](https://img.shields.io/npm/dw/react-native-animated-gallery) # @@ -39,7 +39,7 @@ Then use it like this. ```javascript import * as React from "react"; import { Text, View } from "react-native"; -import AnimatedGallery from "react-native-animated-gallery"; +import AnimatedGallery from "./components/index"; export default () => { const images = [ @@ -55,25 +55,9 @@ export default () => { id: 3, url: "https://images.pexels.com/photos/1624360/pexels-photo-1624360.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800", }, - { - id: 4, - url: "https://images.pexels.com/photos/1019335/nature-stars-milky-way-galaxy-1019335.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800", - }, - { - id: 5, - url: "https://images.pexels.com/photos/623218/pexels-photo-623218.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800", - }, - { - id: 6, - url: "https://images.pexels.com/photos/1693095/pexels-photo-1693095.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800", - }, - { - id: 7, - url: "https://images.pexels.com/photos/5939672/pexels-photo-5939672.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800", - }, ]; - const Loader = () => { + const Laoder = () => { return ( Custom Loader.. @@ -85,8 +69,18 @@ export default () => { } + renderLoader={} disablefullScreen={false} + thumpBorderWidth={3} + thumpBorderColor={"white"} + spacing={8} + imageSize={90} + backgroundColor={"#0000"} + onEndReached={() => { + console.log("End reached"); + }} + invertThumpDirection={false} + invertGalleryDirection={false} /> ); @@ -102,6 +96,10 @@ export default () => { - [`thumpBorderWidth`](#thumpBorderWidth) - [`thumpBorderColor`](#thumpBorderColor) - [`disablefullScreen`](#disablefullScreen) +- [`backgroundColor`](#backgroundColor) +- [`onEndReached`](#onEndReached) +- [`invertThumpDirection`](#invertThumpDirection) +- [`invertGalleryDirection`](#invertGalleryDirection) --- @@ -177,4 +175,36 @@ Disable the fullscreen view of image | ------- | -------- | | 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 | + +### `invertThumpDirection` + +Reverses the direction of scroll. Uses scale transforms of -1. + +| Type | Required | +| ------- | -------- | +| boolean | No | + +### `invertThumpDirection` + +Reverses the direction of scroll of gallery. Uses scale transforms of -1. + +| Type | Required | +| ------- | -------- | +| boolean | No | + --- diff --git a/package.json b/package.json index 6df7681..6151c3a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-animated-gallery", - "version": "1.0.8", + "version": "1.1.2", "description": " Tiny and fast animated image gallery for react-native", "types": "dist/index.d.ts", "main": "dist/index.js", diff --git a/src/AnimatedGallery.tsx b/src/AnimatedGallery.tsx index b65c577..c0e2fd0 100644 --- a/src/AnimatedGallery.tsx +++ b/src/AnimatedGallery.tsx @@ -25,6 +25,10 @@ export const AnimatedGallery = (props: animatedGalleryProps) => { imageSize, renderLoader, disablefullScreen, + backgroundColor, + onEndReached, + invertThumpDirection, + invertGalleryDirection, } = props; /** @@ -54,6 +58,7 @@ export const AnimatedGallery = (props: animatedGalleryProps) => { const SPACING = spacing ? spacing : 10; const THUMP_BORDER_WIDTH = thumpBorderWidth ? thumpBorderWidth : 2; const THUMP_BORDER_COLOR = thumpBorderColor ? thumpBorderColor : "#ffff"; + const BACKGROUND_COLOR = backgroundColor ? backgroundColor : "#0000"; /** * when the compoent mounts the value from the imageUrl props is locally saved to images state @@ -117,7 +122,7 @@ export const AnimatedGallery = (props: animatedGalleryProps) => { */ return ( - + { pagingEnabled showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} + inverted={invertGalleryDirection} onMomentumScrollEnd={(e) => { scrollToActiveIndex( Math.floor(e.nativeEvent.contentOffset.x / width) @@ -162,6 +168,8 @@ export const AnimatedGallery = (props: animatedGalleryProps) => { horizontal pagingEnabled showsHorizontalScrollIndicator={false} + onEndReached={onEndReached} + inverted={invertThumpDirection} contentContainerStyle={{ paddingHorizontal: SPACING }} style={{ position: "absolute", bottom: IMAGE_SIZE }} renderItem={({ item, index }: { item: any; index: any }) => { diff --git a/src/AnimatedGallery.type.ts b/src/AnimatedGallery.type.ts index 047c7fa..a8f37f7 100644 --- a/src/AnimatedGallery.type.ts +++ b/src/AnimatedGallery.type.ts @@ -1,6 +1,5 @@ import { ReactElement } from 'react'; - export type animatedGalleryProps = { /** * Provides Data to the component @@ -8,9 +7,9 @@ export type animatedGalleryProps = { imageUrls: Array; /** - * Provides custom loader to component - */ - renderLoader?: ReactElement; + * Provides custom loader to component + */ + renderLoader?: React.ReactElement | null; /** * Set the size of the thump nail to square proprtion. @@ -24,22 +23,43 @@ export type animatedGalleryProps = { spacing?: number; /** - * Set the border width for thump nail - */ + * Set the border width for thump nail + */ thumpBorderWidth?: number; - /** - * Set the border color for thump nail - */ + * Set the border color for thump nail + */ thumpBorderColor?: string; - /** - * Disable the fullscreen view of image - */ + * 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. + */ + invertThumpDirection?: boolean | null; + + + /** + * Reverses the direction of scroll of gallery. Uses scale transforms of -1. + */ + invertGalleryDirection?: boolean | null; -}; +} \ No newline at end of file