borderRadius in containerStyle prop not working

[karthik-b-06]

borderRadius in containerStyle prop not working

[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]

Thank you so much!

[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. :)