Feat/Image - custom overlay #616
Conversation
ArnonZ
commented
Jan 12, 2020
ArnonZ
commented
- Added support for rendering a custom overlay for Image component (can be stacked with already supported overlays).
src/components/overlay/index.js
Outdated
| /** | ||
| * Custom overlay content to be rendered on top of the image | ||
| */ | ||
| customContent: PropTypes.func |
There was a problem hiding this comment.
better define it as an element prop type
src/components/overlay/index.js
Outdated
| @@ -44,22 +48,32 @@ export default class Overlay extends PureBaseComponent { | |||
| } | |||
| } | |||
|
|
|||
| renderCustomContent = () => { | |||
| const {customContent} = this.props; | |||
| return <View style={styles.customContent}>{customContent()}</View>; | |||
There was a problem hiding this comment.
Better pass pointerEvents to the wrapping View to avoid touch block
| return ( | ||
| <View style={[styles.container]}> | ||
| {this.renderImage(styles.top)} | ||
| {this.renderImage(styles.bottom)} | ||
| {customContent && this.renderCustomContent()} |
There was a problem hiding this comment.
you render the custom content too many times, in this example
<Image
customOverlay={() => <View><Text>A</Text></View> }
overlayType={'vertical'}
style={{width: 100, height: 100}}
source={{
uri:
'https://images.pexels.com/photos/3326362/pexels-photo-3326362.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
}}
/>
it will be rendered 3 times.
| return ( | ||
| <Image | ||
| style={{ | ||
| position: 'absolute', |
There was a problem hiding this comment.
Consider moving this big style chunk to a stylesheet
src/components/image/index.js
Outdated
| /** | ||
| * Render an overlay with custom content | ||
| */ | ||
| customOverlay: PropTypes.func |
There was a problem hiding this comment.
Consider renaming to customOverlayContent cause customOverlay sounds like you can provide custom gradient overlay
src/components/overlay/index.js
Outdated
| <View style={styles.container}> | ||
| {type && <Image style={[styles.container, typeStyle]} resizeMode={'stretch'} source={image}/>} | ||
| {customContent && this.renderCustomContent()} | ||
| <View pointerEvents="none" style={styles.customContent}> |
There was a problem hiding this comment.
use box-none so the next custom content won't be blocked
|
|
||
| if (type === OVERLY_TYPES.VERTICAL) { | ||
| return ( | ||
| <View style={[styles.container]}> |
There was a problem hiding this comment.
Consider using Fragment (<>) instead of the container View for both Vertical case and the other case
