{"id":21240251,"url":"https://github.com/retyui/react-native-stylex","last_synced_at":"2025-05-07T16:09:07.172Z","repository":{"id":47274338,"uuid":"233119989","full_name":"retyui/react-native-stylex","owner":"retyui","description":"Better styling for react-native","archived":false,"fork":false,"pushed_at":"2024-02-25T22:15:35.000Z","size":2249,"stargazers_count":106,"open_issues_count":0,"forks_count":3,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-01-07T01:58:55.845Z","etag":null,"topics":["react-native","react-native-media-queries","react-native-style","react-native-theme"],"latest_commit_sha":null,"homepage":"https://snack.expo.io/@retyui/react-native-stylex","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/retyui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2020-01-10T19:52:19.000Z","updated_at":"2024-11-29T21:20:09.000Z","dependencies_parsed_at":"2024-01-18T12:30:04.886Z","dependency_job_id":"36b86254-0de7-40c1-9f35-f7ee947990fc","html_url":"https://github.com/retyui/react-native-stylex","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/retyui%2Freact-native-stylex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/retyui%2Freact-native-stylex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/retyui%2Freact-native-stylex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/retyui%2Freact-native-stylex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/retyui","download_url":"https://codeload.github.com/retyui/react-native-stylex/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233352316,"owners_count":18663269,"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":["react-native","react-native-media-queries","react-native-style","react-native-theme"],"created_at":"2024-11-21T00:50:11.177Z","updated_at":"2025-01-10T13:34:43.107Z","avatar_url":"https://github.com/retyui.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-stylex\n\nBetter styling for react-native\n\n[![react-native-stylex on npm](https://badgen.net/npm/v/react-native-stylex)](http://www.npmjs.com/package/react-native-stylex)\n[![react-native-stylex downloads](https://badgen.net/npm/dm/react-native-stylex)](https://www.npmtrends.com/react-native-stylex)\n[![react-native-stylex install size](https://packagephobia.com/badge?p=react-native-stylex)](https://packagephobia.com/result?p=react-native-stylex)\n[![CI status](https://github.com/retyui/react-native-stylex/workflows/Node.js%20CI/badge.svg)](https://github.com/retyui/react-native-stylex/actions)\n\n\u003cdiv align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/retyui/react-native-stylex/master/docs/logo.png\" width=\"333\"/\u003e\u003c/div\u003e\n\n### Module features:\n\n- 📦 Very light and simple;\n- ⚡️ Hooks \\ HoC support;\n- 🔋 Theming support;\n- ⛱️ [Typescript support](docs/ts.md);\n- 📝 [Easy integrated with Jest](docs/testting.md).\n\n### Integrations\n\n- 🛡️ [react-native-safe-area-view](docs/safe-area.md);\n- 🗺 [i18n](docs/i18n.md);\n- 🕳️ [Appearance (a.k.a Dark mode)](docs/appearance.md);\n- 📐 [Dimensions](docs/dimensions.md);\n- 📲 [Orientation](docs/orientation.md);\n- 💉 [Media Queries](docs/media-query.md) support.\n\n### Links\n\n- [Documentation](docs/api.md);\n- [Live demo](https://snack.expo.io/@retyui/react-native-stylex);\n- [Example app](example/AppStyleX).\n\n## Install\n\n`react-native-stylex` requires react-native 0.59.0 or later.\n\n#### 1️⃣ Add module\n\n```sh\nyarn add react-native-stylex\n\n# or npm install react-native-stylex\n```\n\n#### 2️⃣ Add theme `\u003cThemeProvider/\u003e`\n\nStylex provides component, which makes the theme available to the rest of your app:\n\n```js\nimport { ThemeProvider } from \"react-native-stylex\";\nimport {\n  createBreakpointsMatcher,\n  createBreakpoints,\n  maxWidth,\n} from \"react-native-stylex/media-query\";\n\nconst breakpoints = {\n  xs: 360,\n  sm: 600,\n  md: 960,\n  lg: 1280,\n  xl: 1920,\n};\nconst { up, down, only, between } = createBreakpoints(breakpoints);\nconst applyBreakpoints = createBreakpointsMatcher(breakpoints, maxWidth);\n\nconst theme = {\n  palette: { textColor: \"black\" },\n  breakpoints: { up, down, only, between, apply: applyBreakpoints },\n  utils: {\n    fade: (color, value) =\u003e {},\n  },\n};\n\nconst Root = () =\u003e (\n  \u003cThemeProvider value={theme}\u003e\n    \u003cApp /\u003e\n  \u003c/ThemeProvider\u003e\n);\n\nexport default Root;\n```\n\n#### 3️⃣ Create styles `makeUseStyles(...)`\n\nStylex provides a helper function to inject styles to your component.\n\nNormally, you’ll use it in this way:\n\n```js\nimport { makeUseStyles } from \"react-native-stylex\";\nimport { maxWidth } from \"react-native-stylex/media-query\";\n\nexport const useStyles = makeUseStyles(({ palette, utils, breakpoints }) =\u003e ({\n  root: {\n    color: utils.fade(palette.textColor, 0.5),\n    height: 100,\n    // On screens that are 320 or less, set the height to 69\n    ...maxWidth(320, { height: 69 }),\n  },\n\n  text: {\n    fontSize: 16, // default value\n    ...breakpoints.down(\"lg\", { fontSize: 18 }), // if window width 0..1280\n    ...breakpoints.down(\"sm\", { fontSize: 20 }), // if window width 0..600\n  },\n\n  // The same example that you see above but unsing a 'applyBreakpoints'\n  title: {\n    fontSize: breakpoints.apply({\n      sm: 20, //      if window width 0....600\n      lg: 18, //      if window width 601..1280\n      default: 16, // if window width 1281...\n    }),\n  },\n}));\n```\n\n#### 4️⃣ Inject styles `useStyles(...)` \u0026 `withStyles(...)`\n\nAnd finally just use in component:\n\n```js\nimport React, { Component } from \"react\";\nimport useStyles from \"./styles\";\n\n// Functional component (hooks variant)\nconst Root = () =\u003e {\n  const styles = useStyles();\n\n  return \u003cView style={styles.root} /\u003e;\n};\n\nexport default Root;\n\n//--------------------------------\n\n// Class component (HOC variant)\nclass Root extends Component {\n  render() {\n    const { styles } = this.props;\n\n    return \u003cView style={styles.root} /\u003e;\n  }\n}\n\nexport default withStyles(useStyles)(Root);\n```\n\n### 5️⃣ Do you use a Typescript ?\n\n- Look at [typescript](docs/ts.md) guide\n\n### Alternative solutions\n\n\n- [@emotion/native\n](https://emotion.sh/docs/@emotion/native) [![react-native-stylex downloads](https://badgen.net/npm/dm/@emotion/native)](https://npmtrends.com/@emotion/native-vs-@fast-styles/react-vs-@shopify/restyle-vs-dripsy-vs-nativewind-vs-react-native-unistyles-vs-react-native-zephyr-vs-tailwind-rn-vs-tamagui-vs-twrnc)\n- [nativewind](https://nativewind.dev/) [![react-native-stylex downloads](https://badgen.net/npm/dm/nativewind)](https://npmtrends.com/@emotion/native-vs-@fast-styles/react-vs-@shopify/restyle-vs-dripsy-vs-nativewind-vs-react-native-unistyles-vs-react-native-zephyr-vs-tailwind-rn-vs-tamagui-vs-twrnc)\n- [@shopify/restyle](https://shopify.github.io/restyle/) [![react-native-stylex downloads](https://badgen.net/npm/dm/@shopify/restyle)](https://npmtrends.com/@emotion/native-vs-@fast-styles/react-vs-@shopify/restyle-vs-dripsy-vs-nativewind-vs-react-native-unistyles-vs-react-native-zephyr-vs-tailwind-rn-vs-tamagui-vs-twrnc)\n- [tamagui](https://tamagui.dev/) [![react-native-stylex downloads](https://badgen.net/npm/dm/tamagui)](https://npmtrends.com/@emotion/native-vs-@fast-styles/react-vs-@shopify/restyle-vs-dripsy-vs-nativewind-vs-react-native-unistyles-vs-react-native-zephyr-vs-tailwind-rn-vs-tamagui-vs-twrnc)\n- [twrnc](https://github.com/jaredh159/tailwind-react-native-classnames) [![react-native-stylex downloads](https://badgen.net/npm/dm/twrnc)](https://npmtrends.com/@emotion/native-vs-@fast-styles/react-vs-@shopify/restyle-vs-dripsy-vs-nativewind-vs-react-native-unistyles-vs-react-native-zephyr-vs-tailwind-rn-vs-tamagui-vs-twrnc)\n- [tailwind-rn](https://github.com/vadimdemedes/tailwind-rn) [![react-native-stylex downloads](https://badgen.net/npm/dm/tailwind-rn)](https://npmtrends.com/@emotion/native-vs-@fast-styles/react-vs-@shopify/restyle-vs-dripsy-vs-nativewind-vs-react-native-unistyles-vs-react-native-zephyr-vs-tailwind-rn-vs-tamagui-vs-twrnc)\n- [dripsy](https://www.dripsy.xyz/) [![react-native-stylex downloads](https://badgen.net/npm/dm/dripsy)](https://npmtrends.com/@emotion/native-vs-@fast-styles/react-vs-@shopify/restyle-vs-dripsy-vs-nativewind-vs-react-native-unistyles-vs-react-native-zephyr-vs-tailwind-rn-vs-tamagui-vs-twrnc)\n- [react-native-unistyles](https://reactnativeunistyles.vercel.app/) [![react-native-stylex downloads](https://badgen.net/npm/dm/react-native-unistyles)](https://npmtrends.com/@emotion/native-vs-@fast-styles/react-vs-@shopify/restyle-vs-dripsy-vs-nativewind-vs-react-native-unistyles-vs-react-native-zephyr-vs-tailwind-rn-vs-tamagui-vs-twrnc)\n- [react-native-zephyr](https://formidable.com/open-source/react-native-zephyr/) [![react-native-stylex downloads](https://badgen.net/npm/dm/react-native-zephyr)](https://npmtrends.com/@emotion/native-vs-@fast-styles/react-vs-@shopify/restyle-vs-dripsy-vs-nativewind-vs-react-native-unistyles-vs-react-native-zephyr-vs-tailwind-rn-vs-tamagui-vs-twrnc)\n- [@fast-styles/react](https://fedemartinm.github.io/fast-styles/) [![react-native-stylex downloads](https://badgen.net/npm/dm/@fast-styles/react)](https://npmtrends.com/@emotion/native-vs-@fast-styles/react-vs-@shopify/restyle-vs-dripsy-vs-nativewind-vs-react-native-unistyles-vs-react-native-zephyr-vs-tailwind-rn-vs-tamagui-vs-twrnc)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fretyui%2Freact-native-stylex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fretyui%2Freact-native-stylex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fretyui%2Freact-native-stylex/lists"}