{"id":24747902,"url":"https://github.com/codingitwrong/react-native-style-queries","last_synced_at":"2025-10-16T11:53:12.448Z","repository":{"id":65485732,"uuid":"530233167","full_name":"CodingItWrong/react-native-style-queries","owner":"CodingItWrong","description":"Declarative responsive design for React Native.","archived":false,"fork":false,"pushed_at":"2025-07-01T09:52:10.000Z","size":2804,"stargazers_count":9,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-01T10:23:52.860Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/CodingItWrong.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"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":"2022-08-29T13:31:01.000Z","updated_at":"2025-07-01T09:04:29.000Z","dependencies_parsed_at":"2023-02-17T04:01:27.646Z","dependency_job_id":"3f5c3740-370b-465f-97d9-d42cfe7852f2","html_url":"https://github.com/CodingItWrong/react-native-style-queries","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CodingItWrong/react-native-style-queries","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingItWrong%2Freact-native-style-queries","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingItWrong%2Freact-native-style-queries/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingItWrong%2Freact-native-style-queries/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingItWrong%2Freact-native-style-queries/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodingItWrong","download_url":"https://codeload.github.com/CodingItWrong/react-native-style-queries/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingItWrong%2Freact-native-style-queries/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265554776,"owners_count":23787279,"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-01-28T05:18:05.495Z","updated_at":"2025-10-16T11:53:07.422Z","avatar_url":"https://github.com/CodingItWrong.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-style-queries\n\nDeclarative responsive design for React Native. `react-native-style-queries` allows you to specify styles for different conditions such as screen sizes and dark mode in a simple declarative way, inspired by CSS media queries:\n\n```jsx\nimport {useStyleQueries, screenWidthMin} from 'react-native-style-queries';\n\nfunction MyComponent() {\n  const styles = useStyleQueries(styleQueries);\n\n  return (\n    \u003cText style={styles.componentA}\u003eComponent A\u003c/Text\u003e\n  );\n}\n\nconst styleQueries = {\n  componentA: [\n    { fontSize: 12 }, // defaults\n\n    screenWidthMin(375, {\n      fontSize: 16,\n    }),\n  ],\n};\n```\n\n## Installation\n\n`yarn add react-native-style-queries`\n\nor\n\n`npm install --save react-native-style-queries`\n\n## Usage\n\nUsing `react-native-style-queries` involves two steps:\n\n1. Configuring your conditional styles outside a component.\n2. Passing the configuration to the `useStyleQueries()` hook within a component, which returns an object containing normal React Native styles that can be passed to the `style` prop of components.\n\nHere's what configuring conditional styles looks like:\n\n```js\nimport {screenWidthMin} from 'react-native-style-queries';\n\n// at the root of the JavaScript file, outside of any component\nconst conditionalStyles = {\n  myComponentA: [\n    { fontSize: 12 },\n\n    screenWidthMin(375, {\n      fontSize: 16,\n    }),\n\n    screenWidthMin(600, {\n      fontSize: 20,\n    }),\n  ],\n\n  myComponentB: {\n    fontSize: 12,\n  },\n};\n```\n\nNote the following:\n\n- Like with React Native `StyleSheet.create()` calls, conditional styles are defined outside of a component, at the root of the file.\n- A conditional styles object can contain multiple named styles, just like a `StyleSheet`. The value of a named style can be a simple style object, but it can also be an array.\n- That array can contain simple style objects, in which case those styles are always applied.\n- The array can also contain calls to **style query functions** such as `screenWidthMin()`. Style query functions check the condition you specify and apply the styles only when that condition is met. For example, `screenWidthMin(375, styles)` will only apply `styles` when the screen width is greater than or equal to 375 pixels.\n\nTo use these conditional styles within a component:\n\n```jsx\nimport {useStyleQueries} from 'react-native-style-queries';\n\nfunction MyComponent() {\n  const styles = useStyleQueries(styleQueries);\n\n  return (\n    \u003c\u003e\n      \u003cText style={styles.myComponentA}\u003eComponent A\u003c/Text\u003e\n      \u003cText style={styles.myComponentB}\u003eComponent B\u003c/Text\u003e\n    \u003c/\u003e\n  );\n}\n```\n\nWhen any device info changes (such as screen dimensions based on device rotation), `useStyleQueries()` will cause the component to rerender, recomputing the styles.\n\n## Style Query Functions\n\nThe following style query functions are exported by `react-native-style-queries`:\n\n- `screenWidthMin(widthInPixels, styles)`\n- `screenWidthMax(widthInPixels, styles)`\n- `screenHeightMin(heightInPixels, styles)`\n- `screenHeightMax(heightInPixels, styles)`\n- `colorScheme(scheme, styles)` - values of `scheme` are the values of [the React Native `useColorScheme` hook](https://reactnative.dev/docs/usecolorscheme): \"light\", \"dark\", or `null`\n\nTo learn more about how style query functions work or how to define your own custom logic, see [Conditional Styles](./docs/conditioanl-styles.md).\n\n## Alternatives\n\nThe following are other approaches to responsive design in React Native:\n\n- You can manually create style objects based on the return values of hooks like [`useWindowDimensions`](https://reactnative.dev/docs/usewindowdimensions) and [`useColorScheme`](https://reactnative.dev/docs/usecolorscheme). This tends to be fairly verbose and can clutter up your logic.\n- [`react-native-size-matters`](https://github.com/nirsky/react-native-size-matters) allows automatically scaling measurements for different screen sizes. This is a different approach from using breakpoints, an appraoch that is common on the web and that `react-native-style-queries` also takes.\n- [`react-native-media-query`](https://github.com/kasinskas/react-native-media-query) is directly modeled after CSS media queries. One limitation it has, though, is that it doesn't automatically rerender to handle device rotations. It also implements queries within strings that closely match CSS media query syntax, whereas `react-native-style-queries` uses plain functions to avoid a layer of indirection and allow writing arbitrary JavaScript logic.\n\nTo learn more about how we landed on `react-native-style-queries`' API design, see [API Design](./docs/api-design.md).\n\n## Example\n\nAn example React Native app using `react-native-style-queries` can be found in the [example/](./example/) directory.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingitwrong%2Freact-native-style-queries","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodingitwrong%2Freact-native-style-queries","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingitwrong%2Freact-native-style-queries/lists"}