Skip to content

refactor: remove splitStyles and StyleSheet.flatten - #5114

Open
waterim wants to merge 1 commit into
callstack:mainfrom
waterim:refactor/remove-style-flatten
Open

refactor: remove splitStyles and StyleSheet.flatten#5114
waterim wants to merge 1 commit into
callstack:mainfrom
waterim:refactor/remove-style-flatten

Conversation

@waterim

@waterim waterim commented Sep 10, 2026

Copy link
Copy Markdown

Motivation

A few components still read values out of the style prop with StyleSheet.flatten (and splitStyles on 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 from useAnimatedStyle, they can't be flattened, so these components couldn't get full Reanimated support.

This PR removes splitStyles and every StyleSheet.flatten call from the library and moves the values we need into props, following what was done for Surface in #5078.

  • Appbar / Appbar.Header: new backgroundColor prop and the same border radius props as Surface. style now accepts animated styles. getAppbarBorders is gone. Appbar now includes safeAreaInsets in its height, so Appbar.Header no longer needs to read height from style to add the status bar inset.
  • Avatar.Icon / Avatar.Image / Avatar.Text: new backgroundColor prop. Contrast color for the text and icon is still derived from it.
  • Button: new iconPosition prop (leading | trailing) instead of detecting flexDirection: 'row-reverse' in contentStyle. Icon color and size no longer come from labelStyle, textColor covers the color.
  • Card: outline color comes from theme.colors.outline instead of style.borderColor.
  • Card.Cover: border radius from style is applied to the container only, the image is clipped by it anyway.
  • BottomNavigation.Bar: background color moved to the outer view, so barStyle={{ backgroundColor }} keeps working without parsing the style.
  • Tooltip: instead of reading position / top / left from 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.Pagination and the example app updated to the new props.
  • Added an eslint rule that bans StyleSheet.flatten in src so 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 iconPosition to Button with the same name, whichever lands second will need a small rebase.

Test plan

  • yarn typecheck, yarn lint and yarn jest pass.
  • Added tests for the new Appbar props and for ref forwarding in Tooltip, updated the Avatar, Button and Card tests to use the new props.
  • Snapshot changes are limited to the moved background color in BottomNavigation.Bar, the row-reverse content style in Button and DataTable.Pagination, and {} turning into undefined where the flattened style used to be.
  • Things worth checking in the example app: Appbar screen (custom color, bottom appbar), Avatar screen, Button "Icon right" and the DataTable pagination dropdown.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant