{"id":16836722,"url":"https://github.com/helderberto/react-native-scaled-sheet","last_synced_at":"2025-03-22T04:30:56.571Z","repository":{"id":43838259,"uuid":"258332114","full_name":"helderberto/react-native-scaled-sheet","owner":"helderberto","description":"📏 A React Native interceptor for StyleSheet to scale sizes based on screen dimensions.","archived":false,"fork":false,"pushed_at":"2022-02-16T15:02:42.000Z","size":3621,"stargazers_count":18,"open_issues_count":13,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-18T08:11:20.396Z","etag":null,"topics":["hacktoberfest","hacktoberfest-accepted","react-native","react-native-scale","react-native-scaled-sheet","scale","scale-sizes"],"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/helderberto.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":"2020-04-23T21:14:10.000Z","updated_at":"2022-02-16T15:01:09.000Z","dependencies_parsed_at":"2022-09-12T07:42:07.967Z","dependency_job_id":null,"html_url":"https://github.com/helderberto/react-native-scaled-sheet","commit_stats":null,"previous_names":["helderburato/react-native-scaled-sheet"],"tags_count":1,"template":false,"template_full_name":"codevor/js-library-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/helderberto%2Freact-native-scaled-sheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/helderberto%2Freact-native-scaled-sheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/helderberto%2Freact-native-scaled-sheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/helderberto%2Freact-native-scaled-sheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/helderberto","download_url":"https://codeload.github.com/helderberto/react-native-scaled-sheet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244907420,"owners_count":20529850,"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":["hacktoberfest","hacktoberfest-accepted","react-native","react-native-scale","react-native-scaled-sheet","scale","scale-sizes"],"created_at":"2024-10-13T12:14:36.668Z","updated_at":"2025-03-22T04:30:55.958Z","avatar_url":"https://github.com/helderberto.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  📏 ScaledSheet\n\n  \u003cbr /\u003e\n  \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/react-native-scaled-sheet\"\u003e\n  \u003cimg alt=\"npm bundle size\" src=\"https://img.shields.io/bundlephobia/min/react-native-scaled-sheet\"\u003e\n  \u003cimg alt=\"NPM\" src=\"https://img.shields.io/npm/l/react-native-scaled-sheet\"\u003e\n\u003c/h1\u003e\n\n\u003cp\u003e\u003cstrong\u003e\u003ci\u003ereact-native-scaled-sheet\u003c/i\u003e is a package for React Native\u003c/strong\u003e whose goal is to calculate scale of styles values as the easiest way.\u003c/p\u003e\n\n```jsx\nimport ScaledSheet from 'react-native-scaled-sheet';\n\nconst styles = ScaledSheet.create({\n  container: {\n    height: 50, // =\u003e scaleSize(50)\n    width: 50, // =\u003e scaleSize(50)\n    fontSize: 14, // =\u003e scaleFont(14)\n  },\n});\n```\n\n---\n\n## Motivation\n\n- `Scale Styles:` Apply scales based on `PixelRatio` API to fonts and number values;\n- `Intecept Styles`: Intercept every styles and apply the new calculate one;\n\n---\n\n## Usage\n\nTo get started using react-native-scaled-sheet, first install the package:\n\n`yarn add react-native-scaled-sheet` or `npm i react-native-scaled-sheet`\n\n\u003cdetails\u003e\n\n\u003csummary\u003e\u003cstrong\u003eUpdate the line base width:\u003c/strong\u003e\u003c/summary\u003e\n\n```jsx\nimport ScaledSheet from 'react-native';\n\nScaledSheet.setLineBaseWidth(500);\n\nconst styles = ScaledSheet.create({\n  container: {\n    height: 50,\n    width: 50,\n    fontSize: 14,\n  },\n});\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eScale styles in the StyleSheet:\u003c/strong\u003e\u003c/summary\u003e\n\n```jsx\nimport { StyleSheet } from 'react-native';\nimport { scaleSize, scaleFont } from 'react-native-scaled-sheet';\n\nconst styles = StyleSheet.create({\n  container: {\n    height: scaleSize(50),\n    width: scaleSize(50),\n    fontSize: scaleFont(14),\n  },\n});\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eUpdate existent styles to use the ScaleSheet:\u003c/strong\u003e\u003c/summary\u003e\n\n**BEFORE:**\n\n```jsx\nimport { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  container: {\n    height: 50,\n    width: 50,\n    fontSize: 14,\n  },\n});\n```\n\n**AFTER:**\n\n```jsx\nimport ScaledSheet from 'react-native-scaled-sheet';\n\nconst styles = ScaledSheet.create({\n  container: {\n    height: 50,\n    width: 50,\n    fontSize: 14,\n  },\n});\n```\n\n**Note: It's easier just update the `.create` to use from ScaleSheet and that's it!**\n\n\u003c/details\u003e\n\n---\n\n## Benchmark\n\nThe performance tests below show the comparison between using the StyleSheet offered by the React Native API and using ScaledSheet rendering 5k and 10k views. See the results:\n\n| Library     | Rendering 5k Views | Rendering 10k Views |\n| :---------- | :----------------: | :-----------------: |\n| StyleSheet  |       2465ms       |       3185ms        |\n| ScaledSheet |     **2515ms**     |     **3383ms**      |\n\nSee the test files in `examples/ExpoExampleApp`.\n\n## Contributing\n\nPlease read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.\n\n## License\n\n[MIT License](LICENSE) © [helderburato](https://helderburato.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhelderberto%2Freact-native-scaled-sheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhelderberto%2Freact-native-scaled-sheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhelderberto%2Freact-native-scaled-sheet/lists"}