Removing Screen width / manual width dependency #7
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. This change also removes 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 to the `style` property. Additional the gap around the segments and the background customisable by passing an (optional) `gap` property that defaults to the previous gap of 2 units. I've also tweaked the active tab's border radius to follow the outer containers' radius too. The `width` and `extraSpacing` properties have been removed. Some missing `useEffect`/`useCallback` dependencies were also added.
|
https://github.com/WrathChaos/react-native-segmented-control-2/releases/tag/2.0.1 Version 2 is released 🍻 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR is a duplication of #4 , there are just code cleaning and fixes for better looking/understanding.
Credits to @philo23
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
widthandextraSpacingproperties 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
styleproperty.The gap around the segments and the background is now also customisable by passing a
gapproperty 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/useCallbackdependencies 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
widthandextraSpacingprops are now gone.Let me know if you'd like me to update the readme too.
Cheers!