{"id":13674828,"url":"https://github.com/danilowoz/react-native-styl","last_synced_at":"2025-03-23T20:31:16.008Z","repository":{"id":38887354,"uuid":"260901090","full_name":"danilowoz/react-native-styl","owner":"danilowoz","description":"💅 Micro-library that writes stylesheets with a non-opinionated approach, free of dependencies, and in the easiest way possible.","archived":false,"fork":false,"pushed_at":"2023-01-03T09:43:40.000Z","size":558,"stargazers_count":43,"open_issues_count":0,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-18T23:41:24.474Z","etag":null,"topics":["micro-library","react-native","stylesheet","typescript","writing-stylesheets"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danilowoz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-03T11:51:10.000Z","updated_at":"2025-01-29T04:21:16.000Z","dependencies_parsed_at":"2023-02-01T05:46:09.332Z","dependency_job_id":null,"html_url":"https://github.com/danilowoz/react-native-styl","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danilowoz%2Freact-native-styl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danilowoz%2Freact-native-styl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danilowoz%2Freact-native-styl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danilowoz%2Freact-native-styl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danilowoz","download_url":"https://codeload.github.com/danilowoz/react-native-styl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245164911,"owners_count":20571207,"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":["micro-library","react-native","stylesheet","typescript","writing-stylesheets"],"created_at":"2024-08-02T11:01:03.531Z","updated_at":"2025-03-23T20:31:15.486Z","avatar_url":"https://github.com/danilowoz.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n \u003cimg width=\"400\" src=\"https://user-images.githubusercontent.com/4838076/81743123-187d6680-9499-11ea-91c5-952dc9bee4e7.png\" alt=\"styl\" /\u003e\n\n  \u003cbr /\u003e\n  \u003cimg src=\"https://badgen.net/npm/v/react-native-styl\" alt=\"npm version\" /\u003e\n  \u003cimg src=\"https://david-dm.org/danilowoz/react-native-styl.svg\" alt=\"dependencies\" /\u003e\n  \u003cimg src=\"https://badgen.net/bundlephobia/min/react-native-styl\" alt=\"bundlephobia\" /\u003e\n\u003c/h1\u003e\n\n\u003cp\u003e\u003cstrong\u003e\u003ci\u003ereact-native-styl\u003c/i\u003e is a micro-library for React Native developers\u003c/strong\u003e whose goal is to write stylesheets with a non-opinionated library, free of dependencies, and in the easiest way possible.\u003c/p\u003e\n\n```jsx\nimport styl from 'react-native-styl'\nimport { Text } from 'react-native'\n\nconst Title = styl(Text)({ color: 'blue' })\n\nconst App = () =\u003e \u003cTitle\u003eStyl\u003c/Title\u003e\n```\n\n---\n\n## Motivation\n\n- **Keep the stylesheet simple:** the recommended approach to writing stylesheets in React Native still needs too much boilerplate and it's a pain to maintain; _styl_ provides a simple API where you'll be able to write the same stylesheets you are used to – with fewer lines of code;\n\n- **Performance:** no magic or tricks here, _styl_ just maps the stylesheet (which can come from inline-style, the function argument or even props) to the style prop in the component: one of the most performative ways to write styles in React Native;\n\n- **Versatility:** _styl_ uses the context API to bring full theme support, which can be used throughout the application; components can also be easily extended and styled overrided when needed;\n\n- **Ultralightweight:** about 1kb.\n\n## Usage\n\nTo get started using `react-native-styl`, first install the package:\n\n`yarn add react-native-styl` or `npm i react-native-styl`\n\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cstrong\u003eStyling native elements:\u003c/strong\u003e\u003c/summary\u003e\n\n_Styl_ is a high-order function that receives any component that supports the `style` prop, and returns a function that expects a plain object stylesheet. It will return a styled React component with the same props of the original component:\n\n```jsx\nimport styl from \"react-native-styl\"\nimport { ScrollView } from \"react-native\"\n\nconst Wrapper = styl(ScrollView)({\n  padding: 16\n})\n\n\u003cWrapper indicatorStyle=\"black\"\u003e\n  \u003cView /\u003e\n\u003c/Wrapper\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cstrong\u003eDynamic styles:\u003c/strong\u003e\u003c/summary\u003e\n\nEasily create dynamic stylesheets. Use a callback function to access the component `props` when creating the styles:\n\n```jsx\nimport styl from \"react-native-styl\"\nimport { Text } from \"react-native\"\n\nconst ColoredText = styl(Text)(({ props }) =\u003e ({\n  color: props.color,\n}))\n\n\u003cColoredText color=\"red\"\u003eLorem ipsum\u003c/ColoredText\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eTheming:\u003c/strong\u003e\u003c/summary\u003e\n\nWrap your application with the Provider and every component will also have access to the `theme` in the callback function:\n\n```jsx\nimport { styl, Provider as StyleProvider } from \"react-native-styl\"\nimport { Text } from \"react-native\"\n\nconst Theme = ({ children }) =\u003e (\n  \u003cStyleProvider theme={{ primary: 'blue' }}\u003e\n    {children}\n  \u003c/StyleProvider\u003e\n)\n\nconst ThemeColorText = styl(Text)(({ theme }) =\u003e ({\n  color: theme.primary\n}))\n\n\u003cThemeColorText\u003eLorem ipsum\u003c/ThemeColorText\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003euseTheme:\u003c/strong\u003e\u003c/summary\u003e\n\nThe `useTheme` hook let you access the currently active theme.\n\n```jsx\nimport { useTheme, Provider as StyleProvider } from 'react-native-styl'\n\nconst Main = ({ children }) =\u003e {\n  const theme = useTheme()\n\n  return \u003cText style={{ color: theme.brand }}\u003eFoo\u003c/Text\u003e\n}\n\nconst App = () =\u003e {\n  return (\n    \u003cStyleProvider theme={{ color: { brand: 'blue' } }}\u003e\n      \u003cMain /\u003e\n    \u003c/StyleProvider\u003e\n  )\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eExtends:\u003c/strong\u003e\u003c/summary\u003e\n\nGiven that _styl_ accepts any component that supports the `style` prop, every component created by the library can be styled again. It will inherit the original component style that can be extended:\n\n```jsx\nimport styl from \"react-native-styl\"\nimport { Text } from \"react-native\"\n\nconst BaseText = styl(Text)({\n  color: 'red',\n  padding: 16,\n})\n\nconst ExtendedText = styl(BaseText)({\n  color: 'green',\n})\n\n\u003cExtendedText\u003eLorem ipsum\u003c/ExtendedText\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003ePolymorphic elements: `as` prop\u003c/strong\u003e\u003c/summary\u003e\n\nRender a new styled component passing a valid React component to `as` prop:\n\n```jsx\nimport styl from \"react-native-styl\"\nimport { Text, TouchableOpacity } from \"react-native\"\n\nconst Base = styl(Text)({\n  padding: 16\n})\n\n\u003cBase as={TouchableOpacity} onPress={() =\u003e null}\u003e\n  \u003cText\u003eTouchableOpacity\u003c/Text\u003e\n\u003c/Base\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003ePresets components:\u003c/strong\u003e\u003c/summary\u003e\n\nThe first argument of `react-native-styl` accepts any valid React component. This means it's possible to pass a custom function component:\n\n```jsx\nimport styl from \"react-native-styl\"\nimport { Text } from \"react-native\"\n\nconst PresetComp = styl((props) =\u003e (\n  \u003cText ellipsizeMode=\"tail\" numberOfLines={1} {...props} /\u003e\n))({ padding: 16 })\n\n\u003cPresetComp\u003eLorem ipsum\u003c/PresetComp\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eTypeScript:\u003c/strong\u003e\u003c/summary\u003e\n\n`react-native-styl` fully supports TypeScript for both theme definitions and custom props.\n\nTheme definition:\nThe first step is to create a declarations file (e.g.: `theme.d.ts`), with the following content:\n\n```jsx\n// import original module declarations\nimport 'react-native-styl'\n\n// and extend it\ndeclare module 'react-native-styl' {\n  export interface DefaultTheme {\n    colors: {\n      main: string\n      secondary: string\n    }\n  }\n}\n```\n\n#### Custom props:\n\nDefine the component props and pass it to the main function:\n\n```jsx\nimport styl from \"react-native-styl\"\nimport { Text } from \"react-native\"\n\ninterface TitleProps {\n   color: string\n}\n\nconst Title = styl(Text)\u003cTitleProps\u003e(({ props }) =\u003e ({\n  color: props.color,\n}))\n\n\u003cTitle color=\"blue\"\u003eLorem ipsum\u003c/Title\u003e\n```\n\n#### `as` prop\n\nTypescript is not yet supported [Help is needed to implement it](https://github.com/danilowoz/react-native-styl/issues/3).\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eStyled-API-like:\u003c/strong\u003e\u003c/summary\u003e\n\nCreate a custom library to suit your own goals:\n\n```jsx\nimport styl from 'react-native-styl'\nimport * as RN from 'react-native'\n\nconst UI = {\n  View: styl(RN.View),\n  Text: styl(RN.Text),\n}\n\nconst Title = UI.Text({ color: 'red' })\n```\n\n\u003c/details\u003e\n\n**More examples in `examples/src`.**\n\n---\n\n## Benchmark\n\nInternal tests rendering 5k views and 10k views into a Scrollview, _styl_ shows to be one of the most performative ways to write stylesheets in React Native, losing only to the native approaches. The results below are the average of 5 complete renders measured in milliseconds:\n\n| Library               | Rendering 5k Views | Rendering 10k Views |\n| :-------------------- | :----------------: | :-----------------: |\n| StyleSheet            |       2068ms       |       4095ms        |\n| Inline-style          |       2317ms       |       4507ms        |\n| **react-native-styl** |     **2754ms**     |     **5432ms**      |\n| Styled-components     |       3102ms       |       6460ms        |\n\n\u003e See the tests in `examples/src`\n\n### Others benchmarks that are worth mentioning:\n\n- [A Quick Performance Comparison of Styled-Components vs Inline Styles in React Native](https://medium.com/@jm90mm/a-quick-performance-comparison-of-styled-components-vs-inline-styles-in-react-native-21d8f6a561d7)\n- [react-native-css-in-js-benchmarks](https://github.com/brunolemos/react-native-css-in-js-benchmarks/blob/master/RESULTS.md)\n\n### Inspiration:\n\nThis package was inspired by people's work on the following projects:\n\n- [Why you don’t need Styled-Components in a React Native app, by Cameron Moss](https://medium.com/@fasterpancakes/how-styled-components-holds-up-to-refactoring-in-a-react-native-app-1922fa96ddd4)\n- [Styled-components;](https://github.com/styled-components/styled-components)\n- [Glamorous-native.](https://github.com/robinpowered/glamorous-native)\n\n### Special thanks to:\n\n- [Airfordable](https://github.com/Airfordable);\n- [Significa](https://github.com/significa).\n\n### License:\n\n[MIT License](https://opensource.org/licenses/MIT) © [Danilo Woznica](https://danilowoz.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanilowoz%2Freact-native-styl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanilowoz%2Freact-native-styl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanilowoz%2Freact-native-styl/lists"}