Weird styling issue in SegmentedControl on Android

[varungupta85]

I am observing a weird styling issue while using SegmentedControl on Android. In the below screenshot, observe that there is a very small part that is white.

When I inspect it in the Inspector, it looks like below. The small white part is not part of the view.

Below is the code to render the SegmentedControl

<SegmentedControls options={this.props.values}
    selectedIndex={this.props.selectedIndex}
    onSelection={this.props.onChange}
    enabled={this.props.enabled ? true : false}
    containerStyle={{flex: 1, height: 32}}
    tint= {'dimgrey'}
    selectedTint= {'white'}
    backTint= {'white'}
  />

If flex: 1 is removed and a fixed width is provided, then the issue goes away. Any ideas on how to fix the problem.

cc @GantMan

[GantMan]

DISCLAIMER: I suck at design.
Not sure we can do a fixed width there though. Isn't the behavior of the segment to be a variable width to match the screen size? Perhaps there's a nudge or negative padding we can add on the right side to get this to be flush. I'm open to ideas.

[varungupta85]

I have never used negative padding or margins in css before but I guess you mean to just give a negative number instead of a positive number for the margin/padding value. I will give it a try and post the results.

[GantMan]

negative numbers in padding/margins is something I do that makes REAL designers curse my name :) But it gets stable results, for sure.

[corbt]

FYI I'm running into this same issue on iOS, so I don't think it's platform-dependent. I worked around it by adding marginRight: -1 to my optionContainerStyle, but it's weird that that's necessary.