{"id":28480358,"url":"https://github.com/nativewind/react-native-css","last_synced_at":"2026-04-01T19:37:02.086Z","repository":{"id":267967218,"uuid":"890666833","full_name":"nativewind/react-native-css","owner":"nativewind","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-03T13:49:10.000Z","size":2445,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-03T14:50:52.103Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nativewind.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-11-19T01:03:05.000Z","updated_at":"2025-07-03T05:13:25.000Z","dependencies_parsed_at":"2024-12-13T16:11:43.711Z","dependency_job_id":"3ae286fc-17fa-485b-96c7-737c313d7bbf","html_url":"https://github.com/nativewind/react-native-css","commit_stats":null,"previous_names":["nativewind/react-native-css"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nativewind/react-native-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativewind%2Freact-native-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativewind%2Freact-native-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativewind%2Freact-native-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativewind%2Freact-native-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nativewind","download_url":"https://codeload.github.com/nativewind/react-native-css/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativewind%2Freact-native-css/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263388436,"owners_count":23459217,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-07T19:06:14.229Z","updated_at":"2026-04-01T19:37:02.077Z","avatar_url":"https://github.com/nativewind.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-css\n\nA CSS polyfill for React Native\n\nThe goal of this library is to provide the most complete CSS support for React Native, within the limitations of Yoga and the core React Native package. This includes multiple advanced CSS features like media queries, container queries, CSS variables, and more.\n\n## Installation\n\n1. Create a CSS file in your project, e.g. `styles.css`.\n2. Import the CSS file in your App entry point, or root layout component:\n3. Setup the bundler using one of the methods below.\n\n### Metro based projects\n\n\u003e [!TIP]  \n\u003e Most React Native projects use Metro as the bundler.\n\nYou will need to add `withReactNativeCSS` to your Metro configuration.\n\n#### Expo Projects\n\n```ts\nimport { getDefaultConfig } from \"expo/metro-config\";\nimport { withReactNativeCSS } from \"react-native-css/metro\";\n\nconst defaultConfig = getDefaultConfig(__dirname);\n\nexport default withReactNativeCSS(defaultConfig);\n\n// OR with the globalClassNamePolyfill enabled\nexport default withReactNativeCSS(defaultConfig, {\n  globalClassNamePolyfill: true,\n});\n```\n\n#### Non-Expo Projects\n\n`react-native-css` relies on the bundler to process CSS files. Currently only Expo provides a CSS asset pipeline. Since the Expo SDK is modular, you can add this functionality by just using the `@expo/metro-config` package.\n\nFollow the Expo instructions, but replace the `expo` package with `@expo/metro-config`.\n\n```diff\n- import { getDefaultConfig } from \"expo/metro-config\";\n+ import { getDefaultConfig } from \"@expo/metro-config\";\n```\n\n### Other bundlers\n\n`react-native-css` officially only supports Metro as the bundler, but we welcome community contributions to support other bundlers like Webpack, Vite or Turbopack.\n\nMore documentation coming soon.\n\n## Usage\n\nYou can use the library by importing the React Native components directly from `react-native-css/components`:\n\n```ts\nimport { View } from 'react-native-css/components';\n\nimport \"./styles.css\";\n\nexport default function App() {\n  return (\n    \u003cView className=\"container\"\u003e\n      \u003cView className=\"box\" /\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\n### With `globalClassNamePolyfill`\n\nEnabling the `globalClassNamePolyfill` allows you to use the classNames prop on any React Native component, similar to how you would use it in a web application.\n\n```ts\nimport { View } from 'react-native';\n\nimport \"./styles.css\";\n\nexport default function App() {\n  return (\n    \u003cView className=\"container\"\u003e\n      \u003cView className=\"box\" /\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\nTo enable the `globalClassNamePolyfill`, you need to enable it in your Metro configuration:\n\n```ts\nimport { withReactNativeCSS } from \"react-native-css/metro\";\n\nmodule.exports = withReactNativeCSS(\n  {\n    // Your existing Metro configuration\n  },\n  {\n    globalClassNamePolyfill: true,\n  },\n);\n```\n\n### Via `styled`\n\nYou can also use the `styled` function to get styled components.\n\n```ts\nimport { View } from 'react-native';\nimport { styled } from 'react-native-css';\n\nimport \"./styles.css\";\n\nconst MyView = styled(View)\n\nexport default function App() {\n  return (\n    \u003cMyView className=\"container\"\u003e\n      \u003cMyView className=\"box\" /\u003e\n    \u003c/MyView\u003e\n  );\n}\n```\n\n### Via hooks\n\nYou can also use the `useCssElement` hook.\n\n```ts\nimport { View } from 'react-native';\nimport { useCssElement } from 'react-native-css';\n\nexport default function App() {\n  const Container = useCssElement(View, {\n    className: \"container\",\n  });\n\n  const Box = useCssElement(View, {\n    className: \"box\",\n  });\n\n  return (\n    \u003cContainer\u003e\n      \u003cBox /\u003e\n    \u003c/Container\u003e\n  );\n}\n```\n\n\u003e [!IMPORTANT]  \n\u003e The hook returns a React Element, not a style object.\n\n#### `useNativeCssStyle`\n\nIf you just require the style object, you can use the `useNativeCssStyle` hook\n\n```ts\nimport { View as RNView } from 'react-native';\nimport { useNativeCssStyle } from 'react-native-css';\n\nimport \"./styles.css\";\n\nexport default function App() {\n  return (\n    \u003cView style={useNativeCssStyle(\"container\")}\u003e\n      \u003cText style={useNativeCssStyle(\"my-text\")}\u003e\n        Hello, world!\n      \u003c/Text\u003e\n    \u003c/View\u003e\n  )\n}\n```\n\n\u003e [!IMPORTANT]  \n\u003e This hook may will only work on native platforms. It will return an empty object on web.\n\u003e This hook may not support all features of the library.\n\u003e This hooks does not support container queries or inheritance for children elements.\n\n#### `useNativeVariable`\n\nIf you just require a CSS variable value, you can use the `useNativeVariable` hook:\n\n```ts\nimport { useNativeVariable } from 'react-native-css';\n\nexport default function App() {\n  const myColor = useNativeVariable(\"--my-color\");\n\n  return (\n    \u003cView style={{ backgroundColor: myColor }}\u003e\n      \u003cText style={{ color: myColor }}\u003e\n        Hello, world!\n      \u003c/Text\u003e\n    \u003c/View\u003e\n  )\n}\n```\n\n\u003e [!IMPORTANT]  \n\u003e This hook may will only work on native platforms. It will return `undefined` on web.\n\u003e This hook may not support all features of the library.\n\n## CSS variables\n\nIt is preferable that all CSS variables are set via CSS. If you need values to change dynamically, we recommend using a class to change the values.\n\n```css\n.theme-red {\n  --brand-color: red;\n}\n\n.theme-blue {\n  --brand-color: blue;\n}\n```\n\nAs a last resort, you can use `VariableContext` to dynamically set CSS variables in JavaScript\n\n```ts\nimport { VariableContext } from 'react-native-css';\n\nexport default function App() {\n  return (\n    \u003cVariableContext values={{ \"--my-color\": \"red\" }}\u003e\n      \u003cText className=\"my-color-text\"\u003e\n        Hello, world!\n      \u003c/Text\u003e\n    \u003c/VariableContext\u003e\n  )\n}\n```\n\nThis API only allows for setting CSS variables as primitive values. For more complex styles, you will need to use a helper CSS class.\n\n\u003e [!IMPORTANT]  \n\u003e By using `VariableContext` you may need to disable the `inlineVariable` optimization\n\n## Optimizations\n\nCSS is a dynamic styling language that use highly optimized engines that are not available in React Native. Instead, we optimize the styles to improve performance\n\nThese optimizations are only applied in native environments and are enabled by default.\n\n### Inline REM units\n\nAll `rem` units are converted to `dp` units at build time. On native, the default dp is 14. You can change the default `rem` by passing a `inlineRem` option to the `withReactNativeCSS` function.\n\n```tsx\nexport default withReactNativeCSS(defaultConfig, {\n  inlineRem: 16, // change to 16dp,\n});\n```\n\n### Inline CSS Custom Properties (variables)\n\nCustom properties (sometimes referred to as CSS variables or cascading variables) are a way to store values that can be reused throughout a CSS document. They are defined using a property name that starts with `--`, and their values can be accessed using the `var()` function.\n\nTo improve performance, Custom properties that are only set **once** in the CSS file are inlined at build time.\n\nFor example\n\n```css\n:root {\n  --my-var: red;\n  --var-with-two-possible-values: blue;\n}\n\n.my-class {\n  --var-with-two-possible-values: green;\n  color: var(--my-var);\n  background-color: var(--var-with-two-possible-values);\n}\n```\n\nIs converted to:\n\n```css\n:root {\n  --var-with-two-possible-values: blue;\n}\n\n.my-class {\n  color: red; /* This was inlined and the variable was removed */\n\n  /* These are preserved as there are multiple possible values */\n  --var-with-two-possible-values: green;\n  background-color: var(--var-with-two-possible-values);\n}\n```\n\nUsing `VariableContext` with `inlineVariables` may have unexpected results, as rules may have been rewritten not to use a variable. You can disable this behavior by setting `inlineVariables: false`\n\n```tsx\nexport default withReactNativeCSS(defaultConfig, {\n  inlineVariables: false,\n});\n```\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\nTo quickly get started with the project, you can run:\n\n```sh\nyarn init -2     # We require Yarn 4\nyarn clean       # Install dependencies, rebuild the project and example app\nyarn example ios # Or yarn example android\n```\n\nOnce the example app is built, you can use\n\n```sh\nyarn example start       # Start Expo CLI\nyarn example start:build # Rebuild the project and start Expo CLI\nyarn example start:debug # Rebuild the project and start Expo CLI with debug logging\n```\n\n\u003e [!TIP]  \n\u003e `start:build` and `start:debug` will clear the cache before starting the Expo CLI. If you are experiencing issue with `yarn example start` not reflecting your changes, try running `yarn example start:build` or `yarn example start:debug`.\n\n## License\n\nMIT\n\nSee the [license](LICENSE) file for more details.\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativewind%2Freact-native-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativewind%2Freact-native-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativewind%2Freact-native-css/lists"}