{"id":17700899,"url":"https://github.com/wrathchaos/react-native-helpers","last_synced_at":"2025-04-04T14:06:06.772Z","repository":{"id":37819451,"uuid":"186130432","full_name":"WrathChaos/react-native-helpers","owner":"WrathChaos","description":"All helpers in one; iPhone series support, dimensions helper, hasNotch helper, normalize text helper and text helpers for React Native with very easy useEasy to use \u0026 awesome helpers for React Native.","archived":false,"fork":false,"pushed_at":"2025-03-24T16:03:32.000Z","size":8729,"stargazers_count":88,"open_issues_count":9,"forks_count":6,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-28T13:08:13.948Z","etag":null,"topics":["android","device","deviceinfo","expo","freakycoder","height","helper","helpers","ios","iphonex","notch","react","react-native","react-native-helpers","width"],"latest_commit_sha":null,"homepage":"https://www.freakycoder.com","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/WrathChaos.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2019-05-11T12:30:39.000Z","updated_at":"2025-03-24T09:18:22.000Z","dependencies_parsed_at":"2023-02-19T08:31:22.590Z","dependency_job_id":"fb370012-5bb8-4d68-9b20-df5712da23e3","html_url":"https://github.com/WrathChaos/react-native-helpers","commit_stats":{"total_commits":326,"total_committers":4,"mean_commits":81.5,"dds":0.1595092024539877,"last_synced_commit":"66d7c3ae597043e27263b3f3493396e666fde19a"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-helpers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-helpers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-helpers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-helpers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WrathChaos","download_url":"https://codeload.github.com/WrathChaos/react-native-helpers/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247190249,"owners_count":20898702,"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":["android","device","deviceinfo","expo","freakycoder","height","helper","helpers","ios","iphonex","notch","react","react-native","react-native-helpers","width"],"created_at":"2024-10-24T17:43:37.046Z","updated_at":"2025-04-04T14:06:06.741Z","avatar_url":"https://github.com/WrathChaos.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg alt=\"React Native Helpers\" src=\"assets/logo.png\" width=\"1050\"/\u003e\n\n[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-helpers)\n\n\u003cb\u003e\u003ci\u003eAll helpers in one; iPhone series support, dimensions helper, hasNotch helper, normalize text helper and text helpers for React Native with very easy use\u003c/i\u003e\u003c/b\u003e\n\n[![npm version](https://img.shields.io/npm/v/@freakycoder/react-native-helpers.svg?style=for-the-badge)](https://www.npmjs.com/package/@freakycoder/react-native-helpers)\n[![npm](https://img.shields.io/npm/dt/@freakycoder/react-native-helpers.svg?style=for-the-badge)](https://www.npmjs.com/package/@freakycoder/react-native-helpers)\n![expo-compatible](https://img.shields.io/badge/Expo-compatible-9cf.svg?style=for-the-badge)\n![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)\n\n\u003cp align=\"center\"\u003e\n\u003cimg alt=\"React Native Helpers\" src=\"https://github.com/WrathChaos/react-native-helpers/blob/master/assets/Screenshots/example.png\" width=\"49.7%\" /\u003e\n\u003c/p\u003e\n\n## Installation\n\nAdd the dependency:\n\n### React Native\n\n```bash\nnpm i @freakycoder/react-native-helpers\n```\n\n## DeviceInfo Usage\n\n```tsx\nimport {\n  Screen,\n  ScreenWidth,\n  ScreenHeight,\n  isIOS,\n  isAndroid,\n  isTablet\n} from \"@freakycoder/react-native-helpers\";\n\n\u003cView\u003e\n  \u003cContainer title=\"Device OS\" subtitle={isIOS ? \"iOS\" : \"Android\"} /\u003e\n  \u003cContainer title=\"Screen Height\" subtitle={ScreenHeight} /\u003e\n  \u003cContainer title=\"Screen Width\" subtitle={ScreenWidth} /\u003e\n  \u003cContainer title=\"Tablet?: \" subtitle={isTablet ? \"Tablet\" : \"Phone\"} /\u003e\n\u003c/View\u003e;\n```\n\n## Notch \u0026 DynamicIsland Usage\n\n```ts\nimport {\n  getStatusBarHeight,\n  hasNotch,\n  hasNotchOnly,\n  hasDynamicIsland,\n  getStatusBarHeight,\n} from \"@freakycoder/react-native-helpers\";\n\n\u003cView\u003e\n  \u003cContainer\n    title=\"hasNotch?\"\n    subtitle={hasNotch() ? \"Has Notch\" : \"NOT notch\"}\n  /\u003e\n  \u003cContainer\n    title=\"hasDynamicIsland?\"\n    subtitle={\n      hasDynamicIsland(Screen) ? \"Has Dynamic Island\" : \"NOT Dynamic Island\"\n    }\n  /\u003e\n  \u003cContainer title=\"getStatusBarHeight?\" subtitle={getStatusBarHeight()} /\u003e\n\u003c/View\u003e;\n```\n\n## Open Applications or Stores by Linking\n\n```ts\nimport { openAppInPlayStore, openAppInAppStore, openExternalApp } from \"@freakycoder/react-native-helpers\";\n\nopenAppInPlayStore('com.example.android');\nopenAppInAppStore('123456789');\nopenExternalApp('com.example.android', '123456789');\n```\n\n## Normalize Text Usage\n\nMethod to normalize size of fonts across devices\n\n```ts\nimport { normalizeText } from \"@freakycoder/react-native-helpers\";\n\nfontSize: normalizeText(24),\n```\n\n## Native Number Format Usage\n\nMethod to format the number of your texted number. You can change each options.\n\n```ts\nimport { numberFormat } from \"@freakycoder/react-native-helpers\";\n\n\u003cText\u003e{numberFormat(50319341)\u003c/Text\u003e // Output: 50.319.341\n\u003cText\u003e\n  {numberFormat(1093495, \"en\", {\n    style: \"currency\",\n    currency: \"GBP\"\n  })}\n\u003c/Text\u003e// Output: £ 50.319.341\n```\n\n# Configuration - Props\n\n## DeviceInfo Props\n\n| Property          |  Type   | Description                                                                                                                |\n|-------------------|:-------:|----------------------------------------------------------------------------------------------------------------------------|\n| isIOS             | boolean | returns if it is an iOS device or not                                                                                      |\n| isAndroid         | boolean | returns if it is an Android device or not                                                                                  |\n| isTablet          | boolean | returns if it is a tablet or phone                                                                                         |\n| ScreenWidth       | number  | get the device's screen width                                                                                              |\n| ScreenHeight      | number  | get the device's screen height                                                                                             |\n| ScreenScale       | number  | get the device's screen scale ratio                                                                                        |\n| ScreenFontScale   | number  | get the device's screen font scale ratio (depends on the user's device font scale setting)                                 |\n| WindowWidth       | number  | get the device's window width                                                                                              |\n| WindowHeight      | number  | get the device's window height                                                                                             |\n| WindowScale       | number  | get the device's window scale ratio                                                                                        |\n| WindowFontScale   | number  | get the device's window font scale ratio (depends on the user's device font scale setting)                                 |\n| PlatformVersion   | number  | returns the platform version                                                                                               |\n| ScreenMin         | number  | get the device's screen width/height which are **minimum** depend on the landscape or portrait mode                        |\n| ScreenMax         | number  | get the device's screen width/height which are **maximum** depend on the landscape or portrait mode                        |\n| vh                | number  | get the device's height but as a **viewport unit**                                                                         |\n| vw                | number  | get the device's width but as a **viewport unit**                                                                          |\n| vmin              | number  | get the device's screen width/height as a **viewport unit** which are **minimum** depend on the landscape or portrait mode |\n| vmax              | number  | get the device's screen width/height as a **viewport unit** which are **maximum** depend on the landscape or portrait mode |\n| getDeviceLanguage | string  | get the device's language (en_US)                                                                                          |\n\n## DeviceInfo Props\n\ngetStatusBarHeight, hasNotch, hasNotchOnly, hasDynamicIsland\n\n| Property           |   Type   | Description                                                                               |\n|--------------------|:--------:|-------------------------------------------------------------------------------------------|\n| hasNotch           | function | returns if the device has notch (returns true for dynamic island!)                        |\n| hasNotchOnly       | function | returns if the device has notch only, it does not detect if the device has dynamic island |\n| hasDynamicIsland   | function | returns if the device has dynamic island                                                  |\n| getStatusBarHeight |  number  | returns status bar height of the device                                                   |\n\n## Utils Props\n\n| Property           |                 Type                 | Description                                            |\n|--------------------|:------------------------------------:|--------------------------------------------------------|\n| openAppInPlayStore |       function(appPackageName)       | opens the app on android or Google Play                |\n| openAppInAppStore  |         function(appStoreId)         | opens the app on ios or App Store                      |\n| openExternalApp    | function(appPackageName, appStoreId) | opens the app on ios or android - handles the platform |\n\n\n## Normalize Text Props\n\n| Property  |       Type       | Description                      |\n|-----------|:----------------:|----------------------------------|\n| normalize | function(number) | returns the normalized font size |\n\n## Custom Text Props\n\n| Property     |               Type               | Description                                                 |\n|--------------|:--------------------------------:|-------------------------------------------------------------|\n| numberFormat | function(value, locale, options) | returns the number formatted font with its given parameters |\n\n### Roadmap\n\n- [x] ~~LICENSE~~\n- [x] ~~Typescript~~\n- [x] ~~iPhone Series Support~~\n- [x] ~~Dynamic Island~~\n- [ ] Separate the style helpers from device\n- [ ] More custom text helpers\n- [ ] Write an article about the lib on Medium\n\n## Author\n\nFreakyCoder, kurayogun@gmail.com\n\n## License\n\nReact Native Helpers Library is available under the MIT license. See the LICENSE file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrathchaos%2Freact-native-helpers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwrathchaos%2Freact-native-helpers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrathchaos%2Freact-native-helpers/lists"}