borderRadius in containerStyle prop not working

[theneekz]

Describe the bug
Trying to use borderRadius in containerStyle prop doesn't work.

To Reproduce

<SegmentedControl
tabs={values}
paddingVertical={5}
containerStyle={{
marginVertical: 10,
alignSelf: 'center',
borderColor: '#E4E8F5',
borderStyle: 'solid',
borderRadius: 15,
borderWidth: 3,
}}
activeSegmentBackgroundColor="#568CEB"
segmentedControlBackgroundColor="#E4E8F5"
textStyle={{
color: '#616467',
textTransform: 'uppercase',
}}
activeTextColor="#fff"
activeTextWeight="800"
currentIndex={selectedIndex}
onChange={onPress}
/>

Expected behavior
Expected the border radius to change with different number inputs

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: iPhone 11, Google Pixel 4
• OS: ios 14.3, Android 11 (Google APIs)

[Karthik-B-06]

Hey @theneekz. Understood the issue.

You are trying to set the value using containerStyle prop which gets overridden by my segmentedControlWrapper style.

There are 2 possible solutions I can think of right away.

1. Taking out the border radius of the container as a separate prop.
2. Or moving segmentedControlWrapper before the containerStyle so that the user-given styles are correctly overridden.

Which one of the above two you think is more apt?

[theneekz]

Hey @Karthik-B-06, thanks for the response.

I would think that you would want to put the containerStyle second in the array, to allow custom styles to override the default... But maybe only allow certain properties? Like how textStyle allows all style properties except the label colors set by props? I don't know enough about View styles to know what will interfere with functionality.

[Karthik-B-06]

@theneekz
I am sorry for the delay.

Tried enabling the border-radius to work by overriding the values. But the style structure of segmented control breaks.

I should probably have to think of a work-around for this. Rest assured I will get back with a solution. :) Thank you for your patience.

[Karthik-B-06]

@theneekz A new version supporting change of borderRadius through containerStyle props is available.

You will have to use something like this so that the style structure does not break.

<SegmentedControl
        tabs={["Label", "Label"]}
        onChange={() => {}}
        paddingVertical={6}
        containerStyle={{
          marginVertical: 20,
          borderRadius: 15,
        }}
        tileStyle={{
          borderRadius: 15,
        }}
        currentIndex={tabIndex}
        onChange={handleTabsChange}
        theme={theme}
/>

Which will look something like this.

Added a new prop tileStyle to match the borderRadius of the container.

Closing this issue for now 🎉 .

If you are still facing any issues feel free to reopen it. :)

[theneekz]

Thank you so much!