{"id":16455150,"url":"https://github.com/kdn0325/react-native-dimensions-layout","last_synced_at":"2026-05-01T12:32:21.307Z","repository":{"id":226764728,"uuid":"769554566","full_name":"kdn0325/react-native-dimensions-layout","owner":"kdn0325","description":"Do you want to develop using consistent design in React Native? This library makes it easy to create","archived":false,"fork":false,"pushed_at":"2024-03-15T16:29:44.000Z","size":1704,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-06T17:46:38.168Z","etag":null,"topics":["adobe-xd","figma","react-native","react-native-dimentions"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-dimensions-layout","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/kdn0325.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-03-09T12:08:57.000Z","updated_at":"2025-02-23T05:08:28.000Z","dependencies_parsed_at":"2024-03-15T17:40:56.719Z","dependency_job_id":"7c5ddd7c-6d35-4109-ab6b-2473a5b651b8","html_url":"https://github.com/kdn0325/react-native-dimensions-layout","commit_stats":null,"previous_names":["kdn0325/react-native-dimensions-util","kdn0325/react-native-responsive-design"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/kdn0325/react-native-dimensions-layout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kdn0325%2Freact-native-dimensions-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kdn0325%2Freact-native-dimensions-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kdn0325%2Freact-native-dimensions-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kdn0325%2Freact-native-dimensions-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kdn0325","download_url":"https://codeload.github.com/kdn0325/react-native-dimensions-layout/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kdn0325%2Freact-native-dimensions-layout/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32497811,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"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":["adobe-xd","figma","react-native","react-native-dimentions"],"created_at":"2024-10-11T10:21:17.818Z","updated_at":"2026-05-01T12:32:21.281Z","avatar_url":"https://github.com/kdn0325.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-dimensions-layout\n\nreact-native-dimensions-layout\n\n- As a React Native developer, we need to determine the size of components with different display sizes for each device using the app\n- Usually, when collaborating using Figma, calculating is annoying and there is a possibility of making mistakes. Even if it is modularized, it can be inaccurate sometimes. It is also difficult to cope with foldable phones or horizontal modes. And some components don't work with percentage\n- The best recommendation is using `useWindowDimension` Hooks\n\n## Installation\n\n```sh\nnpm install react-native-dimensions-layout\n# or\nyarn add react-native-dimensions-layout\n```\n\n## Usage\n\n\n###  widthPercentage(width: number): number\nCalculates the percentage value of the width relative to the screen width.\n\n```javascript\nimport { widthPercentage } from 'react-native-dimensions-layout';\n\nconst screenWidth = 200; // Current screen width\nconst widthInPercentage = widthPercentage(screenWidth);\nconsole.log(widthInPercentage); // Percentage value of the screen width\n ```\n\nheightPercentage(height: number): number\nCalculates the percentage value of the height relative to the screen height.\n\n\n\n###  heightPercentage(height: number): number\nCalculates the percentage value of the height relative to the screen height.\n\n```javascript\nimport { heightPercentage } from 'react-native-dimensions-layout';\n\nconst screenHeight = 400; // Current screen height\nconst heightInPercentage = heightPercentage(screenHeight);\nconsole.log(heightInPercentage); // Percentage value of the screen height\n\n ```\n\n###  fontPercentage(size: number): number\nCalculates the percentage value of the font size\n\n```javascript\nimport { fontPercentage } from 'react-native-dimensions-layout';\n\nconst fontSize = 20; // Font size\nconst fontSizeInPercentage = fontPercentage(fontSize);\nconsole.log(fontSizeInPercentage); // Percentage value of the font size\n```\n\n\n### horizontalScale(value: number): number\nScales the value provided based on the horizontal size of the screen.\n\n```javascript\nimport { fontPercentage } from 'react-native-dimensions-layout';\n\nconst fontSize = 20; // Font size\nconst fontSizeInPercentage = fontPercentage(fontSize);\nconsole.log(fontSizeInPercentage); // Percentage value of the font size\n```\n\n###  verticalScale(value: number): number\nScales the value provided based on the horizontal size of the screen.\n\n```javascript\nimport { horizontalScale, verticalScale } from 'react-native-dimensions-layout';\n\nconst widthValue = 100; // Value to scale horizontally\nconst heightValue = 100; // Value to scale vertically\n\nconst scaledWidth = horizontalScale(widthValue);\nconst scaledHeight = verticalScale(heightValue);\n\nconsole.log(scaledWidth); // Scaled width value\nconsole.log(scaledHeight); // Scaled height value\n\n```\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkdn0325%2Freact-native-dimensions-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkdn0325%2Freact-native-dimensions-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkdn0325%2Freact-native-dimensions-layout/lists"}