Feat/Image - custom overlay

demo/src/screens/componentScreens/BadgesScreen.js

@@ -11,7 +11,7 @@ export default class BadgesScreen extends Component {
     super(props);
 
     this.state = {
-      value: 42,
+      value: 42
     };
   }
 
@@ -31,7 +31,7 @@ export default class BadgesScreen extends Component {
         </Text>
         <View row center style={{alignItems: 'flex-start'}}>
           <View center paddingH-10>
-            <Badge label={this.state.value.toString()} backgroundColor={Colors.red30} />
+            <Badge label={this.state.value.toString()} backgroundColor={Colors.red30}/>
             <Badge
               label={this.state.value.toString()}
               containerStyle={{marginTop: BadgesSpace}}
@@ -47,15 +47,15 @@ export default class BadgesScreen extends Component {
           </View>
 
           <View center paddingH-10>
-            <Badge label={'9999'} labelFormatterLimit={3} />
+            <Badge label={'9999'} labelFormatterLimit={3}/>
             <Badge
               label={'999'}
               labelFormatterLimit={2}
               containerStyle={{marginTop: BadgesSpace}}
               borderWidth={2}
               borderColor={Colors.white}
             />
-            <Badge labelFormatterLimit={1} size="small" label={'99999999'} containerStyle={{marginTop: BadgesSpace}} />
+            <Badge labelFormatterLimit={1} size="small" label={'99999999'} containerStyle={{marginTop: BadgesSpace}}/>
           </View>
         </View>
 
@@ -89,40 +89,40 @@ export default class BadgesScreen extends Component {
             style={{justifyContent: 'space-around', alignItems: 'flex-start', width: 140, height: 140}}
           >
             <Text text80 row>
-              size={"{'pimpleSmall'}"}
+              size={'{\'pimpleSmall\'}'}
             </Text>
-            <Text text80>size={"{'pimpleBig'}"}</Text>
+            <Text text80>size={'{\'pimpleBig\'}'}</Text>
             <Text text80 row>
-              size={"{'pimpleHuge'}"}
+              size={'{\'pimpleHuge\'}'}
             </Text>
           </View>
 
           <View center column style={{justifyContent: 'space-around', width: 40, height: 140}}>
-            <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.green30} size={'pimpleSmall'} />
-            <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.red30} size={'pimpleBig'} />
-            <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.blue30} size={'pimpleHuge'} />
+            <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.green30} size={'pimpleSmall'}/>
+            <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.red30} size={'pimpleBig'}/>
+            <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.blue30} size={'pimpleHuge'}/>
           </View>
         </View>
         <Text text50 marginB-10 row center marginT-25>
           Icon Badges
         </Text>
         <View row paddingH-15>
           <View style={styles.iconBadgeColumnContainer}>
-            <Badge size={'small'} icon={star} borderWidth={1} borderColor={Colors.red30} />
+            <Badge size={'small'} icon={star} borderWidth={1} borderColor={Colors.red30}/>
             <Text text80 style={{marginTop: 10}}>
               small(16)
             </Text>
           </View>
 
           <View style={styles.iconBadgeColumnContainer}>
-            <Badge icon={star} iconStyle={{tintColor: Colors.red30}} />
+            <Badge icon={star} iconStyle={{tintColor: Colors.red30}}/>
             <Text text80 style={{marginTop: 10}}>
               default(20)
             </Text>
           </View>
 
           <View style={styles.iconBadgeColumnContainer}>
-            <Badge size={'large'} icon={star} iconStyle={{backgroundColor: Colors.red30}} />
+            <Badge size={'large'} icon={star} iconStyle={{backgroundColor: Colors.red30}}/>
             <Text text80 style={{marginTop: 10}}>
               large(24)
             </Text>
@@ -137,12 +137,12 @@ const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
     padding: 20,
-    backgroundColor: Colors.dark70,
+    backgroundColor: Colors.dark70
   },
   iconBadgeColumnContainer: {
     flex: 1,
     justifyContent: 'space-between',
     alignItems: 'center',
-    flexDirection: 'column',
-  },
+    flexDirection: 'column'
+  }
 });

