From e6aecca25d9c4944767b908199f8cace4b859837 Mon Sep 17 00:00:00 2001
From: Andrea Sessa <andrea.sessa@gmail.com>
Date: Sun, 2 Apr 2017 12:32:18 +0200
Subject: [PATCH 1/2] Added support for badges

---
 SegmentedControlTab.js | 73 ++++++++++++++++++++++++++++++++++++------
 1 file changed, 63 insertions(+), 10 deletions(-)

diff --git a/SegmentedControlTab.js b/SegmentedControlTab.js
index ee2a660..306dce4 100644
--- a/SegmentedControlTab.js
+++ b/SegmentedControlTab.js
@@ -15,12 +15,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 (
@@ -32,21 +33,39 @@ const TabOption = ({
             lastTabStyle]}
             onPress={() => onTabPress(index)}
             activeOpacity={1}>
-            <Text style={[
-                styles.textStyle,
-                tabTextStyle,
-                isTabActive ? [styles.activeTabTextStyle, activeTabTextStyle] : {}]}>
-                {text}
-            </Text>
+            <View style={{flexDirection:"row"}}>
+                <Text style={[
+                    styles.textStyle,
+                    tabTextStyle,
+                    isTabActive ? [styles.activeTabTextStyle, activeTabTextStyle] : {}]}>
+                    {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 }];
@@ -62,6 +81,7 @@ 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)}
@@ -70,7 +90,11 @@ const SegmentedControlTab = ({
                             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} />
                     );
                 })
             }
@@ -80,6 +104,7 @@ const SegmentedControlTab = ({
 
 SegmentedControlTab.propTypes = Object.assign({}, Component.propTypes, {
     values: PropTypes.array,
+    badges: PropTypes.array,
     multiple: PropTypes.bool,
     onTabPress: PropTypes.func,
     selectedIndex: PropTypes.number,
@@ -89,11 +114,16 @@ SegmentedControlTab.propTypes = Object.assign({}, Component.propTypes, {
     activeTabStyle: View.propTypes.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 = Object.assign({}, Component.propTypes, {
     values: ['One', 'Two', 'Three'],
+    badges: ['', '', ''],
     multiple: false,
     selectedIndex: 0,
     selectedIndices: [0],
@@ -103,6 +133,10 @@ SegmentedControlTab.defaultProps = Object.assign({}, Component.propTypes, {
     activeTabStyle: {},
     textStyle: {},
     activeTextStyle: {},
+    tabBadgeContainerStyle: {},
+    activeTabBadgeContainerStyle: {},
+    tabBadgeStyle: {},
+    activeTabBadgeStyle: {},
     borderRadius: 5
 })
 
@@ -128,6 +162,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'
     }
 })
 

From e9151fa75065f89c3edb9df86e2e1b10d07a97a9 Mon Sep 17 00:00:00 2001
From: Andrea Sessa <andrea.sessa@gmail.com>
Date: Tue, 4 Apr 2017 16:27:32 +0200
Subject: [PATCH 2/2] Fixed RN glitch on iOS

---
 SegmentedControlTab.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/SegmentedControlTab.js b/SegmentedControlTab.js
index 306dce4..ebf3446 100644
--- a/SegmentedControlTab.js
+++ b/SegmentedControlTab.js
@@ -85,8 +85,8 @@ const SegmentedControlTab = ({
                             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}