Merge branch 'asessa-patch-1- added badges feature'

SegmentedControlTab.js

@@ -17,12 +17,13 @@ const handleTabPress = (index, multiple, selectedIndex, onTabPress) => {
     }
 };
 
-
 const TabOption = ({
-    isTabActive, index, text,
+    isTabActive, index, badge, text,
     firstTabStyle, lastTabStyle,
     tabStyle, activeTabStyle,
     tabTextStyle, activeTabTextStyle,
+    tabBadgeContainerStyle, activeTabBadgeContainerStyle,
+    tabBadgeStyle, activeTabBadgeStyle,
     onTabPress,
 }) => {
     return (
@@ -34,23 +35,41 @@ const TabOption = ({
             lastTabStyle]}
             onPress={() => onTabPress(index)}
             activeOpacity={1}>
-            <Text style={[
-                styles.tabTextStyle,
-                tabTextStyle,
-                isTabActive ? [styles.activeTabTextStyle, activeTabTextStyle] : {}]}
-                numberOfLines={1}
-                ellipsizeMode="tail">
-                {text}
-            </Text>
+            <View style={{flexDirection:"row"}}>
+              <Text style={[
+                  styles.tabTextStyle,
+                  tabTextStyle,
+                  isTabActive ? [styles.activeTabTextStyle, activeTabTextStyle] : {}]}
+                  numberOfLines={1}
+                  ellipsizeMode="tail">
+                  {text}
+              </Text>
+              {
+                  badge ?
+                  <View style={[
+                      styles.tabBadgeContainerStyle,
+                      tabBadgeContainerStyle,
+                      isTabActive ? [styles.activeTabBadgeContainerStyle, activeTabBadgeContainerStyle]: {}]}>
+                      <Text style={[
+                          styles.tabBadgeStyle,
+                          tabBadgeStyle,
+                          isTabActive ? [styles.activeTabBadgeStyle, activeTabBadgeStyle]: {}]}>
+                          {badge}
+                      </Text>
+                  </View>: false
+              }
+          </View>
         </TouchableOpacity>
     );
 }
 
 const SegmentedControlTab = ({
     multiple, selectedIndex, selectedIndices, values,
-    borderRadius, tabsContainerStyle,
+    badges, borderRadius, tabsContainerStyle,
     tabStyle, activeTabStyle,
     tabTextStyle, activeTabTextStyle,
+    tabBadgeContainerStyle, activeTabBadgeContainerStyle,
+    tabBadgeStyle, activeTabBadgeStyle,
     onTabPress,
 }) => {
     const firstTabStyle = [{ borderTopLeftRadius: borderRadius, borderBottomLeftRadius: borderRadius }];
@@ -66,15 +85,20 @@ const SegmentedControlTab = ({
                         <TabOption
                             key={index}
                             index={index}
+                            badge={badges && badges[index] ? badges[index] : false}
                             isTabActive={multiple ? selectedIndices.includes(index) : selectedIndex === index}
                             text={item}
                             onTabPress={(index) => handleTabPress(index, multiple, selectedIndex, onTabPress)}
-                            firstTabStyle={index === 0 ? firstTabStyle : {}}
-                            lastTabStyle={index === values.length - 1 ? lastTabStyle : {}}
+                            firstTabStyle={index === 0 ? [{ borderRightWidth: 0 }, firstTabStyle ] : {}}
+                            lastTabStyle={index === values.length - 1 ? [{ borderLeftWidth: 0 }, lastTabStyle ] : {}}
                             tabStyle={[tabStyle, index !== 0 && index !== values.length - 1 ? { marginHorizontal: -1 } : {}]}
                             activeTabStyle={activeTabStyle}
                             tabTextStyle={tabTextStyle}
-                            activeTabTextStyle={activeTabTextStyle} />
+                            activeTabTextStyle={activeTabTextStyle}
+                            tabBadgeContainerStyle={tabBadgeContainerStyle}
+                            activeTabBadgeContainerStyle={activeTabBadgeContainerStyle}
+                            tabBadgeStyle={tabBadgeStyle}
+                            activeTabBadgeStyle={activeTabBadgeStyle} />
                     );
                 })
             }
@@ -84,6 +108,7 @@ const SegmentedControlTab = ({
 
 SegmentedControlTab.propTypes = {
     values: PropTypes.array,
+    badges: PropTypes.array,
     multiple: PropTypes.bool,
     onTabPress: PropTypes.func,
     selectedIndex: PropTypes.number,
@@ -93,11 +118,16 @@ SegmentedControlTab.propTypes = {
     activeTabStyle: ViewPropTypes.style,
     tabTextStyle: Text.propTypes.style,
     activeTabTextStyle: Text.propTypes.style,
+    tabBadgeContainerStyle: Text.propTypes.style,
+    activeTabBadgeContainerStyle: Text.propTypes.style,
+    tabBadgeStyle: Text.propTypes.style,
+    activeTabBadgeStyle: Text.propTypes.style,
     borderRadius: PropTypes.number
 }
 
 SegmentedControlTab.defaultProps =  {
     values: ['One', 'Two', 'Three'],
+    badges: ['', '', ''],
     multiple: false,
     selectedIndex: 0,
     selectedIndices: [0],
@@ -107,6 +137,10 @@ SegmentedControlTab.defaultProps =  {
     activeTabStyle: {},
     textStyle: {},
     activeTextStyle: {},
+    tabBadgeContainerStyle: {},
+    activeTabBadgeContainerStyle: {},
+    tabBadgeStyle: {},
+    activeTabBadgeStyle: {},
     borderRadius: 5
 }
 
@@ -132,6 +166,25 @@ const styles = StyleSheet.create({
     },
     activeTabTextStyle: {
         color: 'white'
+    },
+    tabBadgeContainerStyle: {
+        borderRadius: 20,
+        backgroundColor: 'red',
+        paddingLeft: 5,
+        paddingRight: 5,
+        marginLeft: 5,
+        marginBottom: 3
+    },
+    activeTabBadgeContainerStyle: {
+        backgroundColor: 'white'
+    },
+    tabBadgeStyle: {
+        color: 'white',
+        fontSize: 11,
+        fontWeight: 'bold'
+    },
+    activeTabBadgeStyle: {
+        color: 'black'
     }
 })