{"id":21212443,"url":"https://github.com/lomray-software/react-native-responsive","last_synced_at":"2026-02-12T21:32:28.300Z","repository":{"id":60739819,"uuid":"294375547","full_name":"Lomray-Software/react-native-responsive","owner":"Lomray-Software","description":"Helper functions for adaptive layout on react native.","archived":false,"fork":false,"pushed_at":"2024-02-09T01:12:11.000Z","size":399,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"prod","last_synced_at":"2024-11-18T04:42:33.227Z","etag":null,"topics":["adaptive","calculations","layout","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lomray-Software.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-10T10:18:42.000Z","updated_at":"2024-03-12T09:08:12.000Z","dependencies_parsed_at":"2023-12-21T20:16:12.376Z","dependency_job_id":"132cfc97-1a6d-4b86-ba9d-3f893d3f6d8a","html_url":"https://github.com/Lomray-Software/react-native-responsive","commit_stats":{"total_commits":18,"total_committers":3,"mean_commits":6.0,"dds":0.4444444444444444,"last_synced_commit":"21296d11556c3917b0e4e40eefc121466ee0cff2"},"previous_names":["lomray-software/react-native-responsive","lomray-software/react-native-layout-helper"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lomray-Software%2Freact-native-responsive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lomray-Software%2Freact-native-responsive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lomray-Software%2Freact-native-responsive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lomray-Software%2Freact-native-responsive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lomray-Software","download_url":"https://codeload.github.com/Lomray-Software/react-native-responsive/tar.gz/refs/heads/prod","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225629712,"owners_count":17499295,"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":["adaptive","calculations","layout","react-native"],"created_at":"2024-11-20T21:10:23.695Z","updated_at":"2026-02-12T21:32:28.260Z","avatar_url":"https://github.com/Lomray-Software.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Responsive\n\n![npm](https://img.shields.io/npm/v/@lomray/react-native-responsive)\n![GitHub](https://img.shields.io/github/license/Lomray-Software/react-native-responsive)\n\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=react-native-responsive\u0026metric=alert_status)](https://sonarcloud.io/summary/new_code?id=react-native-responsive)\n[![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=react-native-responsive\u0026metric=reliability_rating)](https://sonarcloud.io/summary/new_code?id=react-native-responsive)\n[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=react-native-responsive\u0026metric=security_rating)](https://sonarcloud.io/summary/new_code?id=react-native-responsive)\n[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=react-native-responsive\u0026metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=react-native-responsive)\n[![Lines of Code](https://sonarcloud.io/api/project_badges/measure?project=react-native-responsive\u0026metric=ncloc)](https://sonarcloud.io/summary/new_code?id=react-native-responsive)\n[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=react-native-responsive\u0026metric=coverage)](https://sonarcloud.io/summary/new_code?id=react-native-responsive)\n\n## Why is this library useful?\nFor the layout to look the same proportions on any device, we can’t just use pixel values for padding and sizes.\n\nThe best way is to convert pixels to screen percentages.\n\nOnly in this case will each element of the design look in the same proportions, regardless of how wide or elongated the device’s screen is.\n\nThere is also a built-in ability to set styles for different orientations conveniently.\n\n## How it works?\nWe most often know the dimensions of the device on which the design was made (for example, in Figma).\n\nTherefore, relative to the maximum height and width of the device, we can calculate what percentage of the width or height should be occupied by a specific layout element.\n\n## Installation\n\nnpm or yarn\n```sh\nnpm install --save @lomray/react-native-responsive\n\nyarn add @lomray/react-native-responsive\n```\n\n## How to use\nInitialize ResponsiveManager with your device parameters by design to get helper functions.\n```typescript\n/**\n * src/services/responsive-manager.ts\n */\nimport { ResponsiveManager } from '@lomray/react-native-responsive';\n\nconst { fs, hp, wp } = new ResponsiveManager({ height: 844, width: 390 });\n\nexport { fs, hp, wp };\n\n```\n\n| Helper | Description                                                            |\n|:-------|:-----------------------------------------------------------------------|\n| wp     | Calculates width value from px to independent pixel (screen percent).  |\n| hp     | Calculates height value from px to independent pixel (screen percent). |\n| fs     | Works as 'wp', but for the fonts size.                                 |\n\n\nEach function has the same parameters:\n`(value: number, disableRatio = false) =\u003e number`.\n\nBy default, DIMENSIONS_RATIO is used to reduce the layout for devices with larger screens.\n\nTherefore, we don't need to do the layout based on breakpoints with these helpers.\nBut we still have the option to disable this for specific layout cases.\n\nMore details can be found in `src/constants:getDimensionsRatio.`\n\n### [Demo project](https://github.com/Lomray-Software/react-native-responsive-example)\n\n### 1. Base example (without orientation changing).\n\n#### 1.1. Create styles.\n\n```typescript\nimport { StyleSheet } from 'react-native';\nimport { fs, hp, wp } from '@services/responsive-manager';\n\nconst styles = StyleSheet.create({\n  section: {\n    paddingHorizontal: wp(24),\n    height: hp(200),\n    margin: hp(5),\n    width: wp(380),\n  },\n  title: {\n    fontSize: fs(24),\n    fontWeight: '600',\n  },\n});\n\nexport default styles;\n```\n\n#### 1.2. Use created styles in the component.\n\n```typescript jsx\nimport React, { FC } from 'react';\nimport { Text, View } from 'react-native';\nimport styles from './styles';\n\ninterface ISection {\n  title: string;\n}\n\nconst Section: FC\u003cISection\u003e = ({ title }) =\u003e (\n  \u003cView style={styles.section}\u003e\n    \u003cText style={styles.title}\u003e{title}\u003c/Text\u003e\n  \u003c/View\u003e\n);\n\nexport default Section;\n\n```\n\n### 2. Advanced example (with orientation changing).\n\n#### 2.1. Use styles as a function to access additional parameters.\n\n```typescript\nimport { TParams } from '@lomray/react-native-responsive';\nimport { StyleSheet } from 'react-native';\nimport { fs, hp, wp } from '@services/responsive-manager';\n\nconst styles = ({ orientation }: TParams) =\u003e StyleSheet.create({\n  section: {\n    paddingHorizontal: wp(24),\n    height: hp(200),\n    margin: hp(5),\n    justifyContent: 'center',\n    borderWidth: 1,\n    ...(orientation === 'portrait'\n      ? {\n        backgroundColor: 'white',\n        borderColor: 'black',\n      }\n      : {\n        backgroundColor: 'black',\n        borderColor: 'white',\n        width: wp(220),\n      }),\n  },\n  title: {\n    fontSize: fs(24),\n    fontWeight: '600',\n    color: orientation === 'portrait' ? 'black' : 'white',\n  },\n  description: {\n    marginTop: hp(8),\n    fontSize: fs(18),\n    fontWeight: '400',\n    color: orientation === 'portrait' ? 'black' : 'white',\n  },\n});\n\nexport default styles;\n\n```\n\n#### 2.2. Use created styles in the component using the useStyles hook.\n\n```typescript jsx\nimport { useStyles } from '@lomray/react-native-responsive';\nimport React, { FC } from 'react';\nimport { Text, View } from 'react-native';\nimport stylesheet from './styles';\n\ninterface ISection {\n  title: string;\n}\n\nconst Section: FC\u003cISection\u003e = ({ title }) =\u003e {\n  const styles = useStyles(stylesheet);\n\n  return (\n    \u003cView style={styles.section}\u003e\n      \u003cText style={styles.title}\u003e{title}\u003c/Text\u003e\n    \u003c/View\u003e\n  );\n};\n\nexport default Section;\n\n```\n\n### 3. Additional features.\n\n#### 3.1. Parameters from the component can be passed to the stylesheet.\nThe parameters will always contain \"orientation\" and also custom props  that you pass by the second argument of the useStyles hook.\n\n```typescript jsx\n/**\n * index.tsx\n */\nimport { useStyles } from '@lomray/react-native-responsive';\nimport React from 'react';\nimport { View } from 'react-native';\nimport stylesheet from './styles';\n\nconst Component = () =\u003e {\n  const styles = useStyles(stylesheet, { isWhite: true });\n\n  return \u003cView style={styles.wrapper} /\u003e;\n};\n\n\nexport default Component;\n\n```\n\n```typescript jsx\n/*\n * styles.ts\n */\nimport { TParams } from '@lomray/react-native-responsive';\nimport { StyleSheet } from 'react-native';\n\ninterface ICustomParams {\n  isWhite: boolean;\n}\n\nconst styles = ({ isWhite }: TParams\u003cICustomParams\u003e) =\u003e StyleSheet.create({\n  wrapper: {\n    color: isWhite ? 'white' : 'black',\n  },\n});\n\nexport default styles;\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flomray-software%2Freact-native-responsive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flomray-software%2Freact-native-responsive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flomray-software%2Freact-native-responsive/lists"}