Temp Fix for the bleeding border issue(facebook/react-native#17998).

Revisit after this PR merged to RN - facebook/react-native#19451
gbhasha · Aug 6, 2018 · 6407d0b · 6407d0b
1 parent 58e47bd
commit 6407d0b
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git 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
@@ -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}