StyleSheet.flatten usage and its impact on styling libraries

[Brentlok]

First of all, thank you for the great work on this library.

I noticed that StyleSheet.flatten is used in several places, and I wanted to ask about the rationale behind it and share a couple of compatibility issues I've run into:

• Unistyles 3 encountered a related problem where flattening styles caused loss of C++ state: Performance issues using unistyles with gorhom bottomsheet jpudysz/react-native-unistyles#729
• On React Native Web, passing className with the RNW syntax ({ $$css: true }) breaks after flattening. The flattened result can look like:

{
    $$css: true,
    myClassName: 'bottom-sheet-cotainer',
    // react-native-bottom-sheet-styles:
    top: 0,
    left: 0,
    right: 0,
    bottom: 0
}

RNW then logs an error, seemingly because it tries to interpret numeric values (e.g., 0) as class names. Screenshot for reference:

For context, Reanimated previously had a similar issue and addressed it by avoiding style flattening:
software-mansion/react-native-reanimated#7021

I'm curious is style flattening used here primarily for performance, or is there another reason (e.g., normalization, merging logic) that makes it necessary?

Thanks again for your time and for maintaining this project!
gorhom.dev

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[Brentlok]

bump