Skip to content

Commit 7d08c13

Browse files
ArnonZethanshar
ArnonZ
authored and
ethanshar
committed
Feat/Image - custom overlay (#616)
* Lint fixes * Lint fixes * Adding support for custom overlay * Adding support for custom content overlay * Added custom overlay exmaples * Adding custom overlay * Custom content overlay * cometics * Cosmetics * Custom overlay * Custom overlay exmaple * customOverlayContent * Custom overlay content * Custom overlay content * Ui changes * Wrapping overlay image in fragment component
1 parent dbc63f0 commit 7d08c13

File tree

4 files changed

+138
-54
lines changed

4 files changed

+138
-54
lines changed

‎demo/src/screens/componentScreens/BadgesScreen.js

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default class BadgesScreen extends Component {
1111
super(props);
1212

1313
this.state = {
14-
value: 42,
14+
value: 42
1515
};
1616
}
1717

@@ -31,7 +31,7 @@ export default class BadgesScreen extends Component {
3131
</Text>
3232
<View row center style={{alignItems: 'flex-start'}}>
3333
<View center paddingH-10>
34-
<Badge label={this.state.value.toString()} backgroundColor={Colors.red30} />
34+
<Badge label={this.state.value.toString()} backgroundColor={Colors.red30}/>
3535
<Badge
3636
label={this.state.value.toString()}
3737
containerStyle={{marginTop: BadgesSpace}}
@@ -47,15 +47,15 @@ export default class BadgesScreen extends Component {
4747
</View>
4848

4949
<View center paddingH-10>
50-
<Badge label={'9999'} labelFormatterLimit={3} />
50+
<Badge label={'9999'} labelFormatterLimit={3}/>
5151
<Badge
5252
label={'999'}
5353
labelFormatterLimit={2}
5454
containerStyle={{marginTop: BadgesSpace}}
5555
borderWidth={2}
5656
borderColor={Colors.white}
5757
/>
58-
<Badge labelFormatterLimit={1} size="small" label={'99999999'} containerStyle={{marginTop: BadgesSpace}} />
58+
<Badge labelFormatterLimit={1} size="small" label={'99999999'} containerStyle={{marginTop: BadgesSpace}}/>
5959
</View>
6060
</View>
6161

@@ -89,40 +89,40 @@ export default class BadgesScreen extends Component {
8989
style={{justifyContent: 'space-around', alignItems: 'flex-start', width: 140, height: 140}}
9090
>
9191
<Text text80 row>
92-
size={"{'pimpleSmall'}"}
92+
size={'{\'pimpleSmall\'}'}
9393
</Text>
94-
<Text text80>size={"{'pimpleBig'}"}</Text>
94+
<Text text80>size={'{\'pimpleBig\'}'}</Text>
9595
<Text text80 row>
96-
size={"{'pimpleHuge'}"}
96+
size={'{\'pimpleHuge\'}'}
9797
</Text>
9898
</View>
9999

100100
<View center column style={{justifyContent: 'space-around', width: 40, height: 140}}>
101-
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.green30} size={'pimpleSmall'} />
102-
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.red30} size={'pimpleBig'} />
103-
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.blue30} size={'pimpleHuge'} />
101+
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.green30} size={'pimpleSmall'}/>
102+
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.red30} size={'pimpleBig'}/>
103+
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.blue30} size={'pimpleHuge'}/>
104104
</View>
105105
</View>
106106
<Text text50 marginB-10 row center marginT-25>
107107
Icon Badges
108108
</Text>
109109
<View row paddingH-15>
110110
<View style={styles.iconBadgeColumnContainer}>
111-
<Badge size={'small'} icon={star} borderWidth={1} borderColor={Colors.red30} />
111+
<Badge size={'small'} icon={star} borderWidth={1} borderColor={Colors.red30}/>
112112
<Text text80 style={{marginTop: 10}}>
113113
small(16)
114114
</Text>
115115
</View>
116116

117117
<View style={styles.iconBadgeColumnContainer}>
118-
<Badge icon={star} iconStyle={{tintColor: Colors.red30}} />
118+
<Badge icon={star} iconStyle={{tintColor: Colors.red30}}/>
119119
<Text text80 style={{marginTop: 10}}>
120120
default(20)
121121
</Text>
122122
</View>
123123

124124
<View style={styles.iconBadgeColumnContainer}>
125-
<Badge size={'large'} icon={star} iconStyle={{backgroundColor: Colors.red30}} />
125+
<Badge size={'large'} icon={star} iconStyle={{backgroundColor: Colors.red30}}/>
126126
<Text text80 style={{marginTop: 10}}>
127127
large(24)
128128
</Text>
@@ -137,12 +137,12 @@ const styles = StyleSheet.create({
137137
container: {
138138
alignItems: 'center',
139139
padding: 20,
140-
backgroundColor: Colors.dark70,
140+
backgroundColor: Colors.dark70
141141
},
142142
iconBadgeColumnContainer: {
143143
flex: 1,
144144
justifyContent: 'space-between',
145145
alignItems: 'center',
146-
flexDirection: 'column',
147-
},
146+
flexDirection: 'column'
147+
}
148148
});

