refactor: remove splitStyles and StyleSheet.flatten - #5114
Open
waterim wants to merge 1 commit into
Open
Conversation
This file contains hidden or 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
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.
Motivation
A few components still read values out of the
styleprop withStyleSheet.flatten(andsplitStyleson top of it) to derive other styles: background color, border radius, border color, icon placement and so on. This doesn't work with styles returned fromuseAnimatedStyle, they can't be flattened, so these components couldn't get full Reanimated support.This PR removes
splitStylesand everyStyleSheet.flattencall from the library and moves the values we need into props, following what was done forSurfacein #5078.Appbar/Appbar.Header: newbackgroundColorprop and the same border radius props asSurface.stylenow accepts animated styles.getAppbarBordersis gone.Appbarnow includessafeAreaInsetsin its height, soAppbar.Headerno longer needs to readheightfromstyleto add the status bar inset.Avatar.Icon/Avatar.Image/Avatar.Text: newbackgroundColorprop. Contrast color for the text and icon is still derived from it.Button: newiconPositionprop (leading|trailing) instead of detectingflexDirection: 'row-reverse'incontentStyle. Icon color and size no longer come fromlabelStyle,textColorcovers the color.Card: outline color comes fromtheme.colors.outlineinstead ofstyle.borderColor.Card.Cover: border radius fromstyleis applied to the container only, the image is clipped by it anyway.BottomNavigation.Bar: background color moved to the outer view, sobarStyle={{ backgroundColor }}keeps working without parsing the style.Tooltip: instead of readingposition/top/leftfrom the child's style, it attaches a ref to the wrapped element and measures it directly (falling back to the wrapper). The user's ref is still forwarded.DataTable.Paginationand the example app updated to the new props.StyleSheet.flatteninsrcso it doesn't come back.Breaking changes are listed in the 6.x migration guide.
Related issue
Part of the Reanimated migration for v6. Note that #4943 also adds
iconPositiontoButtonwith the same name, whichever lands second will need a small rebase.Test plan
yarn typecheck,yarn lintandyarn jestpass.Appbarprops and for ref forwarding inTooltip, updated theAvatar,ButtonandCardtests to use the new props.BottomNavigation.Bar, therow-reversecontent style inButtonandDataTable.Pagination, and{}turning intoundefinedwhere the flattened style used to be.