Repository navigation
Issue with css.defineVars in React Native when using react-strict-dom in monorepo #260
Description
Describe the issue
We are using react-strict-dom in our React web app and React Native app, and everything works great in the web app. However, we are encountering issues in the React Native app when using css.defineVars from our styling package. Interestingly, the issue seems to be resolved when using ...css.props([]) instead of style=[].
We are bundling the app with Metro and have applied unstable_enablePackageExports to resolve potential export issues.
App Structure:
-
Packages Folder:
- styling-generator: Imports Figma tokens and generates Stylex files for colors, typography, spacings, etc.
- ui: Contains components used by both React and React Native apps.
-
Apps Folder:
- Web: React web app.
- React Native: React Native app.
Example (Simplified):
spacings.stylex.ts (exported from ui-generated):
import {css} from 'react-strict-dom';
export const spacing = css.defineVars({
s8: 8,
s16: 16,
s32: 32,
});Gap.tsx (exported from ui):
import {memo} from 'react';
import {css, html} from 'react-strict-dom';
import { spacing } from 'ui-generated/spacings.stylex';
const styles = css.create({
small: {
height: spacing.s8,
},
medium: {
height: spacing.s16,
},
large: {
height: spacing.s32,
},
});
type Props = {
size?: 'small' | 'medium' | 'large';
};
export const Gap = memo(({size}: Props) => {
return <html.div style={[size && styles[size]]} />;
});Issue:
- In React Native, the styles defined using
css.create()and passed throughstyle=[]are not applied as expected (the height is undefined). Even though it works correctly in the web app. - Interestingly, if we use
...css.props([])instead ofstyle=[], the issue is resolved in React Native. - We are also seeing the following warning in the console:
[warn] React Strict DOM: unrecognized custom property "--s16__id__202". This indicates that a custom CSS property is being used, but it's not recognized in React Strict DOM.
Any insight into why style=[] behaves differently in React Native would be greatly appreciated!
Expected behavior
- Styles created with
css.createthat usevarsshould work correctly in both React and React Native when passed tostyle=[].
Steps to reproduce
"react": "18.3.1",
"react-native": "0.75.4",
"react-strict-dom": "0.0.33"
- Set up the project as described, with
react-strict-domin both the React and React Native apps. - Use
css.createto generate styles in theGapcomponent (as shown in the example). - Observe the issue in the React Native app, where the styles are not applied correctly when using
style=[]. - Replace
style=[]with...css.props([])and verify that the issue is resolved in React Native.
Test case
No response
Additional comments
- The issue appears only in React Native, and everything works as expected on the web.
- The styling generator relies on Figma tokens, and stylex files are shared across both platforms.
- The mono repo structure includes separate packages for the styling generator and UI components.
- We are bundling with Metro and have applied
unstable_enablePackageExportsto resolve potential export issues.
Activity
[-]Issue with `css.defineVars` in React Native when using `react-strict-dom` in mono repo[/-][+]Issue with `css.defineVars` in React Native when using `react-strict-dom` in monorepo[/+]necolas commentedon Jan 18, 2025
What does "not correctly" mean? I don't see any description of what the problem is.
css.propsis not part of the API in RSD and doesn't work with its elementschristianbach commentedon Jan 18, 2025
@necolas I'm sorry, it got lost in one of my edits. I updated the issue. But the problem we are facing is that the
styleof the Gap component resolves to{height: {}}in our react-native app.necolas commentedon Jan 18, 2025
We use this API without issue at Meta. Your example code has various syntax errors, so I can't tell what problem you might be experiencing. Can you create a test case that reproduces the issue using Expo's snack UI, then share the link?
christianbach commentedon Jan 19, 2025
Thanks for the response! I wanted to share some additional details:
In our setup, I got everything working if react-native imports all components, tokens, and themes exclusively from the
ui-package, which consumesstyling-generatorand exports the stylex tokens.However, when we mix imports directly from both
ui-packageandstyling-generator, and both usedefineVars, we encounter issues specifically in React Native, resulting in missing styles.While debugging, I noticed that not all variables are present in the __customProperties) object . This seems to happen when multiple packages independently call
defineVars.I’ll work on creating a Snack later this week to better demonstrate the issue. Let me know if you have any advice or need more details in the meantime!
necolas commentedon Jan 19, 2025
Thanks, that's helpful. I better understand the issue. We don't have a package setup like this internally, so it's the kind of thing that could not be working correctly without us noticing.
necolas commentedon Jan 21, 2025
Are you sure you're not bundling RSD in your native packages, rather than having it as a shared dependency?
christianbach commentedon Jan 21, 2025
My guess is that everything is bundled with Metro. In our monorepo, the app depends on the
ui package, which in turn depends on thestyle-generator/token packagewhere the variables are defined.Unfortunately, I haven't had the time to create a reproduction Snack.
lundn commentedon Mar 5, 2025
@christianbach Hi there! 👋 This approach (monorepo with UI / Design Variables packages) is very similar to what we're looking at in a new project. Would be great to get an update from you on the matter - did you manage to solve the issues you were facing?
christianbach commentedon Mar 12, 2025
@lundn We are running RDS in production sharing both tokens and ui components between web and native and it’s working great.
The only issue we are facing is that variables/tokens can’t be accessed directly from the variable/tokens package directly in react-native. The solution was to reexport them in the ui-package and then accessing them from there in the native app.