Feat/Badge - Add onPress. (#519)

* Added onPress

* Revert of unneeded styling

* Unneeded file commit

Author: ArnonZ

demo/src/screens/componentScreens/BadgesScreen.js

@@ -29,25 +29,8 @@ export default class BadgesScreen extends Component {
         <Text text50 row center marginB-15>
           Badges
         </Text>
-        <View row center>
-          <View center marginH-10>
-            <Badge label={'10'} backgroundColor={Colors.blue30} />
-            <Badge
-              label={'10'}
-              containerStyle={{marginTop: BadgesSpace}}
-              backgroundColor={Colors.blue30}
-              borderWidth={3}
-              borderColor={Colors.blue50}
-            />
-            <Badge
-              size="small"
-              label={'10'}
-              containerStyle={{marginTop: BadgesSpace}}
-              backgroundColor={Colors.blue30}
-            />
-          </View>
-
-          <View center marginH-10>
+        <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()}
@@ -63,7 +46,7 @@ export default class BadgesScreen extends Component {
             />
           </View>
 
-          <View center marginH-10>
+          <View center paddingH-10>
             <Badge label={'9999'} labelFormatterLimit={3} />
             <Badge
               label={'999'}
@@ -74,19 +57,6 @@ export default class BadgesScreen extends Component {
             />
             <Badge labelFormatterLimit={1} size="small" label={'99999999'} containerStyle={{marginTop: BadgesSpace}} />
           </View>
-
-          <View center marginH-10>
-            <Badge size={28} label={'9999'} labelFormatterLimit={3} />
-            <Badge
-              size={28}
-              label={'999'}
-              labelFormatterLimit={2}
-              containerStyle={{marginTop: BadgesSpace}}
-              borderWidth={2}
-              borderColor={Colors.white}
-            />
-            <Badge size={28} labelFormatterLimit={1} label={'99999999'} containerStyle={{marginTop: BadgesSpace}} />
-          </View>
         </View>
 
         <View row paddingT-20 marginB-15>

src/components/badge/index.js

@@ -5,8 +5,9 @@ import {StyleSheet, Text, ViewPropTypes} from 'react-native';
 import {View as AnimatableView} from 'react-native-animatable';
 import {PureBaseComponent} from '../../commons';
 import {BorderRadiuses, Colors, ThemeManager, Typography} from '../../style';
-import View from '../view';
 import Image from '../image';
+import TouchableOpacity from '../touchableOpacity';
+import View from '../view';
 
 const LABEL_FORMATTER_VALUES = [1, 2, 3, 4];
 
@@ -192,13 +193,24 @@ export default class Badge extends PureBaseComponent {
 
   render() {
     // TODO: remove testId after deprecation
-    const {borderWidth, backgroundColor, borderColor, containerStyle, icon, testId, testID, ...others} = this.props;
+    const {
+      activeOpacity,
+      borderWidth,
+      backgroundColor,
+      borderColor,
+      containerStyle,
+      icon,
+      onPress,
+      testId,
+      testID,
+      ...others
+    } = this.props;
     const backgroundStyle = backgroundColor && {backgroundColor};
     const sizeStyle = this.getBadgeSizeStyle();
     const borderStyle = borderWidth ? this.getBorderStyling() : undefined;
 
     const animationProps = this.extractAnimationProps();
-    const Container = !_.isEmpty(animationProps) ? AnimatableView : View;
+    const Container = !_.isEmpty(animationProps) ? AnimatableView : onPress ? TouchableOpacity : View;
     if (!_.isEmpty(animationProps)) {
       console.warn(
         'Badge component will soon stop supporting animationProps.' +
@@ -213,6 +225,8 @@ export default class Badge extends PureBaseComponent {
           testID={testID || testId}
           pointerEvents={'none'}
           style={[sizeStyle, this.styles.badge, borderStyle, backgroundStyle]}
+          onPress={onPress}
+          activeOpacity={activeOpacity}
           {...animationProps}
         >
           {icon ? this.renderIcon() : this.renderLabel()}