{"id":25339812,"url":"https://github.com/chsdwn/react-native-responsive-scalability","last_synced_at":"2025-10-29T09:31:29.957Z","repository":{"id":190627728,"uuid":"680502855","full_name":"chsdwn/react-native-responsive-scalability","owner":"chsdwn","description":"The package provides utility hooks that help React Native developers create responsive, cross-platform applications that are aware of orientation changes. ","archived":false,"fork":false,"pushed_at":"2023-09-09T14:58:45.000Z","size":53442,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-03T20:36:38.796Z","etag":null,"topics":["expo","package","react-native","responsive"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-responsive-scalability","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/chsdwn.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-19T13:04:47.000Z","updated_at":"2024-07-23T17:52:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"48fd310a-12c8-45aa-84d3-e66bbe50be10","html_url":"https://github.com/chsdwn/react-native-responsive-scalability","commit_stats":null,"previous_names":["chsdwn/react-native-responsive-scalability"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chsdwn%2Freact-native-responsive-scalability","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chsdwn%2Freact-native-responsive-scalability/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chsdwn%2Freact-native-responsive-scalability/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chsdwn%2Freact-native-responsive-scalability/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chsdwn","download_url":"https://codeload.github.com/chsdwn/react-native-responsive-scalability/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238801824,"owners_count":19532900,"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":["expo","package","react-native","responsive"],"created_at":"2025-02-14T07:29:09.337Z","updated_at":"2025-10-29T09:31:24.442Z","avatar_url":"https://github.com/chsdwn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca name=\"title\"\u003e\u003c/a\u003e\n  \u003ch3 align=\"center\"\u003eReact Native Responsive Scalability\u003c/h3\u003e\n  \n  \u003cp align=\"center\"\u003e\n    The package provides utility hooks that help React Native developers create responsive, cross-platform applications that are aware of orientation changes.\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/chsdwn/react-native-responsive-scalability/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/chsdwn/react-native-responsive-scalability/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\u003ca href=\"#about-the-project\"\u003eAbout The Project\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#peer-dependencies\"\u003ePeer Dependencies\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#api\"\u003eAPI\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#responsivescalabilityprovider\"\u003eResponsiveScalabilityProvider\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#useorientation\"\u003euseOrientation\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#useresponsivescalability\"\u003euseResponsiveScalability\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#usesafeareawindow\"\u003euseSafeAreaWindow\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#usescale\"\u003euseScale\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#usestyle\"\u003euseStyle\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#acknowledgments\"\u003eAcknowledgments\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n## About the Project\n\n\u003cp align=\"center\"\u003eTake a look at the images below and compare scaled and not scaled screenshots on both iOS and Android devices for landscape and portrait modes.\u003c/p\u003e\n\n### Portrait\n\n![React Native Responsive Scalability Portrait Overview](./screenshots/overview.jpg 'React Native Responsive Scalability Portrait Overview')\n\n### Landscape\n\n![React Native Responsive Scalability Landscape Overview](./screenshots/overview%20landscape.jpg 'React Native Responsive Scalability Landscape Overview')\n\n## Getting Started\n\n### Peer Dependencies\n\n#### `react-native-safe-area-context`\n\n##### React Native CLI\n\n```sh\nnpm install react-native-safe-area-context\n```\n\n```sh\nyarn add react-native-safe-area-context\n```\n\n- (MacOS only) Install Cocoa packages\n\n  ```sh\n  npx pod-install\n  ```\n\n##### Expo\n\n```sh\nnpx expo install react-native-safe-area-context\n```\n\nAdd `\u003cSafeAreaProvider\u003e` in your app root component.\n\n```tsx\nimport { SafeAreaProvider } from 'react-native-safe-area-context';\n\nexport const App = () =\u003e {\n  return \u003cSafeAreaProvider\u003e...\u003c/SafeAreaProvider\u003e;\n};\n```\n\n### Installation\n\n```sh\nnpm install react-native-responsive-scalability\n```\n\n```sh\nyarn add react-native-responsive-scalability\n```\n\n- Add following rules to your eslint config file:\n\n```json\n{\n  \"rules\": {\n    \"react-hooks/exhaustive-deps\": [\n      \"error\",\n      {\n        \"additionalHooks\": \"(useStyle)\"\n      }\n    ]\n  }\n}\n```\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#title\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## Usage\n\nFor usage details, please refer to the `src` folder of the example app. https://github.com/chsdwn/react-native-responsive-scalability/tree/main/example/src\n\nFor interactive demo: https://snack.expo.dev/@chsdwn/responsive-scalability-example\n\nFor a more complex example, please take a look at my demo project. https://github.com/chsdwn/FreeToGameApp\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#title\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## API\n\n### ResponsiveScalabilityProvider\n\nYou should to add `ResponsiveScalabilityProvider` in your app root component.\n\n#### Props\n\n`config`: Define your base device's dimensions, orientation, and breakpoints.\n\n| Prop            | Type     |                                              Default |\n| --------------- | -------- | ---------------------------------------------------: |\n| baseHeight      | `number` |                                                `430` |\n| baseWidth       | `number` |                                                `932` |\n| baseOrientation | `string` |                                         `'portrait'` |\n| breakpoints     | `object` | `{ sm: 640, md: 940, lg: undefined, xl: undefined }` |\n\n#### Example\n\n```tsx\nimport React from 'React';\nimport { SafeAreaProvider } from 'react-native-safe-area-context';\nimport {\n  IResponsiveScalabilityConfig,\n  ResponsiveScalabilityProvider,\n} from 'react-native-responsive-scalability';\n\nconst config: IResponsiveScalabilityConfig = {\n  // # Default device: iPhone 14 Pro Max.\n  // baseWidth: 430,\n  // baseHeight: 932,\n\n  // # \"landscape\" option can be selected. Default base orientation is \"portrait\".\n  // baseOrientation: 'portrait',\n\n  breakpoints: {\n    // # Default breakpoints\n    // sm: 640,\n    // md: 940,\n    lg: 1280,\n    xl: 1536,\n  },\n};\n\nexport const App = () =\u003e {\n  return (\n    \u003cSafeAreaProvider\u003e\n      \u003cResponsiveScalabilityProvider config={config}\u003e\n        ...\n      \u003c/ResponsiveScalabilityProvider\u003e\n    \u003c/SafeAreaProvider\u003e\n  );\n};\n```\n\n### useOrientation\n\nUse `useOrientation` hook to retrieve current orientation of the device.\n\n#### Example\n\n```tsx\nimport React from 'react';\nimport { useOrientation } from 'react-native-responsive-scalability';\n\nexport const Home = () =\u003e {\n  const orientation = useOrientation();\n  const isPortrait = orientation === 'portrait';\n\n  return \u003c\u003e\u003c/\u003e;\n};\n```\n\n### useResponsiveScalability\n\nUse `useResponsiveScalability` hook to retrieve `baseHeight`, `baseWidth`, `baseOrientation`, and `breakpoints` values.\n\n#### Example\n\n```tsx\nimport React from 'react';\nimport { FlatList } from 'react-native';\nimport { useSafeAreaFrame } from 'react-native-safe-area-context';\nimport { useResponsiveScalability } from 'react-native-responsive-scalability';\n\nexport const Home = () =\u003e {\n  const { width } = useSafeAreaFrame();\n  const { baseHeight, baseWidth, baseOrientation, breakpoints } =\n    useResponsiveScalability();\n\n  let numColumns = 1;\n  if (width \u003e= breakpoints.sm) numColumns = 2;\n\n  return (\n    \u003cFlatList\n      key={`flatlist-column-${numColumns}`}\n      numColumns={numColumns}\n      ...\n    /\u003e\n  );\n};\n```\n\n### useSafeAreaWindow\n\nThe `useSafeAreaWindow` hook provides the device's window dimensions, including `height` and `width`. These values are calculated by subtracting the height of the status bar and the height of the bottom navigation bar, depending on the current orientation of the device.\n\n#### Example\n\n```tsx\nimport React from 'react';\nimport { useSafeAreaWindow } from 'react-native-responsive-scalability';\n\nexport const Home = () =\u003e {\n  const { height, width } = useSafeAreaWindow();\n\n  return \u003c\u003e\u003c/\u003e;\n};\n```\n\n### useScale\n\nThe `useScale` hook returns scale utility functions `scaleByHeight` and `scaleByWidth`. The `scaleByHeight` function is NOT aware of orientation changes; it calculates window height based on the `baseOrientation` value and uses it for calculating scale changes.\n\n#### Example\n\n```ts\nimport React from 'react';\nimport { useScale } from 'react-native-responsive-scalability';\n\nconst size = 16;\n\nexport const Home = () =\u003e {\n  const { scaleByHeight, scaleByWidth } = useScale();\n\n  console.log(`scaleByHeight(${size}) =`, scaleByHeight(size));\n  console.log(`scaleByWidth(${size}) =`, scaleByWidth(size));\n\n  return \u003c\u003e\u003c/\u003e;\n};\n```\n\n- On a iPhone 14 Pro Max device/simulator with default config values.\n\n  `Portrait Mode`\n\n  ```\n  scaleByHeight(16) = 16\n  scaleByWidth(16) = 16\n  ```\n\n  `Landscape Mode`\n\n  ```\n  scaleByHeight(16) = 16\n  scaleByWidth(16) = 17.333333333333332\n  ```\n\n### useStyle\n\nUse `useStyle` hook to memoize inline styles.\n\n#### Example\n\n```tsx\nimport React from 'react';\nimport { StyleSheet, Text as RNText } from 'react-native';\nimport { useScale, useStyle } from 'react-native-responsive-scalability';\n\nexport const Text = () =\u003e {\n  const { scaleByWidth } = useScale();\n\n  return (\n    \u003cRNText\n      style={useStyle(\n        () =\u003e [styles.text, { fontSize: scaleByWidth(16) }],\n        [scaleByWidth],\n      )}\n    \u003e\n      React Native Responsive Scalability\n    \u003c/RNText\u003e\n  );\n};\n\nconst styles = StyleSheet.create({\n  text: { color: 'red' },\n});\n```\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#title\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## Contributing\n\nSee the [contributing guide](https://github.com/chsdwn/react-native-responsive-scalability/blob/main/CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#title\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## License\n\nDistributed under the MIT License. See [`LICENSE`](https://github.com/chsdwn/react-native-responsive-scalability/blob/main/LICENSE) for more information.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#title\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## Acknowledgments\n\n- Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#title\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchsdwn%2Freact-native-responsive-scalability","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchsdwn%2Freact-native-responsive-scalability","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchsdwn%2Freact-native-responsive-scalability/lists"}