{"_id":"@brand-map/react-native-stylex","name":"@brand-map/react-native-stylex","dist-tags":{"latest":"0.0.0-dev.14"},"versions":{"0.0.0-dev.14":{"name":"@brand-map/react-native-stylex","publishConfig":{"access":"public"},"version":"0.0.0-dev.14","private":false,"main":"index.js","types":"index.d.ts","description":"Fork of git@github.com:retyui/react-native-stylex.git","license":"MIT","scripts":{"prebuild":"rm -rf lib","build":"tsc -p ./tsconfig.build.json","postbuild":"mkdir -p lib/make-use-styles && cp src/make-use-styles/* lib/make-use-styles && rm -rf lib/**/*test.* && prettier --write lib/**/*.{js,ts}","clean-publish":"yarn test && yarn build && node ./node_modules/clean-publish/clear-package-json.js package.json > lib/package.json && cp CHANGELOG.md LICENSE README.md lib","pub":"yarn build && node ./node_modules/clean-publish/clear-package-json.js package.json > lib/package.json && cp CHANGELOG.md LICENSE README.md lib","publish-next":"yarn clean-publish && cd lib && npm publish --tag next","presize":"yarn build","postinstall":"rm -rf node_modules/@types/node node_modules/@types/yauzl node_modules/@types/graceful-fs","lint":"eslint './src/*.{js,ts,tsx}' --quiet","test":"jest --coverage","size":"size-limit","ci":"yarn lint && yarn test && yarn size"},"peerDependencies":{"react":">=16.4.0","react-native":">=0.59.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-native":{"optional":true}},"devDependencies":{"@react-native/babel-preset":"^0.83.0","@size-limit/preset-app":"^11.0.1","@testing-library/react-hooks":"^8.0.1","@types/jest":"^30.0.0","@types/react":"^19.2.7","@typescript-eslint/eslint-plugin":"^6.14.0","@typescript-eslint/parser":"^6.14.0","clean-publish":"^4.2.0","eslint":"^8.56.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.0.1","eslint-plugin-react":"^7.33.2","jest":"^29.7.0","prettier":"^3.1.1","react":"^19.2.3","react-native":"^0.83.0","react-native-dark-mode":"^0.2.2","react-native-safe-area-context":"^5.6.2","react-native-test-app":"^5.0.5","react-test-renderer":"^19.2.3","size-limit":"^11.0.1","typescript":"^5.3.3"},"gitHead":"471f2f2ed015a846a71de6a1342e831b6db2d2ab","_id":"@brand-map/react-native-stylex@0.0.0-dev.14","_nodeVersion":"24.9.0","_npmVersion":"11.7.0","dist":{"integrity":"sha512-lr5YNeQaGhyUs1HH61emNPTzSPXiIl5WwGjIAP9mUZSHkQarQoe+ozb3E67GVgFho/Tay5aVUyKEmIVqP2179A==","shasum":"4702f1b89a2735e51f5d26b9aa483c8c0494f6fd","tarball":"https://registry.npmjs.org/@brand-map/react-native-stylex/-/react-native-stylex-0.0.0-dev.14.tgz","fileCount":114,"unpackedSize":593650,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICJy0ggbcUaBBGDdpNK3Owlk2Sp5vWp11t5v+YgzxQeFAiB8mDX5Fh2uLzdPFUnwZotjlEEaKvAENf4/I5gugQck5g=="}]},"_npmUser":{"name":"alexvyber","email":"alexvyber@gmail.com"},"directories":{},"maintainers":[{"name":"alexvyber","email":"alexvyber@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-stylex_0.0.0-dev.14_1768390441455_0.8383965640274162"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-14T11:34:01.346Z","0.0.0-dev.14":"2026-01-14T11:34:01.624Z","modified":"2026-01-14T11:34:01.876Z"},"maintainers":[{"name":"alexvyber","email":"alexvyber@gmail.com"}],"description":"Fork of git@github.com:retyui/react-native-stylex.git","license":"MIT","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<div align=\"center\"><img src=\"https://raw.githubusercontent.com/retyui/react-native-stylex/master/docs/logo.png\" width=\"333\"/></div>\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 `<ThemeProvider/>`\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) => {},\n  },\n};\n\nconst Root = () => (\n  <ThemeProvider value={theme}>\n    <App />\n  </ThemeProvider>\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({\n  styles: ({ palette, utils, breakpoints }) => ({\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\n#### 4️⃣ Inject styles `useStyles(...)` & `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 = () => {\n  const styles = useStyles();\n\n  return <View style={styles.root} />;\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 <View style={styles.root} />;\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- [@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","readmeFilename":"README.md","_rev":"1-1e06c60679f142204eabbcab0f848fc0"}