Segment buttons still render with artifacts on device

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.

[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 }}.

[akhil-ga]

See react native issue https://github.com/facebook/react-native/issues/11897