demo/src/screens/componentScreens/OverlaysScreen.js

@@ -1,22 +1,37 @@
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {View, Text, Image, Card, Constants} from 'react-native-ui-lib'; // eslint-disable-line
+import {View, Text, Image, Card, Constants, Colors} from 'react-native-ui-lib'; // eslint-disable-line
 
 const image = require('../../assets/images/card-example.jpg');
+const customOverlayImage = require('../../assets/icons/star.png');
+const customOverlayImage2 = require('../../assets/icons/cameraSelected.png');
+
 const uri = {
   uri: 'https://images.pexels.com/photos/140234/pexels-photo-140234.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260'
 };
 
 export default class OverlaysScreen extends Component {
-  getImageWithOverlay = type => {
+  getImageWithOverlay = (type, text, customOverylay) => {
     return (
       <View centerH>
-        <Text dark10>{type}</Text>
-        <Image style={styles.image} source={image} overlayType={type}/>
+        <Text dark10>{text}</Text>
+        <Image style={styles.image} source={image} overlayType={type} customOverlayContent={customOverylay}/>
       </View>
     );
   };
 
+  renderCustomOverlay() {
+    return <Image style={styles.customOverylay} source={customOverlayImage}/>;
+  }
+
+  renderCustomOverlay2() {
+    return (
+      <View flex center>
+        <Image style={styles.customOverylay2} source={customOverlayImage2}/>
+      </View>
+    );
+  }
+
   render() {
     return (
       <ScrollView showsVerticalScrollIndicator={false}>
@@ -25,12 +40,12 @@ export default class OverlaysScreen extends Component {
             Image Overlays
           </Text>
           <View row centerH>
-            {this.getImageWithOverlay(Image.overlayTypes.VERTICAL)}
-            {this.getImageWithOverlay(Image.overlayTypes.SOLID)}
+            {this.getImageWithOverlay(Image.overlayTypes.VERTICAL, 'vertical')}
+            {this.getImageWithOverlay(Image.overlayTypes.SOLID, 'solid')}
           </View>
           <View row centerH>
-            {this.getImageWithOverlay(Image.overlayTypes.TOP)}
-            {this.getImageWithOverlay(Image.overlayTypes.BOTTOM)}
+            {this.getImageWithOverlay(Image.overlayTypes.TOP, 'top')}
+            {this.getImageWithOverlay(Image.overlayTypes.BOTTOM, 'bottom')}
           </View>
 
           <Text text60BO marginB-10 marginT-20>
@@ -47,6 +62,18 @@ export default class OverlaysScreen extends Component {
             <Image style={styles.overlayImageAbsoluteBottom} source={image} overlayType={Image.overlayTypes.BOTTOM}/>
           </View>
 
+          <Text text60BO marginB-10 marginT-20>
+            Custom Overlay
+          </Text>
+          <View row center>
+            {this.getImageWithOverlay(undefined, 'cutom overlay only', this.renderCustomOverlay())}
+            {this.getImageWithOverlay(Image.overlayTypes.SOLID, 'solid + custom', this.renderCustomOverlay2())}
+          </View>
+          <View row center>
+            {this.getImageWithOverlay(Image.overlayTypes.VERTICAL, 'vertical + custom', this.renderCustomOverlay2())}
+            {this.getImageWithOverlay(Image.overlayTypes.BOTTOM, 'bottom + custom', this.renderCustomOverlay())}
+          </View>
+
           <Text text60BO marginB-10 marginT-20>
             Card.Image Overlay
           </Text>
@@ -60,17 +87,22 @@ export default class OverlaysScreen extends Component {
         </View>
 
         <Text text60BO margin-10>
-          Image Overlay (cover, remote)
+          Image Overlay (cover, remote, custom overlay)
         </Text>
-        <Image cover source={uri} overlayType={Image.overlayTypes.VERTICAL}/>
+        <Image
+          cover
+          source={uri}
+          overlayType={Image.overlayTypes.VERTICAL}
+          customOverlayContent={this.renderCustomOverlay2()}
+        />
 
         <Text text60BO margin-10>
-        Image Overlay (cover, asset)
+          Image Overlay (cover, asset)
         </Text>
         <Image cover source={image} overlayType={Image.overlayTypes.VERTICAL}/>
 
         <Text text60BO margin-10>
-        Image Overlay (fill, specific height)
+          Image Overlay (fill, specific height)
         </Text>
         <Image source={image} overlayType={Image.overlayTypes.VERTICAL} style={styles.imageFillContainer}/>
       </ScrollView>
@@ -86,37 +118,37 @@ const styles = StyleSheet.create({
   },
   overlayImageAbsoluteContainer: {
     width: Constants.screenWidth,
-    height: 400,
+    height: 380,
     marginLeft: -20
   },
   overlayImageAbsoluteVertical: {
     position: 'absolute',
-    top: 10,
-    left: 0,
+    top: 30,
+    left: 10,
     width: 150,
     height: 150,
     margin: 5
   },
   overlayImageAbsoluteSolid: {
     position: 'absolute',
-    top: 0,
+    top: 30,
     right: 10,
     width: 150,
     height: 150,
     margin: 5
   },
   overlayImageAbsoluteTop: {
     position: 'absolute',
-    bottom: 0,
+    bottom: 20,
     left: 10,
     width: 150,
     height: 150,
     margin: 5
   },
   overlayImageAbsoluteBottom: {
     position: 'absolute',
-    bottom: 10,
-    right: 0,
+    bottom: 20,
+    right: 10,
     width: 150,
     height: 150,
     margin: 5
@@ -127,5 +159,22 @@ const styles = StyleSheet.create({
   },
   imageFillContainer: {
     height: 100
+  },
+  customOverylay: {
+    position: 'absolute',
+    left: 137,
+    top: 134,
+    width: 25,
+    height: 25,
+    tintColor: Colors.yellow20,
+    borderWidth: 1,
+    borderColor: Colors.yellow20,
+    borderRadius: 100,
+    backgroundColor: Colors.rgba(Colors.yellow20, 0.2)
+  },
+  customOverylay2: {
+    width: 40,
+    height: 40,
+    tintColor: Colors.white
   }
 });

src/components/image/index.js

@@ -49,7 +49,11 @@ class Image extends PureBaseComponent {
      * The type of overly to place on top of the image. Note: the image MUST have proper size, see examples in:
      * https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/OverlaysScreen.js
      */
-    overlayType: Overlay.propTypes.type
+    overlayType: Overlay.propTypes.type,
+    /**
+     * Render an overlay with custom content
+     */
+    customOverlayContent: PropTypes.element
   };
 
   static defaultProps = {
@@ -74,8 +78,9 @@ class Image extends PureBaseComponent {
   }
 
   shouldUseImageBackground() {
-    const {overlayType} = this.props;
-    return !!overlayType || this.isGif();
+    const {overlayType, customOverlayContent} = this.props;
+
+    return !!overlayType || this.isGif() || !_.isUndefined(customOverlayContent);
   }
 
   getImageSource() {
@@ -98,7 +103,16 @@ class Image extends PureBaseComponent {
 
   render() {
     const source = this.getImageSource();
-    const {tintColor, style, supportRTL, cover, aspectRatio, overlayType, ...others} = this.getThemeProps();
+    const {
+      tintColor,
+      style,
+      supportRTL,
+      cover,
+      aspectRatio,
+      overlayType,
+      customOverlayContent,
+      ...others
+    } = this.getThemeProps();
     const shouldFlipRTL = supportRTL && Constants.isRTL;
     const ImageView = this.shouldUseImageBackground() ? ImageBackground : RNImage;
 
@@ -117,7 +131,9 @@ class Image extends PureBaseComponent {
         {...others}
         source={source}
       >
-        {overlayType && <Overlay style={style} type={overlayType}/>}
+        {(overlayType || customOverlayContent) && (
+          <Overlay style={style} type={overlayType} customContent={customOverlayContent}/>
+        )}
       </ImageView>
     );
   }
@@ -130,7 +146,7 @@ const styles = StyleSheet.create({
   coverImage: {
     width: Constants.screenWidth,
     aspectRatio: 16 / 8
-  }, 
+  },
   gifImage: {
     overflow: 'hidden'
   }