{"id":47304433,"url":"https://github.com/darshan09200/react-native-css-stylesheet","last_synced_at":"2026-03-17T07:43:47.601Z","repository":{"id":44953205,"uuid":"415538772","full_name":"darshan09200/react-native-css-stylesheet","owner":"darshan09200","description":"Create a responsive design with the help of CSS queries","archived":false,"fork":false,"pushed_at":"2022-01-16T11:50:42.000Z","size":796,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-30T12:37:06.385Z","etag":null,"topics":["css","react-native","responsive"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/darshan09200.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-10-10T09:21:37.000Z","updated_at":"2022-05-09T04:36:57.000Z","dependencies_parsed_at":"2022-09-08T09:51:32.709Z","dependency_job_id":null,"html_url":"https://github.com/darshan09200/react-native-css-stylesheet","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/darshan09200/react-native-css-stylesheet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darshan09200%2Freact-native-css-stylesheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darshan09200%2Freact-native-css-stylesheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darshan09200%2Freact-native-css-stylesheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darshan09200%2Freact-native-css-stylesheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/darshan09200","download_url":"https://codeload.github.com/darshan09200/react-native-css-stylesheet/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darshan09200%2Freact-native-css-stylesheet/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30617557,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-17T04:46:40.957Z","status":"ssl_error","status_checked_at":"2026-03-17T04:46:32.538Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["css","react-native","responsive"],"created_at":"2026-03-17T07:43:46.959Z","updated_at":"2026-03-17T07:43:47.591Z","avatar_url":"https://github.com/darshan09200.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-css-stylesheet\n\nCreate responsive design with the help of css queries\n\n## Installation\n\n```bash\nnpm install react-native-css-stylesheet\n```\n\n## Usage\n\nDefine styles using [`CssStyleSheet.create()`](#create-styles) instead of `StyleSheet.create()`\n\n```js\nimport React from \"react\";\nimport { Text, View } from \"react-native\";\n\nimport CssStyleSheet from \"react-native-css-stylesheet\";\n\nconst Example = () =\u003e {\n\treturn (\n\t\t\u003cView style={styles.container}\u003e\n\t\t\t\u003cText style={styles.text}\u003eExample\u003c/Text\u003e\n\t\t\u003c/View\u003e\n\t);\n};\n\nconst { styles } = CssStyleSheet.create({\n\ttext: {\n\t\t\"(orientation: landscape)\": {\n\t\t\tfontSize: \"3rem\",\n\t\t},\n\t\tfontSize: \"2rem\",\n\t\tmarginVertical: 20,\n\t},\n\tcontainer: {\n\t\talignItems: \"center\",\n\t\tflex: 1,\n\t\tjustifyContent: \"center\",\n\t},\n});\n```\n\n## Styling Options\n\n### Size with custom units\n\n| Unit                | Description                                                                                             | Example            |\n| ------------------- | ------------------------------------------------------------------------------------------------------- | ------------------ |\n| `\u003csize\u003es`           | scales `size` in a linear manner relative to screen width                                               | `7.5s`             |\n| `\u003csize\u003evs`          | scales `size` in a linear manner relative to screen height                                              | `9vs`              |\n| `\u003csize\u003ems\u003cfactor\u003e`  | scales `size` in a linear manner relative to screen width. `factor` is resize factor. Default is `0.5`  | `7ms` or `7ms0.25` |\n| `\u003csize\u003emvs\u003cfactor\u003e` | scales `size` in a linear manner relative to screen height. `factor` is resize factor. Default is `0.5` | `9ms` or `9ms0.75` |\n| `\u003csize\u003erem`         | size relative to the default font size                                                                  | `1rem`             |\n| `\u003csize\u003evw`          | size relative to the window width                                                                       | `1.02vw`           |\n| `\u003csize\u003evh`          | size relative to the window height                                                                      | `10vh`             |\n| `\u003csize\u003evmin`        | size relative to the shortest dimension compared between window width and height                        | `10vmin`           |\n| `\u003csize\u003evmax`        | size relative to the largest dimension compared between window width and height                         | `10vmax`           |\n\n\u003e **Note:**\n\u003e\n\u003e 1. `size` can be any positive number (including decimal) for `s`, `vs`, `ms`, and `mvs`\n\u003e 2. `size` can be any positive number ranging from 0 to 100 (including decimal) for `rem`, `vw`, `vh`, `vmin`, and `vmax`\n\u003e 3. `factor` can be any positive number ranging from 0 and 1 (including decimal)\n\n### Queries\n\n| Query                    | Supported Values                                 | Description                                                | Example                                                          |\n| ------------------------ | ------------------------------------------------ | ---------------------------------------------------------- | ---------------------------------------------------------------- |\n| `(orientation: \u003cvalue\u003e)` | `portrait` or `landscape`                        | Matches the orientation with the provided value            | 1. `(orientation: landscape)` \u003cbr/\u003e 2. `(orientation: portrait)` |\n| `(min-width: \u003cvalue\u003e)`   | [custom size](#size-with-custom-units) or number | Matches the minimum window width with the provided value.  | 1. `(min-width: 320)` \u003cbr/\u003e 2. `(min-width: 10s)`                |\n| `(max-width: \u003cvalue\u003e)`   | [custom size](#size-with-custom-units) or number | Matches the maximum window width with the provided value.  | 1. `(max-width: 600)` \u003cbr/\u003e 2. `(max-width: 10rem)`              |\n| `(min-height: \u003cvalue\u003e)`  | [custom size](#size-with-custom-units) or number | Matches the minimum window height with the provided value. | 1. `(min-height: 600)` \u003cbr/\u003e 2. `(min-height: 15vs)`             |\n| `(max-height: \u003cvalue\u003e)`  | [custom size](#size-with-custom-units) or number | Matches the maximum window height with the provided value. | 1. `(max-height: 1200)` \u003cbr/\u003e 2. `(max-height: 25mvs0.75)`       |\n\n\u003e **Note:**\n\u003e\n\u003e 1. Brackets around queries are compulsory.\n\u003e 2. Any [custom size](#size-with-custom-units) defined in the above section will work, but using units like `vw`, `vh`, `vmin`, or `vmax` would always result in true since they are relative to the window with and height.\n\n#### Grouping Queries\n\n| Keyword               | Description                                                                                      | Example                                                                                         |\n| --------------------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- |\n| `\u003cquery\u003e and \u003cquery\u003e` | Applies the styles if queries preceding and succeeding to the keyword `and` is true.             | `(orientation: landscape) and (min-width:320)`                                                  |\n| `\u003cquery\u003e , \u003cquery\u003e`   | Applies the styles if either of the queries preceding and succeeding to the keyword `,` is true. | `(min-height: 600) , (min-width:320)`                                                           |\n| `(\u003cqueries\u003e)`         | Create group of queries if you have more than one conditional keyword                            | `((orientation: landscape) and (min-width:320)),((orientation: portrait) and (min-height:600))` |\n\n## API\n\n### `create (styles)`\n\nA function which returns computed styles on the basis of media queries specified.\n\n#### Arguments\n\n1. `styles` (_object_) : A style object either the normal or with custom properties and queries.\n\n#### Return\n\n-   `cssStyleSheet` (_object_)\n\n    -   `styles` (_object_): A style object which is generated during application start. See basic [example](#usage) above.\n\n    -   `responsiveStyles` (_Function_): A function to regenerate the styles during run time. When used inside a component, it will generate a new style object every time the component updates. See [example](#example) below.\n\n#### Example\n\n```js\nimport React from \"react\";\nimport { Text, View } from \"react-native\";\n\nimport CssStyleSheet from \"react-native-css-stylesheet\";\n\nconst Example = () =\u003e {\n\tconst styles = responsiveStyles();\n\treturn (\n\t\t\u003cView style={styles.container}\u003e\n\t\t\t\u003cText style={styles.text}\u003eExample\u003c/Text\u003e\n\t\t\u003c/View\u003e\n\t);\n};\n\nconst { responsiveStyles } = CssStyleSheet.create({\n\ttext: {\n\t\t\"(orientation: landscape)\": {\n\t\t\tfontSize: \"3rem\",\n\t\t},\n\t\tfontSize: \"2rem\",\n\t\tmarginVertical: 20,\n\t},\n\tcontainer: {\n\t\talignItems: \"center\",\n\t\tflex: 1,\n\t\tjustifyContent: \"center\",\n\t},\n});\n```\n\n### useCssStyleSheet (responsiveStyles)\n\nHook which returns recalculated styles every time there is a dimension change.\n\n#### Arguments\n\n1. `responsiveStyles` (_Function_) : `responsiveStyles` function returned from [`create`](#create-styles) function.\n\n#### Return\n\n-   `styles` (_object_): An object which is recalculated every time dimension change happens. See example below.\n\n#### Example\n\n```js\nimport React from \"react\";\nimport { Text, View } from \"react-native\";\n\nimport CssStyleSheet, { useCssStyleSheet } from \"react-native-css-stylesheet\";\n\nconst ResponsiveFunctionExample = () =\u003e {\n\tconst styles = useCssStyleSheet(responsiveStyles);\n\treturn (\n\t\t\u003cView style={styles.container}\u003e\n\t\t\t\u003cText style={styles.text}\u003eResponsiveFunctionExample\u003c/Text\u003e\n\t\t\u003c/View\u003e\n\t);\n});\n\nconst { responsiveStyles } = CssStyleSheet.create({\n\ttext: {\n\t\t\"(orientation: landscape)\": {\n\t\t\tfontSize: \"3rem\",\n\t\t},\n\t\tfontSize: \"2rem\",\n\t\tmarginVertical: 20,\n\t},\n\tcontainer: {\n\t\talignItems: \"center\",\n\t\tflex: 1,\n\t\tjustifyContent: \"center\",\n\t},\n});\n\nexport default ResponsiveFunctionExample;\n\n```\n\n### withCssStyleSheet (responsiveStyles, Component)\n\nLink a style sheet with a component using the higher-order component pattern. It does not modify the component passed to it; instead, it returns a new component with a `cssStyleSheet` prop. This prop contains the responsive style object which gets recalculated every time there is a dimension change detected. This props can be used as a normal style object.\n\n-   It adds a `cssStyleSheet` prop.\n-   It forwards refs to the inner component.\n\n#### Arguments\n\n1. `responsiveStyles` (_Function_) : `responsiveStyles` function returned from [`create`](#create-styles) function.\n\n2. `Component` (_React Element_) : The component that will be wrapped\n\n#### Return\n\n-   `Component` (_React Element_): The new component created.\n\n#### Example\n\n```js\nimport React from \"react\";\nimport { Text, View } from \"react-native\";\n\nimport CssStyleSheet, { withCssStyleSheet } from \"react-native-css-stylesheet\";\n\nclass ClassWithoutStyleSheet extends React.Component {\n\trender() {\n\t\tconst { cssStyleSheet } = this.props;\n\t\treturn (\n\t\t\t\u003cView style={cssStyleSheet.container}\u003e\n\t\t\t\t\u003cText style={cssStyleSheet.text}\u003eResponsiveClassExample\u003c/Text\u003e\n\t\t\t\u003c/View\u003e\n\t\t);\n\t}\n}\n\nconst { responsiveStyles } = CssStyleSheet.create({\n\ttext: {\n\t\t\"(orientation: landscape)\": {\n\t\t\tfontSize: \"3rem\",\n\t\t},\n\t\tfontSize: \"2rem\",\n\t\tmarginVertical: 20,\n\t},\n\tcontainer: {\n\t\talignItems: \"center\",\n\t\tflex: 1,\n\t\tjustifyContent: \"center\",\n\t},\n});\n\nconst ResponsiveClassExample = withCssStyleSheet(responsiveStyles, ClassWithoutStyleSheet);\n\nexport default ResponsiveClassExample;\n\n/**\n * OR\n * export default withCssStyleSheet(responsiveStyles, ClassWithoutStyleSheet);\n */\n```\n\n\u003c!-- ## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. --\u003e\n\n## Todo\n\n-   [ ] Add Examples screenshot/gif\n-   [ ] Nested queries support\n-   [ ] Platform based media queries\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarshan09200%2Freact-native-css-stylesheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdarshan09200%2Freact-native-css-stylesheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarshan09200%2Freact-native-css-stylesheet/lists"}