{"id":13406624,"url":"https://github.com/diego3g/responsive-native","last_synced_at":"2025-04-04T21:11:44.337Z","repository":{"id":45536813,"uuid":"355707429","full_name":"diego3g/responsive-native","owner":"diego3g","description":"A responsive utility toolkit for React Native 📱⚛","archived":false,"fork":false,"pushed_at":"2023-03-14T17:24:41.000Z","size":541,"stargazers_count":371,"open_issues_count":4,"forks_count":25,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-28T20:11:45.746Z","etag":null,"topics":["react","react-native","responsive"],"latest_commit_sha":null,"homepage":"","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/diego3g.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}},"created_at":"2021-04-07T23:22:03.000Z","updated_at":"2025-03-03T14:09:14.000Z","dependencies_parsed_at":"2024-01-18T23:05:25.965Z","dependency_job_id":"2864d5f2-6d8d-46fb-bb56-3b6848f210ca","html_url":"https://github.com/diego3g/responsive-native","commit_stats":{"total_commits":24,"total_committers":3,"mean_commits":8.0,"dds":"0.45833333333333337","last_synced_commit":"338a1c5d46740e944c61bdfab7bd5f3383b7a767"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diego3g%2Fresponsive-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diego3g%2Fresponsive-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diego3g%2Fresponsive-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diego3g%2Fresponsive-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/diego3g","download_url":"https://codeload.github.com/diego3g/responsive-native/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247249536,"owners_count":20908212,"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":["react","react-native","responsive"],"created_at":"2024-07-30T19:02:35.018Z","updated_at":"2025-04-04T21:11:44.318Z","avatar_url":"https://github.com/diego3g.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cimg src=\".github/assets/header.png\" width=\"100%\"\u003e\n\nResponsive applications are a big challenge for mobile developers.\n\nMost of the mobile devices have different dimensions and densities, so using absolute units like pixels ('px') can cause elements to have different sizes than expected.\n\nAs iPhones, for example, have a higher pixel density than Android phones, if you use `16px` in a Text, it will look much larger on Android than on iOS.\n\nThis library aims to solve this problem by converting this value from `px` to `rem`. The value in rem is calculated with some variables such as device width and height, thus providing a much more proportional interface.\n\nIt also includes an easy way to create Media Queries just like the web environment but based on breakpoints as inside mobile devices we do not need to deal a lot with screen resizing while the app is running.\n\n## Getting started\n\nInstall the library using:\n\n```sh\nyarn add responsive-native react-native-safe-area-context\n```\n\n_The lib `react-native-safe-area-context` must be installed._\n\n## Wrap the application with the provider\n\nYou can import the `ScreenProvider` and wrap the whole App with it then all child components will be able to consume and use the responsive functions.\n\n#### Set the `baseFontSize`\n\nScreenProvider receives a optional `baseFontSize` prop that corresponds to the value of `1rem`. By default `1rem = 16px`, but depending on your UI, you would prefer setting this to a different value to provide an easier way to achieve some values in spacings or sizes.\n\n```js\nimport { ScreenProvider } from 'responsive-native';\nimport { SafeAreaProvider } from 'react-native-safe-area-context';\n\nexport default function App() {\n  return (\n    \u003cSafeAreaProvider\u003e\n      \u003cScreenProvider baseFontSize={16}\u003e\n        { ... }\n      \u003c/ScreenProvider\u003e\n    \u003c/SafeAreaProvider\u003e\n  )\n}\n```\n\n_`ScreenProvider` depends on `SafeAreaProvider`, from [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context), so put `SafeAreaProvider` around `ScreenProvider`._\n\n## Library hooks\n\n### useRem\n\nTransforms a `rem` value to the best pixel value based on the device width, height and accessibility preferences.\n\nThe `useRem` hook receives as first param the value in `rem` that will be converted to pixels. The second optional parameter is `shouldScale` that is a boolean (defaults to `false`) that tells if the fontScale defined by the user device should be used in the conversion (if you're using rem to define font sizes, you might want to use this as `true`).\n\n_You can read a little more about `fontScale` [here](https://reactnative.dev/docs/pixelratio#getfontscale)_\n\n```jsx\nexport function MyComponent() {\n  const rem = useRem();\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cText style={[styles.text, { fontSize: rem(1.5, true) }]}\u003eHello World!\u003c/Text\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\n### useMediaQuery\n\nReturns `true` if the conditions match the device.\n\nThe `useMediaQuery` hook receive as params:\n\n```ts\n{\n  platform: 'ios' | 'android' | 'web' | 'windows' | 'macos';\n  minBreakpoint: 'sm' | 'md' | 'lg' | 'xlg';\n  maxBreakpoint: 'sm' | 'md' | 'lg' | 'xlg';\n}\n```\n\n```jsx\nexport function MyComponent() {\n  const showSideNav = useMediaQuery({\n    minBreakpoint: 'lg',\n  });\n\n  return (\n    \u003cView style={styles.container}\u003e\n      { showSideNav ? \u003cSideNav /\u003e : \u003cDefaultNav /\u003e }\n    \u003c/View\u003e\n  );\n}\n```\n\n### useBreakpointValue\n\nReturns the desired value based on the breakpoint.\n\nYou can pass different values so your interface will adapt devices different sizes. The `useBreakpointValue` hook can return any value, including JSX elements. The `base` value is always required and will be used if the device breakpoint was not matched by the other rules.\n\n```jsx\nexport function MyComponent() {\n  const textByBreakpoint = useBreakpointValue({\n    sm: \"I'm a small device\",\n    md: \"I'm a medium device\",\n    base: \"I will be used in any larger device than md\",\n  });\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cText style={styles.text}\u003e{textByBreakpoint}\u003c/Text\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\n### useScreen\n\nReturns an object with important information about the device screen.\n\n```ts\n{\n  padding: {\n    top: number;\n    bottom: number;\n    left: number;\n    right: number;\n  };\n  breakpoint: {\n    size: 'sm' | 'md' | 'lg' | 'xlg';\n    maxWidth: number;\n  };\n  pixelRatio: number;\n  fontScaleFactor: number;\n  baseFontSize: number;\n}\n```\n\nYou might want use `useScreen` to get information like `padding` so you can use it on Header or TabBar components so it doesn't stay under non-clickable areas.\n\n## Integration\n\n### styled-components\n\nIf you're using `styled-components`, you can integrate this library functionality into your `ThemeProvider`.\n\nCreate a new `ThemeProvider` based on this [example](https://gist.github.com/fhugoduarte/60d3c898ee40944e99af57f53121ec90#file-themeprovider-tsx) and use it instead of the standard styled-components `ThemeProvider`.\n\n#### Typescript\n\nIf you're using **TypeScript**, you'll have to add the responsive-native functions along with your theme typings, just follow the [example](https://gist.github.com/fhugoduarte/60d3c898ee40944e99af57f53121ec90#file-styled-d-ts).\n\n#### Usage\n\n```jsx\nimport styled from 'styled-components/native';\n\nexport const Container = styled.Text`\n  font-size: ${({ theme }) =\u003e theme.screen.rem(12)}px;\n`;\n```\n\n_We know, this is the shortest syntax, so we created an example [VSCode snippet](https://gist.github.com/fhugoduarte/60d3c898ee40944e99af57f53121ec90#file-rem-code-snippets) so you can add it inside VSCode and just type 'rem' and it will autocomplete for you._\n\n## Contributing\n\nThank you for being interested in making this package better. We encourage everyone to help improve this project with new features, bug fixes, or performance improvements. Please take a little bit of your time to read our guide to make this process faster and easier.\n\n### Contribution Guidelines\n\nTo understand how to submit an issue, commit and create pull requests, check our [Contribution Guidelines](/CONTRIBUTING.md).\n\n## License\n\nMIT License © [Diego Fernandes](https://github.com/diego3g)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiego3g%2Fresponsive-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdiego3g%2Fresponsive-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiego3g%2Fresponsive-native/lists"}