From 560914cba43d77ec6780405cd6f9c6045ca3cdd3 Mon Sep 17 00:00:00 2001
From: Behnam Mohammadi <itten@live.com>
Date: Sun, 9 May 2021 21:23:37 +0430
Subject: [PATCH] feat: add imageComponent prop

---
 src/CameraRollBrowser/ImageCell.js | 33 +++++++++++++++++-------------
 src/CameraRollBrowser/index.js     |  3 +++
 src/index.js                       |  2 ++
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/CameraRollBrowser/ImageCell.js b/src/CameraRollBrowser/ImageCell.js
index f048341..dd2959d 100644
--- a/src/CameraRollBrowser/ImageCell.js
+++ b/src/CameraRollBrowser/ImageCell.js
@@ -73,7 +73,7 @@ export default class ImageCell extends React.PureComponent {
 			imageSize
 		} = this.state;
 		const {
-			data, index, source, imageMargin, imagesPerRow,
+			data, index, source, imageComponent, imageMargin, imagesPerRow,
 			imageContainerStyle, renderIndividualHeader,
 			renderIndividualFooter
 		} = this.props;
@@ -81,6 +81,16 @@ export default class ImageCell extends React.PureComponent {
 			renderIndividualHeader(data, index);
 		const footer = (renderIndividualFooter) &&
 			renderIndividualFooter(data, index);
+
+		const style = {
+			height: imageSize,
+			width: imageSize,
+			backgroundColor: "lightgrey",
+			...imageContainerStyle
+		}
+
+		const handleLoad = () => this.setState({ imageLoaded: true });
+
 		return (
 			<TouchableOpacity
 				style={{
@@ -93,19 +103,14 @@ export default class ImageCell extends React.PureComponent {
 				onPress={() => this._onPressImage(source.uri)}
 			>
 				{header}
-				<Animated.Image
-					onLoad={() => {
-						this.setState({ imageLoaded: true });
-					}}
-					source={source}
-					resizeMode="cover"
-					style={{
-						height: imageSize,
-						width: imageSize,
-						backgroundColor: "lightgrey",
-						...imageContainerStyle
-					}}
-				/>
+				{imageComponent ? imageComponent({ onLoad: handleLoad, source, style }) :
+					<Animated.Image
+						onLoad={handleLoad}
+						source={source}
+						resizeMode="cover"
+						style={style}
+					/>
+				}
 				{footer}
 			</TouchableOpacity>
 		);
diff --git a/src/CameraRollBrowser/index.js b/src/CameraRollBrowser/index.js
index d2d158e..2bcfaa6 100644
--- a/src/CameraRollBrowser/index.js
+++ b/src/CameraRollBrowser/index.js
@@ -18,6 +18,7 @@ export default class CameraRollBrowser extends React.PureComponent {
     enableCameraRoll: PropTypes.bool,
     onGetData: PropTypes.func,
     itemCount: PropTypes.number,
+    imageComponent: PropTypes.func,
     images: PropTypes.arrayOf(PropTypes.object).isRequired,
     imagesPerRow: PropTypes.number,
     initialNumToRender: PropTypes.number,
@@ -384,6 +385,7 @@ export default class CameraRollBrowser extends React.PureComponent {
 
   _renderImage = ({ item, index }) => {
     var {
+      imageComponent,
       imageMargin,
       imagesPerRow,
       containerWidth,
@@ -399,6 +401,7 @@ export default class CameraRollBrowser extends React.PureComponent {
         data={item}
 				imageId={item.id}
 				source={{ uri: item.uri }}
+        imageComponent={imageComponent}
         imageMargin={imageMargin}
         imagesPerRow={imagesPerRow}
         containerWidth={containerWidth}
diff --git a/src/index.js b/src/index.js
index 5e65f1a..0a6bbaa 100644
--- a/src/index.js
+++ b/src/index.js
@@ -35,6 +35,7 @@ export default class CameraRollGallery extends React.PureComponent {
       "Videos",
       "All",
     ]),
+    imageComponent: PropTypes.func,
     imageMargin: PropTypes.number,
     containerWidth: PropTypes.number,
     backgroundColor: PropTypes.string,
@@ -198,6 +199,7 @@ export default class CameraRollGallery extends React.PureComponent {
           onGetData={this.props.onGetData}
           itemCount={this.props.itemCount}
           images={this.state.resolvedData}
+          imageComponent={this.props.imageComponent}
           imagesPerRow={this.props.imagesPerRow}
           initialNumToRender={this.props.initialNumToRender}
           removeClippedSubviews={this.props.removeClippedSubviews}