{"id":44145210,"url":"https://github.com/alpacaaa/react-native-media-queries","last_synced_at":"2026-02-09T02:08:26.178Z","repository":{"id":57338314,"uuid":"49516325","full_name":"alpacaaa/react-native-media-queries","owner":"alpacaaa","description":"Media queries like functionality for React Native","archived":false,"fork":false,"pushed_at":"2016-09-29T08:38:56.000Z","size":13,"stargazers_count":72,"open_issues_count":1,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-10-04T19:16:56.820Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/alpacaaa.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":"2016-01-12T17:18:28.000Z","updated_at":"2024-05-17T12:49:25.000Z","dependencies_parsed_at":"2022-08-31T06:00:53.803Z","dependency_job_id":null,"html_url":"https://github.com/alpacaaa/react-native-media-queries","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alpacaaa/react-native-media-queries","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alpacaaa%2Freact-native-media-queries","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alpacaaa%2Freact-native-media-queries/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alpacaaa%2Freact-native-media-queries/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alpacaaa%2Freact-native-media-queries/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alpacaaa","download_url":"https://codeload.github.com/alpacaaa/react-native-media-queries/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alpacaaa%2Freact-native-media-queries/sbom","scorecard":{"id":186450,"data":{"date":"2025-08-11","repo":{"name":"github.com/alpacaaa/react-native-media-queries","commit":"6166c0a4af807700a70c4a09727f1b2cf8babc19"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.6,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Code-Review","score":0,"reason":"Found 0/14 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}}]},"last_synced_at":"2025-08-16T19:53:31.025Z","repository_id":57338314,"created_at":"2025-08-16T19:53:31.026Z","updated_at":"2025-08-16T19:53:31.026Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29254307,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-09T01:52:29.835Z","status":"online","status_checked_at":"2026-02-09T02:00:09.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2026-02-09T02:08:25.519Z","updated_at":"2026-02-09T02:08:26.162Z","avatar_url":"https://github.com/alpacaaa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n# React Native Media Queries\n\nThis module brings media queries like functionality to React Native styles.  \nUses `React.Dimensions.get('window')` (or the `nativeEvent` data when bound to `onLayout`)\nto determine width and height of the screen.\n\n\n### Install\n\n`npm install react-native-media-queries`\n\n\n### Quick Start\n\nIf you want to write this:\n\n```css\n/* This is of course CSS, don't paste it in your RN app, you fool! */\n.logo {\n  height: 200px;\n}\n\n@media (max-height: 500px) {\n  .logo {\n    height: 120px;\n  }\n}\n```\n\nWrite this instead:\n\n```javascript\nimport { createStyles, maxHeight } from 'react-native-media-queries';\n\n// Define your styles\nconst base = {\n  logo: {\n    height: 200\n  }\n};\n\nconst styles = createStyles(\n  base,\n\n  // override styles only if screen height is less than 500\n  maxHeight(500, {\n    logo: {\n      height: 120\n    }\n  })\n);\n\n```\n\nThen use `styles` in your components as you're already used to, i.e. `\u003cLogo style={styles.logo} /\u003e`.\n\n\n### API\n\n#### maxHeight(height, styles)  \nEquivalent to `max-height` in CSS.\nApply `styles` only if screen height is less than or equal `height`.\n\n#### minHeight(height, styles)  \nEquivalent to `min-height` in CSS.\nApply `styles` only if screen height is greater than or equal `height`.\n\n#### maxWidth(width, styles)  \nEquivalent to `max-width` in CSS.\nApply `styles` only if screen width is less than or equal `width`.\n\n#### minWidth(width, styles)  \nEquivalent to `min-width` in CSS.\nApply `styles` only if screen width is greater than or equal `width`.\n\n#### aspectRatio(ratio, styles)\nEquivalent to `aspect-ratio` in CSS.\nApply `styles` only if the aspect ratio of the screen is the same as the ratio provided.  \n*Note*: Ratio must be in the form `16/9`.\n\n#### maxAspectRatio(ratio, styles)\nEquivalent to `max-aspect-ratio` in CSS.\nApply `styles` only if the aspect ratio of the screen is less or equal than the ratio provided.\n\n#### minAspectRatio(ratio, styles)\nEquivalent to `min-aspect-ratio` in CSS.\nApply `styles` only if the aspect ratio of the screen is greater or equal than the ratio provided.\n\n#### `createStyles(baseStyles, expression1, expression2...)`\nStart from `baseStyles` and apply further matching expressions.\n\n\n\n### Compose expressions\nExpressions are composable meaning you can apply a certain style only\nif the screen height is greater than X AND less than Y (for example).\n\nBasically, if you want something like this\n`@media (min-height: 500px) and (max-height: 1200px)`,\nyou'd write this instead:\n\n```javascript\nconst base = {\n  logo: {\n    height: 200\n  }\n};\n\nconst styles = createStyles(\n  base,\n\n  // override styles only if screen height is greater than 500 and less than 1300\n  minHeight(500, maxHeight(1300, {\n    logo: {\n      height: 120\n    }\n  }))\n);\n\n```\n\n\nAnd you can have multiple expressions too:\n\n```javascript\nconst base = {\n  logo: {\n    height: 200\n  }\n};\n\nconst exp1 = {\n  logo: {\n    borderWidth: 5\n  }\n};\n\nconst exp2 = {\n  logo: {\n    backgroundColor: '#ddd'\n  }\n};\n\n\nconst styles = createStyles(\n  base,\n  minHeight(500, exp1),\n  minWidth(750, exp2)\n);\n```\n\n\n\n### React (ahahah :/) to screen orientation changes / window resize\n\nAs of version `0.1.0` it is possible to update styles whenever the dimensions of the screen change,\nachieving a closer media queries implementation to what is available with CSS on the web.\n\nA function `onLayout` is provided in the object returned from `createStyles()` (eg. `styles.onLayout`).\nYou will need to call this function everytime your root component updates its layout, so you'll have to\nbind it to the component's `onLayout` prop.\n\n\n\n```javascript\n\nclass MyComponent {\n  render() {\n    return (\n      \u003cView onLayout={styles.onLayout()}\u003e\n        \u003cText style={styles.title}\u003eYO mama\u003c/Text\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst base = {\n  title: {\n    fontSize: 16\n  }\n};\n\nconst biggerFont = {\n  title: {\n    fontSize: 20,\n    backgroundColor: 20,\n  }\n};\n\n\nconst styles = createStyles(\n  base,\n  minHeight(500, biggerFont),\n);\n\n```\n\n**NOTE:** This example, as is, **will not work** because React does not re render the interface unless\nthe state or the props have been updated. You can force a component to re render (even if it's not encouraged),\nso that this module actually works. It's a bit of a hack but depending on your situation it might be the only\nway to have the styles update on orientation changes / window resize. You can pass a callback to `onLayout`,\nit will get fired only if the styles have changed.\n\nHere's how you would use `forceUpdate` to force a re render and make the previous example work:\n\n```javascript\n\nclass MyComponent {\n  render() {\n    return (\n      \u003cView onLayout={styles.onLayout(() =\u003e this.forceUpdate())}\u003e\n        \u003cText style={styles.title}\u003eYO mama\u003c/Text\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst base = {\n  title: {\n    fontSize: 16\n  }\n};\n\nconst biggerFont = {\n  title: {\n    fontSize: 20,\n    backgroundColor: 20,\n  }\n};\n\n\nconst styles = createStyles(\n  base,\n  minHeight(500, biggerFont),\n);\n\n```\n\n\n\n### Changelog\n\n#### 0.3.0\nIntroduce `aspectRatio` queries.\n\n#### 0.1.0\nIntroduce `onLayout` callback and reactive updates to window size changes.  \nThanks to [Quincy Mitchell](http://twitter.com/quincymitch) for providing feedback and testing on Windows :)\n\n\n\n### License\n\n\n\u003e Copyright (c) 2016, Marco Sampellegrini \u003cbabbonatale@alpacaaa.net\u003e\n\n\n\u003e Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.\n\n\u003e THE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falpacaaa%2Freact-native-media-queries","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falpacaaa%2Freact-native-media-queries","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falpacaaa%2Freact-native-media-queries/lists"}