Segment buttons still render with artifacts on device

[bencollab]

Issue #1236 is affecting me, and the proposed "fix" is not acceptable (just causes a different style problem).

react-native, react and native-base version

react-native: 0.50.3, native-base: 2.3.3

Expected behaviour

Render segment buttons without any visual artifact, and with the right border that should be present.

Actual behaviour

When running app on device (not simulator), it renders with horizontal line "streaks", especially on the left-most inactive segment button.

Steps to reproduce (code snippet or screenshot)

1. Use a Segment control in an app
2. Run the app on actual iPhone hardware (iPhone 6 in my case with iOS 11)

Screenshot of emulator/device

https://user-images.githubusercontent.com/336441/30522010-739b7bd6-9b97-11e7-80bd-ad36a0d50bfd.PNG (from issue #1236)

Is the bug present in both ios and android or in any one of them?

Only tested on iOS

Any other additional info which would help us debug the issue quicker.

When I tried adding borderRightWidth:0 as suggested by @akhil-geekyants, it seems to help clear up the artifact, but on the device, it also removes the right border from the segment buttons, so that doesn't really feel like a proper fix.

[bencollab]

I've found that by adding borderRightWidth:0 only under .first (within segmentTheme -> NativeBase.Button), it's a little better since the right-most segment can keep it's right border. However, with > 2 buttons (or no buttons active), we're still missing the border between buttons, so a better solution would really be appreciated :)

[akhil-ga]

@bencollab can you try overriding the style of first button and setting it to style={{ borderRightWidth: 0 }} and overriding the style of next button and setting style={{ borderLeftWidth: 1 }}.

[bencollab]

@akhil-geekyants Yes, that fixes it, but I'm trying to figure out if there's a general solution that doesn't require overriding styles on every Segment button group (and avoids having to do something for the special case of the second button). When I tried switching the default NativeBase.Button to have borderRightWidth: 0 (instead of left), removed borderLeftWidth: 1 from .first, and added borderRightWidth: 1 to .last, it just made the same visual artifact appear on the last button instead of the first.
So for some reason, it seems that the artifact appears on a button if it (1) has border radius on one side and (2) has a border width > 0 on the opposite side. If that's the case (possibly a bug in react-native?), then to solve it generally here, it seems there'd need to be some extra logic in Button to handle the second button style (assuming you wouldn't want to add a second prop for the second button).

When just two buttons are in the Segment group, adding style={{ borderRightWidth: 0 }} on only the first button (no style override on the second one) works correctly if one of the two is active (since you wouldn't see the lack of a border between buttons), but if they're both inactive, I can't find a good solution. Either you show no border between them, or one of the two will have the visual artifact.

[akhil-ga]

@bencollab I tried the code with react-native components and got the same result in iPhone 6. It should be a React Native bug.

Screenshot

Code

import React, { Component } from "react";
import { View } from 'react-native'

export default class App extends Component {

  render() {
    return (
      <View>
        <View style={{ margin: 20, width: 100, height: 50, borderWidth: 1, borderColor: 'blue', borderTopLeftRadius: 5, borderBottomLeftRadius: 5 }} />
      </View>
    );
  }
}

[akhil-ga]

See react native issue facebook/react-native#11897