From 6407d0b3ddc07d2a1465a78271497fa2fb1118ce Mon Sep 17 00:00:00 2001
From: Galeel Bhasha Satthar <gbhasha@gmail.com>
Date: Mon, 6 Aug 2018 20:24:03 +0530
Subject: [PATCH] Temp Fix for the bleeding border
 issue(https://github.com/facebook/react-native/issues/17998). Revisit  after
 this PR merged to RN - https://github.com/facebook/react-native/pull/19451

---
 Example/ExampleMain.js | 3 ++-
 index.js               | 8 ++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/Example/ExampleMain.js b/Example/ExampleMain.js
index cef7041..9c145a8 100644
--- a/Example/ExampleMain.js
+++ b/Example/ExampleMain.js
@@ -39,6 +39,7 @@ class ExampleMain extends Component {
             <View style={styles.container}>
                 <Text style={styles.headerText} >Default segmented control with single selection</Text>
                 <SegmentedControlTab
+                    values={["one", "two"]}
                     selectedIndex={this.state.selectedIndex}
                     tabStyle={styles.tabStyle}
                     activeTabStyle={styles.activeTabStyle}
@@ -111,7 +112,7 @@ const styles = StyleSheet.create({
         marginVertical: 24
     },
     tabStyle: {
-        borderColor: '#D52C43'
+        borderColor: '#000000'
     },
     activeTabStyle: {
         backgroundColor: '#D52C43'
diff --git a/index.js b/index.js
index 5bf2694..22e703d 100644
--- a/index.js
+++ b/index.js
@@ -78,7 +78,7 @@ const SegmentedControlTab = ({
     accessibilityLabels,
 }) => {
 
-    const firstTabStyle = [{ borderRightWidth: values.length == 2 ? 1 : 0, borderTopLeftRadius: borderRadius, borderBottomLeftRadius: borderRadius }]
+    const firstTabStyle = [{ borderRightWidth: 0, borderTopLeftRadius: borderRadius, borderBottomLeftRadius: borderRadius}]
     const lastTabStyle = [{ borderLeftWidth: 0, borderTopRightRadius: borderRadius, borderBottomRightRadius: borderRadius }]
 
     return (
@@ -97,9 +97,9 @@ const SegmentedControlTab = ({
                             text={item}
                             textNumberOfLines={textNumberOfLines}
                             onTabPress={(index) => handleTabPress(index, selectedIndex, onTabPress)}
-                            firstTabStyle={index === 0 ? [{ borderRightWidth: 0 }, firstTabStyle] : {}}
-                            lastTabStyle={index === values.length - 1 ? [{ borderLeftWidth: 0 }, lastTabStyle] : {}}
-                            tabStyle={[tabStyle, index !== 0 && index !== values.length - 1 ? { marginLeft: -1 } : {}]}
+                            firstTabStyle={index === 0 ? [firstTabStyle] : {}}
+                            lastTabStyle={index === values.length - 1 ? [lastTabStyle] : {}}
+                            tabStyle={[tabStyle]}
                             activeTabStyle={activeTabStyle}
                             tabTextStyle={tabTextStyle}
                             activeTabTextStyle={activeTabTextStyle}