add border radius to badge (#865)

* add border radius to badge

* change examples

* remove commented examples

Co-authored-by: Lidor Dafna <[email protected]>

Author: lidord-wix

.gitignore

@@ -29,6 +29,8 @@ build/
 .gradle
 local.properties
 *.iml
+android/gradlew.bat
+expoDemo/android/gradlew.bat
 
 # node.js
 #
@@ -65,3 +67,4 @@ package-lock.json
 /ios/Pods/
 /ios/Podfile.lock
 expoDemo/ios/Pods
+

demo/src/screens/componentScreens/BadgesScreen.js

@@ -5,6 +5,8 @@ const BadgesSpace = 30;
 const plusIcon = require('../../assets/icons/chevronUp.png');
 const minusIcon = require('../../assets/icons/chevronDown.png');
 const star = require('../../assets/icons/star.png');
+const search = require('../../assets/icons/search.png');
+
 
 export default class BadgesScreen extends Component {
   constructor(props) {
@@ -127,6 +129,13 @@ export default class BadgesScreen extends Component {
               large(24)
             </Text>
           </View>
+
+          <View style={styles.iconBadgeColumnContainer}>
+            <Badge icon={star} borderRadius={6} iconStyle={{backgroundColor: Colors.red30}}/>
+            <Text text80 style={{marginTop: 10}}>
+              border radius (6)
+            </Text>
+          </View>
         </View>
       </ScrollView>
     );

src/components/badge/index.js

@@ -57,6 +57,10 @@ export default class Badge extends PureBaseComponent {
      * width of border around the badge
      */
     borderWidth: PropTypes.number,
+    /**
+     * radius of border around the badge
+     */
+    borderRadius: PropTypes.number,
     /**
      * color of border around the badge
      */
@@ -174,11 +178,16 @@ export default class Badge extends PureBaseComponent {
   }
 
   getBorderStyling() {
-    const {borderWidth, borderColor} = this.props;
-    return {
-      borderWidth,
-      borderColor
-    };
+    const {borderWidth, borderColor, borderRadius} = this.props;
+    const style = {};
+    if (borderWidth) {
+      style.borderWidth = borderWidth;
+      style.borderColor = borderColor;
+    }
+    if (borderRadius) {
+      style.borderRadius = borderRadius;
+    }
+    return style;
   }
 
   renderLabel() {
@@ -218,7 +227,6 @@ export default class Badge extends PureBaseComponent {
     // TODO: remove testId after deprecation
     const {
       activeOpacity,
-      borderWidth,
       backgroundColor,
       containerStyle,
       hitSlop,
@@ -230,7 +238,7 @@ export default class Badge extends PureBaseComponent {
     } = this.props;
     const backgroundStyle = backgroundColor && {backgroundColor};
     const sizeStyle = this.getBadgeSizeStyle();
-    const borderStyle = borderWidth ? this.getBorderStyling() : undefined;
+    const borderStyle = this.getBorderStyling();
 
     const animationProps = this.extractAnimationProps();
     const Container = !_.isEmpty(animationProps) ? AnimatableView : onPress ? TouchableOpacity : View;
@@ -240,7 +248,7 @@ export default class Badge extends PureBaseComponent {
     }
     return (
       // The extra View wrapper is to break badge's flex-ness
-      <View style={containerStyle} {...others} backgroundColor={undefined} {...this.getAccessibilityProps()}>
+      <View style={containerStyle} {...others} backgroundColor={undefined} borderWidth={undefined} {...this.getAccessibilityProps()}>
         <Container
           testID={testID || testId}
           pointerEvents={'none'}