react-native-segmented-control-2 icon indicating copy to clipboard operation
react-native-segmented-control-2 copied to clipboard

Removing Screen width / manual width dependency

Open philo23 opened this issue 2 years ago • 0 comments

Rather than calculating the width based off the screen size or passing in a fixed width, this change lets React Native handle sizing the component like any other <View> and then takes the calculated width from the onLayout event to calculate the correct active tab width.

The width and extraSpacing properties have been removed as they're no longer necessary.

That also let me remove all of the dynamic styling from the stylesheet and a couple of magic numbers from the active tab width calculations. The previously dynamic inline styles are now just passed directly into the style property.

The gap around the segments and the background is now also customisable by passing a gap property that defaults to the previous default size of 2 units.

I've tweaked the active tab's border radius to better follow the outer containers' radius too.

Also some missing useEffect/useCallback dependencies were added.


Apologies if I've run roughshod over any of your code linting/formatting rules, I've tried to keep it inline as much as possible with your existing code! Just let me know if you want me to tweak anything.

Also this is quite a big change to the way this component renders, so it's probably worth making it a breaking change considering the width and extraSpacing props are now gone.

Let me know if you'd like me to update the readme too.

Cheers!

philo23 avatar Apr 19 '23 17:04 philo23