Overlay component borderRadius fix (#3058)

* fixed borderRadius in Overlay component, added exmaple in the Image screen

* fixed review notes

* revert isVertical const

Author: adids1221

demo/src/screens/componentScreens/ImageScreen.tsx

@@ -70,7 +70,8 @@ class ImageScreen extends Component<{}, State> {
     showErrorImage: false,
     showSvg: false,
     svgType: SvgType.File,
-    sizeType: SizeType.None
+    sizeType: SizeType.None,
+    borderRadius: 0
   };
 
   getSvgSource() {
@@ -113,7 +114,7 @@ class ImageScreen extends Component<{}, State> {
   }
 
   renderImage() {
-    const {cover, overlayType, overlayIntensity, margin, showErrorImage} = this.state;
+    const {cover, overlayType, overlayIntensity, margin, showErrorImage, borderRadius} = this.state;
     return (
       <Image
         key={`${overlayType}-${overlayIntensity}`}
@@ -127,6 +128,7 @@ class ImageScreen extends Component<{}, State> {
         height={!cover ? DEFAULT_SIZE : undefined}
         customOverlayContent={this.renderOverlayContent()}
         {...{[`margin-${margin}`]: true}}
+        borderRadius={borderRadius}
       />
     );
   }
@@ -157,6 +159,7 @@ class ImageScreen extends Component<{}, State> {
           {renderRadioGroup.call(this, 'Overlay Intensity', 'overlayIntensity', Image.overlayIntensityType)}
         </View>
         {renderSliderOption.call(this, 'Margin(margin-XX)', 'margin', {step: 4, min: 0, max: 40})}
+        {renderSliderOption.call(this, 'Border Radius', 'borderRadius', {step: 5, min: 0, max: 100})}
       </>
     );
   }

src/components/overlay/index.tsx

@@ -21,7 +21,7 @@ export enum OverlayIntensityType {
   HIGH = 'high'
 }
 
-export type OverlayTypeType = typeof OVERLY_TYPES[keyof typeof OVERLY_TYPES];
+export type OverlayTypeType = (typeof OVERLY_TYPES)[keyof typeof OVERLY_TYPES];
 
 export type OverlayTypes = Pick<ImageProps, 'borderRadius'> & {
   /**
@@ -88,8 +88,7 @@ class Overlay extends PureComponent<OverlayTypes> {
   };
 
   renderImage = (style: any, source: ImageSourcePropType) => {
-    const {borderRadius} = this.props;
-    return <Image style={[styles.container, style]} resizeMode={'stretch'} source={source} borderRadius={borderRadius}/>;
+    return <Image style={[styles.container, style]} resizeMode={'stretch'} source={source}/>;
   };
 
   getImageSource = (type?: OverlayTypeType, intensity?: OverlayTypes['intensity']) => {
@@ -105,24 +104,24 @@ class Overlay extends PureComponent<OverlayTypes> {
   };
 
   render() {
-    const {type, intensity, customContent} = this.props;
+    const {type, intensity, customContent, borderRadius} = this.props;
     const imageSource = this.getImageSource(type, intensity);
 
-    if (type === OVERLY_TYPES.VERTICAL) {
-      return (
-        <>
-          {this.renderImage([this.getStyleByType(OVERLY_TYPES.TOP), styles.vertical], imageSource)}
-          {this.renderImage([this.getStyleByType(OVERLY_TYPES.BOTTOM), styles.vertical], imageSource)}
-          {customContent && this.renderCustomContent()}
-        </>
-      );
-    }
-
     return (
-      <>
-        {type && this.renderImage(this.getStyleByType(), imageSource)}
-        {customContent && this.renderCustomContent()}
-      </>
+      <View flex style={{overflow: 'hidden', borderRadius}}>
+        {type === OVERLY_TYPES.VERTICAL ? (
+          <>
+            {this.renderImage([this.getStyleByType(OVERLY_TYPES.TOP), styles.vertical], imageSource)}
+            {this.renderImage([this.getStyleByType(OVERLY_TYPES.BOTTOM), styles.vertical], imageSource)}
+            {customContent && this.renderCustomContent()}
+          </>
+        ) : (
+          <>
+            {type && this.renderImage(this.getStyleByType(), imageSource)}
+            {customContent && this.renderCustomContent()}
+          </>
+        )}
+      </View>
     );
   }
 }
@@ -134,14 +133,12 @@ const styles = StyleSheet.create({
   },
   top: {
     bottom: undefined,
-    top: 0,
     height: '75%'
   },
   bottom: {
-    bottom: 0,
     top: undefined,
-    height: '75%',
-    transform: [{scaleY: -1}]
+    transform: [{scaleY: -1}],
+    height: '75%'
   },
   vertical: {
     height: '40%'