Skip to content

Commit 6407d0b

Browse files
committed
Temp Fix for the bleeding border issue(facebook/react-native#17998).
Revisit after this PR merged to RN - facebook/react-native#19451
1 parent 58e47bd commit 6407d0b

File tree

2 files changed

+6
-5
lines changed

2 files changed

+6
-5
lines changed

Example/ExampleMain.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ class ExampleMain extends Component {
3939
<View style={styles.container}>
4040
<Text style={styles.headerText} >Default segmented control with single selection</Text>
4141
<SegmentedControlTab
42+
values={["one", "two"]}
4243
selectedIndex={this.state.selectedIndex}
4344
tabStyle={styles.tabStyle}
4445
activeTabStyle={styles.activeTabStyle}
@@ -111,7 +112,7 @@ const styles = StyleSheet.create({
111112
marginVertical: 24
112113
},
113114
tabStyle: {
114-
borderColor: '#D52C43'
115+
borderColor: '#000000'
115116
},
116117
activeTabStyle: {
117118
backgroundColor: '#D52C43'

index.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ const SegmentedControlTab = ({
7878
accessibilityLabels,
7979
}) => {
8080

81-
const firstTabStyle = [{ borderRightWidth: values.length == 2 ? 1 : 0, borderTopLeftRadius: borderRadius, borderBottomLeftRadius: borderRadius }]
81+
const firstTabStyle = [{ borderRightWidth: 0, borderTopLeftRadius: borderRadius, borderBottomLeftRadius: borderRadius}]
8282
const lastTabStyle = [{ borderLeftWidth: 0, borderTopRightRadius: borderRadius, borderBottomRightRadius: borderRadius }]
8383

8484
return (
@@ -97,9 +97,9 @@ const SegmentedControlTab = ({
9797
text={item}
9898
textNumberOfLines={textNumberOfLines}
9999
onTabPress={(index) => handleTabPress(index, selectedIndex, onTabPress)}
100-
firstTabStyle={index === 0 ? [{ borderRightWidth: 0 }, firstTabStyle] : {}}
101-
lastTabStyle={index === values.length - 1 ? [{ borderLeftWidth: 0 }, lastTabStyle] : {}}
102-
tabStyle={[tabStyle, index !== 0 && index !== values.length - 1 ? { marginLeft: -1 } : {}]}
100+
firstTabStyle={index === 0 ? [firstTabStyle] : {}}
101+
lastTabStyle={index === values.length - 1 ? [lastTabStyle] : {}}
102+
tabStyle={[tabStyle]}
103103
activeTabStyle={activeTabStyle}
104104
tabTextStyle={tabTextStyle}
105105
activeTabTextStyle={activeTabTextStyle}

0 commit comments

Comments
 (0)