search

arabold / react-native-whirlwind

Whirlwind is a utility-first styling framework specifically designed for React Native. It is heavily inspired by Tachyons and Tailwind CSS and uses low-level building blocks for rapidly building custom designs.
https://arabold.github.io/react-native-whirlwind/
MIT License
107 stars 5 forks source link

Potential issue with configuration workflow on web #9

Open leggomuhgreggo opened 3 years ago

leggomuhgreggo commented 3 years ago

Noticed a potential issue where the recommended pattern of exporting within a StyleSheet.create wasn't working on web.

When I export just the raw style object the styles apply as expected.

But when I export the config within StyleSheet.create the same style class doesn't apply. Seems like reference ID isn't computing back to the actual styles for some reason.

Might be a quirk of the RNW implementation or something but wanted to share in case it was relevant here.

You can see at the bottom of the theme file in this demo, I have the StyleSheet version of the export commented out: Codesandbox Demo

Thanks!

arabold commented 3 years ago

Thanks for reporting this issue. It is certainly related to a quirk in React Native Web, that doesn't handle the style IDs the same way as iOS and Android do. I believe the related bug in RNW is this: https://github.com/necolas/react-native-web/issues/1377

Unfortunately, there doesn't seem to be any intent to fix it 😞

Not sure what a good workaround would be. Maybe the createTheme function needs to be split into two functions: createTheme that works as it does now and a buildThemeDefinition (or similar) that only returns the plain JS objects 🤔 Or maybe there's a way of making the theme composable again using StyleSheet.compose? Didn't try that myself yet...