feat: add renderItem

Author: Alessandro Diez

Example/app.js

@@ -27,6 +27,15 @@ const renderCarousel = () => (
     <View style={{ backgroundColor: '#E67E22', flex: 1 }}/>
   </Carousel>
 )
+
+const renderItem = (open) => (
+  <View style={styles.customItemBox}>
+    <TouchableOpacity onPress={open} style={styles.customItemButton}>
+      <Text style={styles.customItemText}>I'm a custom element</Text>
+    </TouchableOpacity>
+  </View>
+)
+
 export default () => (
     <SafeAreaView>
       <ScrollView style={styles.container}>
@@ -67,6 +76,14 @@ export default () => (
           </Lightbox>
         </View>
         <View style={styles.text}><Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </Text></View>
+        <Lightbox renderItem={renderItem}>
+          <Image
+            style={styles.contain}
+            resizeMode="contain"
+            source={{ uri: 'https://www.yayomg.com/wp-content/uploads/2014/04/yayomg-pig-wearing-party-hat.jpg' }}
+          />
+        </Lightbox>
+        <View style={styles.text}><Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </Text></View>
       </ScrollView>
     </SafeAreaView>
 )
@@ -127,4 +144,18 @@ const styles = StyleSheet.create({
   text: {
     marginVertical: BASE_PADDING * 2,
   },
+  customItemBox: {
+    height: 150,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  customItemButton: {
+    backgroundColor: '#000000',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  customItemText: {
+    padding: 20,
+    color: '#FFFFFF'
+  }
 });

README.md

@@ -83,6 +83,7 @@ const MyApp = () => (
 |**`activeProps`**|`object`|Optional set of props applied to the content component when in lightbox mode. Usable for applying custom styles or higher resolution image source.|
 |**`renderHeader(close)`**|`function`|Custom header instead of default with X button|
 |**`renderContent`**|`function`|Custom lightbox content instead of default child content|
+|**`renderItem(open)`**|`function`|Custom content instead of default child content|
 |**`willClose`**|`function`|Triggered before lightbox is closed|
 |**`onClose`**|`function`|Triggered when lightbox is closed|
 |**`onOpen`**|`function`|Triggered when lightbox is opened|

src/Lightbox.tsx

@@ -34,6 +34,7 @@ export interface LightboxProps<T = any> extends IGestureProps {
   activeProps?: Record<string, T>;
   renderContent?: Func<T, JSX.Element>;
   renderHeader?: Func<T, JSX.Element>;
+  renderItem?: Func<T, JSX.Element>;
   didOpen?: Func<T, void>;
   onOpen?: Func<T, void>;
   willClose?: Func<T, void>;
@@ -58,6 +59,7 @@ const Lightbox: React.FC<LightboxProps> = ({
   disabled = false,
   renderContent,
   renderHeader,
+  renderItem,
   didOpen = noop,
   onOpen = noop,
   willClose = noop,
@@ -139,17 +141,27 @@ const Lightbox: React.FC<LightboxProps> = ({
     ...rest,
   });
 
-  return (
-    <View ref={_root} style={style} onLayout={onLayout}>
-      <Animated.View style={{ opacity: layoutOpacity.current }}>
-        <TouchableHighlight
+  const _renderItem = () => {
+    if (renderItem) {
+      return renderItem(open);
+    }
+
+    return (
+      <TouchableHighlight
           underlayColor={underlayColor}
           onPress={open}
           onLongPress={onLongPress}
           disabled={disabled}
         >
           {children}
-        </TouchableHighlight>
+      </TouchableHighlight>
+    );
+  }
+
+  return (
+    <View ref={_root} style={style} onLayout={onLayout}>
+      <Animated.View style={{ opacity: layoutOpacity.current }}>
+        {_renderItem()}
       </Animated.View>
       {disabled ? null : <LightboxOverlay {...getOverlayProps()} />}
     </View>

src/LightboxOverlay.tsx

@@ -19,7 +19,7 @@ import { useGesture, IGestureProps, useNextTick } from "./hooks";
 
 type OmitedLightboxProps = Omit<
   LightboxProps,
-  "style" | "disabled" | "underlayColor" | "activeProps" | "renderContent"
+  "style" | "disabled" | "underlayColor" | "activeProps" | "renderContent" | "renderItem"
 >;
 
 export interface LightboxOverlayProps

yarn.lock

@@ -0,0 +1,34 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"js-tokens@^3.0.0 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
+prop-types@^15.7.2:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
+react-is@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==