🎉 added new props

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 (
       <View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
         <Text>Custom Loader..</Text>
@@ -85,8 +69,18 @@ export default () => {
     <View style={{ flex: 1, backgroundColor: "#fff" }}>
       <AnimatedGallery
         imageUrls={images}
-        renderLoader={<Loader />}
+        renderLoader={<Laoder />}
         disablefullScreen={false}
+        thumpBorderWidth={3}
+        thumpBorderColor={"white"}
+        spacing={8}
+        imageSize={90}
+        backgroundColor={"#0000"}
+        onEndReached={() => {
+          console.log("End reached");
+        }}
+        invertThumpDirection={false}
+        invertGalleryDirection={false}
       />
     </View>
   );
@@ -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       |
+
 ---

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",

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 (
-    <View style={{ flex: 1, backgroundColor: "black" }}>
+    <View style={{ flex: 1, backgroundColor: BACKGROUND_COLOR }}>
       <FlatList
         //@ts-ignore
         ref={topRef}
@@ -127,6 +132,7 @@ export const AnimatedGallery = (props: animatedGalleryProps) => {
         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 }) => {

src/AnimatedGallery.type.ts

@@ -1,16 +1,15 @@
 import { ReactElement } from 'react';
 
-
 export type animatedGalleryProps = {
     /**
      * Provides Data to the component
      */
     imageUrls: Array<any>;
 
     /**
-    * 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;
 
 
-};
+}