{"id":14070608,"url":"https://github.com/react-native-toolkit/react-native-responsive-dimensions","last_synced_at":"2025-07-30T08:31:06.750Z","repository":{"id":40321750,"uuid":"84140592","full_name":"react-native-toolkit/react-native-responsive-dimensions","owner":"react-native-toolkit","description":"Resposive fontSize, height and width for react-native components, that automatically adjusts itself based on screen-size of the device.","archived":true,"fork":false,"pushed_at":"2022-12-10T22:17:45.000Z","size":3722,"stargazers_count":478,"open_issues_count":23,"forks_count":41,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-07-09T04:42:53.480Z","etag":null,"topics":["dimensions","font-size","hacktoberfest","react-native","react-native-component","responsive","responsive-design"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-responsive-dimensions","language":"TypeScript","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/react-native-toolkit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-07T01:39:54.000Z","updated_at":"2025-07-04T12:00:35.000Z","dependencies_parsed_at":"2023-01-26T12:00:44.667Z","dependency_job_id":null,"html_url":"https://github.com/react-native-toolkit/react-native-responsive-dimensions","commit_stats":null,"previous_names":["daniakash/react-native-responsive-dimensions"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/react-native-toolkit/react-native-responsive-dimensions","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-toolkit%2Freact-native-responsive-dimensions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-toolkit%2Freact-native-responsive-dimensions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-toolkit%2Freact-native-responsive-dimensions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-toolkit%2Freact-native-responsive-dimensions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-native-toolkit","download_url":"https://codeload.github.com/react-native-toolkit/react-native-responsive-dimensions/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-toolkit%2Freact-native-responsive-dimensions/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267835423,"owners_count":24151764,"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","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"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":["dimensions","font-size","hacktoberfest","react-native","react-native-component","responsive","responsive-design"],"created_at":"2024-08-13T07:07:55.953Z","updated_at":"2025-07-30T08:31:06.413Z","avatar_url":"https://github.com/react-native-toolkit.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# 📐📱 React Native Responsive Dimensions 🌐📏\n\nResponsive height, width and responsive fontSize for your react native components!\n\nThe dimensions auto adjust based on the window size (view port) or the screen size of the device 🙌🏽\n\nSupport for responsive dimension hooks to help auto-adjust dimensions for devices whose display or screen sizes may change such as foldable phones or browser windows! 😎\n\n[![Build Status][build-badge]][build]\n[![Maintainability][maintainability-badge]][maintainability-url]\n[![Test Coverage][coverage-badge]][coverage-url]\n\n[![Version][version-badge]][package]\n[![Downloads][downloads-badge]][npmtrends]\n[![Bundlephobia][bundle-phobia-badge]][bundle-phobia]\n\n[![Star on GitHub][github-star-badge]][github-star]\n[![Watch on GitHub][github-watch-badge]][github-watch]\n[![Twitter Follow][twitter-badge]][twitter]\n\n---\n\n### Compatible with Expo \u0026 React Native Web 🚀\n\n### PRs Welcome 👍✨\n\n\u003c/div\u003e\n\n- 📦 [Installation](#installation)\n- ℹ️ [Usage](#usage)\n- 🎣 [Responsive Hooks](#responsive-hooks)\n- 💡 [Examples](#examples)\n- ✨ [Why Responsive Dimensions?](#why-responsive-dimensions)\n\n## Installation\n\n```sh\n#npm\nnpm install --save react-native-responsive-dimensions\n\n#yarn\nyarn add react-native-responsive-dimensions\n```\n\n## Usage\n\nWhile working with mobile devices, there are two kinds of dimensions you will have to focus on\n\n- Window Dimensions ﹣ which is the size of the window / view port on which your app is being displayed\n- Screen Dimensions ﹣ this is the total screen dimensions of your device (your app may occupy the entire screen or only a portion of the screen)\n\n### Working with Window Dimensions\n\n```js\nimport { StyleSheet } from \"react-native\";\nimport {\n  responsiveHeight,\n  responsiveWidth,\n  responsiveFontSize\n} from \"react-native-responsive-dimensions\";\n\nconst styles = StyleSheet.create({\n  container: {\n    justifyContent: \"center\",\n    height: responsiveHeight(50), // 50% of window height\n    width: responsiveWidth(50), // 50% of window width\n    alignItems: \"center\"\n  },\n  sampleText: {\n    fontSize: responsiveFontSize(2) // 2% of total window size\n  }\n});\n```\n\n### Working with Screen Dimensions\n\n```js\nimport { StyleSheet } from \"react-native\";\nimport {\n  responsiveScreenHeight,\n  responsiveScreenWidth,\n  responsiveScreenFontSize\n} from \"react-native-responsive-dimensions\";\n\nconst styles = StyleSheet.create({\n  container: {\n    justifyContent: \"center\",\n    height: responsiveScreenHeight(50), // 50% of Screen height\n    width: responsiveScreenWidth(50), // 50% of Screen width\n    alignItems: \"center\"\n  },\n  sampleText: {\n    fontSize: responsiveScreenFontSize(2) // 2% of total screen size\n  }\n});\n```\n\n## Responsive hooks\n\nThe above responsive dimension methods do not auto update once the value is set. They are suitable for using within `StyleSheet.create` method as the values don't change once set. However, you might want your views to respond to dimension changes such as screen rotation, device folding (in foldable devices) \u0026 browser window resizing (react-native-web).\n\nThe values set by these hooks auto respond to changes. The following hooks are available for use ﹣\n\n- `useResponsiveHeight`\n- `useResponsiveWidth`\n- `useResponsiveFontSize`\n- `useResponsiveScreenHeight`\n- `useResponsiveScreenWidth`\n- `useResponsiveScreenFontSize`\n- `useDimensionsChange`\n\n### Sample Usage\n\n```jsx\nimport React from \"react\";\nimport { View } from \"react-native\";\nimport {\n  useResponsiveHeight,\n  useResponsiveWidth\n} from \"react-native-responsive-dimensions\";\n\nconst App = () =\u003e {\n  const height = useResponsiveHeight(25);\n  const width = useResponsiveWidth(25);\n\n  return \u003cView style={{ height, width }} /\u003e;\n};\n```\n\n### Reacting to dimension changes with `useDimensionsChange`\n\n`useDimensionsChange` basically calls a function whenever the dimensions update with new window \u0026 screen dimensions as arguments. This is a good place to include your layout animations if your UI layout reacts to dimension updates and you want to make the transitions smooth.\n\n```jsx\nimport React, { useCallback } from \"react\";\nimport { View, LayoutAnimation } from \"react-native\";\nimport {\n  useResponsiveHeight,\n  useResponsiveWidth,\n  useDimensionsChange\n} from \"react-native-responsive-dimensions\";\n\nconst App = () =\u003e {\n  const height = useResponsiveHeight(25);\n  const width = useResponsiveWidth(25);\n\n  useDimensionsChange(\n    useCallback(({ window, screen }) =\u003e {\n      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);\n    }, [])\n  );\n\n  return \u003cView style={{ height, width }} /\u003e;\n};\n```\n\n## Examples\n\n- [Using Responsive Height \u0026 Width (snack)][responsive-example]\n- [Using the Responsive Hooks (react-native-web)][responsive-hooks-example]\n\n## Why Responsive Dimensions\n\nI built responsive dimensions as a personal tool to tackle some of my problems I face during my everyday app development. You might want to use it if your usecase comes under one of the following scenarios.\n\n- While working with React Native UI (especially animations) there are lots of scenarios that require calculating a certain percentage of the display area.\n\n- If your app supports tablets then you might want to scale some of your fonts \u0026 UI Components based on the display size.\n\n- If you are using react-native-web or targetting foldable devices your UI needs to react to the changes in the window dimensions.\n\n[build]: https://github.com/DaniAkash/react-native-responsive-dimensions/actions\n[build-badge]: https://github.com/daniakash/react-native-responsive-dimensions/workflows/build/badge.svg\n[coverage-badge]: https://api.codeclimate.com/v1/badges/0cf535fb8d3da2aa4a91/test_coverage\n[coverage-url]: https://codeclimate.com/github/DaniAkash/react-native-responsive-dimensions/test_coverage\n[maintainability-badge]: https://api.codeclimate.com/v1/badges/0cf535fb8d3da2aa4a91/maintainability\n[maintainability-url]: https://codeclimate.com/github/DaniAkash/react-native-responsive-dimensions/maintainability\n[bundle-phobia-badge]: https://badgen.net/bundlephobia/minzip/react-native-responsive-dimensions\n[bundle-phobia]: https://bundlephobia.com/result?p=react-native-responsive-dimensions\n[downloads-badge]: https://img.shields.io/npm/dm/react-native-responsive-dimensions.svg?style=flat-square\n[npmtrends]: http://www.npmtrends.com/react-native-responsive-dimensions\n[package]: https://www.npmjs.com/package/react-native-responsive-dimensions\n[version-badge]: https://img.shields.io/npm/v/react-native-responsive-dimensions.svg?style=flat-square\n[twitter]: https://twitter.com/dani_akash_\n[twitter-badge]: https://img.shields.io/twitter/follow/dani_akash_?style=social\n[github-watch-badge]: https://img.shields.io/github/watchers/DaniAkash/react-native-responsive-dimensions.svg?style=social\n[github-watch]: https://github.com/DaniAkash/react-native-responsive-dimensions/watchers\n[github-star-badge]: https://img.shields.io/github/stars/DaniAkash/react-native-responsive-dimensions.svg?style=social\n[github-star]: https://github.com/DaniAkash/react-native-responsive-dimensions/stargazers\n[responsive-example]: https://snack.expo.io/@daniakash/responsive-dimensions\n[responsive-hooks-example]: https://codesandbox.io/s/react-native-responsive-dimensions-hooks-2cqm8\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-native-toolkit%2Freact-native-responsive-dimensions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-native-toolkit%2Freact-native-responsive-dimensions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-native-toolkit%2Freact-native-responsive-dimensions/lists"}