‎demo/src/screens/componentScreens/OverlaysScreen.js

Lines changed: 68 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,37 @@
11
import React, {Component} from 'react';
22
import {StyleSheet, ScrollView} from 'react-native';
3-
import {View, Text, Image, Card, Constants} from 'react-native-ui-lib'; // eslint-disable-line
3+
import {View, Text, Image, Card, Constants, Colors} from 'react-native-ui-lib'; // eslint-disable-line
44

55
const image = require('../../assets/images/card-example.jpg');
6+
const customOverlayImage = require('../../assets/icons/star.png');
7+
const customOverlayImage2 = require('../../assets/icons/cameraSelected.png');
8+
69
const uri = {
710
uri: 'https://images.pexels.com/photos/140234/pexels-photo-140234.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260'
811
};
912

1013
export default class OverlaysScreen extends Component {
11-
getImageWithOverlay = type => {
14+
getImageWithOverlay = (type, text, customOverylay) => {
1215
return (
1316
<View centerH>
14-
<Text dark10>{type}</Text>
15-
<Image style={styles.image} source={image} overlayType={type}/>
17+
<Text dark10>{text}</Text>
18+
<Image style={styles.image} source={image} overlayType={type} customOverlayContent={customOverylay}/>
1619
</View>
1720
);
1821
};
1922

23+
renderCustomOverlay() {
24+
return <Image style={styles.customOverylay} source={customOverlayImage}/>;
25+
}
26+
27+
renderCustomOverlay2() {
28+
return (
29+
<View flex center>
30+
<Image style={styles.customOverylay2} source={customOverlayImage2}/>
31+
</View>
32+
);
33+
}
34+
2035
render() {
2136
return (
2237
<ScrollView showsVerticalScrollIndicator={false}>
@@ -25,12 +40,12 @@ export default class OverlaysScreen extends Component {
2540
Image Overlays
2641
</Text>
2742
<View row centerH>
28-
{this.getImageWithOverlay(Image.overlayTypes.VERTICAL)}
29-
{this.getImageWithOverlay(Image.overlayTypes.SOLID)}
43+
{this.getImageWithOverlay(Image.overlayTypes.VERTICAL, 'vertical')}
44+
{this.getImageWithOverlay(Image.overlayTypes.SOLID, 'solid')}
3045
</View>
3146
<View row centerH>
32-
{this.getImageWithOverlay(Image.overlayTypes.TOP)}
33-
{this.getImageWithOverlay(Image.overlayTypes.BOTTOM)}
47+
{this.getImageWithOverlay(Image.overlayTypes.TOP, 'top')}
48+
{this.getImageWithOverlay(Image.overlayTypes.BOTTOM, 'bottom')}
3449
</View>
3550

3651
<Text text60BO marginB-10 marginT-20>
@@ -47,6 +62,18 @@ export default class OverlaysScreen extends Component {
4762
<Image style={styles.overlayImageAbsoluteBottom} source={image} overlayType={Image.overlayTypes.BOTTOM}/>
4863
</View>
4964

65+
<Text text60BO marginB-10 marginT-20>
66+
Custom Overlay
67+
</Text>
68+
<View row center>
69+
{this.getImageWithOverlay(undefined, 'cutom overlay only', this.renderCustomOverlay())}
70+
{this.getImageWithOverlay(Image.overlayTypes.SOLID, 'solid + custom', this.renderCustomOverlay2())}
71+
</View>
72+
<View row center>
73+
{this.getImageWithOverlay(Image.overlayTypes.VERTICAL, 'vertical + custom', this.renderCustomOverlay2())}
74+
{this.getImageWithOverlay(Image.overlayTypes.BOTTOM, 'bottom + custom', this.renderCustomOverlay())}
75+
</View>
76+
5077
<Text text60BO marginB-10 marginT-20>
5178
Card.Image Overlay
5279
</Text>
@@ -60,17 +87,22 @@ export default class OverlaysScreen extends Component {
6087
</View>
6188

6289
<Text text60BO margin-10>
63-
Image Overlay (cover, remote)
90+
Image Overlay (cover, remote, custom overlay)
6491
</Text>
65-
<Image cover source={uri} overlayType={Image.overlayTypes.VERTICAL}/>
92+
<Image
93+
cover
94+
source={uri}
95+
overlayType={Image.overlayTypes.VERTICAL}
96+
customOverlayContent={this.renderCustomOverlay2()}
97+
/>
6698

6799
<Text text60BO margin-10>
68-
Image Overlay (cover, asset)
100+
Image Overlay (cover, asset)
69101
</Text>
70102
<Image cover source={image} overlayType={Image.overlayTypes.VERTICAL}/>
71103

72104
<Text text60BO margin-10>
73-
Image Overlay (fill, specific height)
105+
Image Overlay (fill, specific height)
74106
</Text>
75107
<Image source={image} overlayType={Image.overlayTypes.VERTICAL} style={styles.imageFillContainer}/>
76108
</ScrollView>
@@ -86,37 +118,37 @@ const styles = StyleSheet.create({
86118
},
87119
overlayImageAbsoluteContainer: {
88120
width: Constants.screenWidth,
89-
height: 400,
121+
height: 380,
90122
marginLeft: -20
91123
},
92124
overlayImageAbsoluteVertical: {
93125
position: 'absolute',
94-
top: 10,
95-
left: 0,
126+
top: 30,
127+
left: 10,
96128
width: 150,
97129
height: 150,
98130
margin: 5
99131
},
100132
overlayImageAbsoluteSolid: {
101133
position: 'absolute',
102-
top: 0,
134+
top: 30,
103135
right: 10,
104136
width: 150,
105137
height: 150,
106138
margin: 5
107139
},
108140
overlayImageAbsoluteTop: {
109141
position: 'absolute',
110-
bottom: 0,
142+
bottom: 20,
111143
left: 10,
112144
width: 150,
113145
height: 150,
114146
margin: 5
115147
},
116148
overlayImageAbsoluteBottom: {
117149
position: 'absolute',
118-
bottom: 10,
119-
right: 0,
150+
bottom: 20,
151+
right: 10,
120152
width: 150,
121153
height: 150,
122154
margin: 5
@@ -127,5 +159,22 @@ const styles = StyleSheet.create({
127159
},
128160
imageFillContainer: {
129161
height: 100
162+
},
163+
customOverylay: {
164+
position: 'absolute',
165+
left: 137,
166+
top: 134,
167+
width: 25,
168+
height: 25,
169+
tintColor: Colors.yellow20,
170+
borderWidth: 1,
171+
borderColor: Colors.yellow20,
172+
borderRadius: 100,
173+
backgroundColor: Colors.rgba(Colors.yellow20, 0.2)
174+
},
175+
customOverylay2: {
176+
width: 40,
177+
height: 40,
178+
tintColor: Colors.white
130179
}
131180
});

‎src/components/image/index.js

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,11 @@ class Image extends PureBaseComponent {
4949
* The type of overly to place on top of the image. Note: the image MUST have proper size, see examples in:
5050
* https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/OverlaysScreen.js
5151
*/
52-
overlayType: Overlay.propTypes.type
52+
overlayType: Overlay.propTypes.type,
53+
/**
54+
* Render an overlay with custom content
55+
*/
56+
customOverlayContent: PropTypes.element
5357
};
5458

5559
static defaultProps = {
@@ -74,8 +78,9 @@ class Image extends PureBaseComponent {
7478
}
7579

7680
shouldUseImageBackground() {
77-
const {overlayType} = this.props;
78-
return !!overlayType || this.isGif();
81+
const {overlayType, customOverlayContent} = this.props;
82+
83+
return !!overlayType || this.isGif() || !_.isUndefined(customOverlayContent);
7984
}
8085

8186
getImageSource() {
@@ -98,7 +103,16 @@ class Image extends PureBaseComponent {
98103

99104
render() {
100105
const source = this.getImageSource();
101-
const {tintColor, style, supportRTL, cover, aspectRatio, overlayType, ...others} = this.getThemeProps();
106+
const {
107+
tintColor,
108+
style,
109+
supportRTL,
110+
cover,
111+
aspectRatio,
112+
overlayType,
113+
customOverlayContent,
114+
...others
115+
} = this.getThemeProps();
102116
const shouldFlipRTL = supportRTL && Constants.isRTL;
103117
const ImageView = this.shouldUseImageBackground() ? ImageBackground : RNImage;
104118

@@ -117,7 +131,9 @@ class Image extends PureBaseComponent {
117131
{...others}
118132
source={source}
119133
>
120-
{overlayType && <Overlay style={style} type={overlayType}/>}
134+
{(overlayType || customOverlayContent) && (
135+
<Overlay style={style} type={overlayType} customContent={customOverlayContent}/>
136+
)}
121137
</ImageView>
122138
);
123139
}
@@ -130,7 +146,7 @@ const styles = StyleSheet.create({
130146
coverImage: {
131147
width: Constants.screenWidth,
132148
aspectRatio: 16 / 8
133-
},
149+
},
134150
gifImage: {
135151
overflow: 'hidden'
136152
}

0 commit comments

Comments
 (0)