{"id":21768268,"url":"https://github.com/hoaphantn7604/react-native-utils-toolkit","last_synced_at":"2025-08-13T22:04:08.988Z","repository":{"id":57341184,"uuid":"369410368","full_name":"hoaphantn7604/react-native-utils-toolkit","owner":"hoaphantn7604","description":"Toolkit makes the UI more perfect on many screen sizes.","archived":false,"fork":false,"pushed_at":"2022-04-25T09:30:55.000Z","size":359,"stargazers_count":14,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-06T20:03:50.861Z","etag":null,"topics":["check-small-device","check-tablet","device-inch","font-scale","has-notch","react-native","scale","size-matters"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hoaphantn7604.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-21T04:11:51.000Z","updated_at":"2023-07-29T04:40:07.000Z","dependencies_parsed_at":"2022-09-11T15:02:55.045Z","dependency_job_id":null,"html_url":"https://github.com/hoaphantn7604/react-native-utils-toolkit","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/hoaphantn7604/react-native-utils-toolkit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoaphantn7604%2Freact-native-utils-toolkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoaphantn7604%2Freact-native-utils-toolkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoaphantn7604%2Freact-native-utils-toolkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoaphantn7604%2Freact-native-utils-toolkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hoaphantn7604","download_url":"https://codeload.github.com/hoaphantn7604/react-native-utils-toolkit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoaphantn7604%2Freact-native-utils-toolkit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270323579,"owners_count":24564684,"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","status":"online","status_checked_at":"2025-08-13T02:00:09.904Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["check-small-device","check-tablet","device-inch","font-scale","has-notch","react-native","scale","size-matters"],"created_at":"2024-11-26T13:35:10.562Z","updated_at":"2025-08-13T22:04:08.928Z","avatar_url":"https://github.com/hoaphantn7604.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-utils-toolkit\nProvide solutions to make your app flexible for different screen sizes, different devices.\nWhen developing with react-native, you need to manually adjust your app to look great on a variety of different screen sizes.\nThis package provides some simple tooling to make your scaling a whole lot easier.\n\n## Getting started\n```js\n    yarn add react-native-utils-toolkit\n```\nor\n```js\n    npm i react-native-utils-toolkit\n```\n\n### RN Version \u003c 0.60\n```js\n    react-native link react-native-utils-toolkit\n```\n\n### Run IOS\n```js\n    cd ios \u0026\u0026 pod install\n    react-native run-ios\n```\n\n### Run Android\n```js\n    react-native run-android\n```\n\n### Jest setup\n```js\n    jest.mock('react-native-utils-toolkit', () =\u003e {\n        const UtilsToolkit = require('react-native-utils-toolkit/mock');\n        return UtilsToolkit;\n    });\n```\n### Documents\n| API                | Type                 | Description                                                             | \n| ------------------ | -------------------- | ----------------------------------------------------------------------- |\n| scale              | Function             | Will return a linear scaled result of the provided size                 |\n| fontScale          | Function             | Will return a linear scaled result of the font size provided            |\n| deviceInch         | Number               | Inch of device                                                          |\n| hasNotch           | Boolean              | Tells if the device has a notch                                         |\n| isAndroid          | Boolean              | Tells if the device is Android operating system                         |\n| isIOS              | Boolean              | Tells if the device is IOS operating system                             |\n| isSmallDevice      | Boolean              | Tells the device has a screen size smaller than 4.8 inches              |\n| isTablet           | Boolean              | Tells if the device is a tablet                                         |\n| width              | Number               | Screen width                                                            |\n| height             | Number               | Screen height                                                           |\n|useDeviceOrientation| Hooks API            | Device orientation detection                                            |\n| useBackHandler     | Hooks API            | Detects hardware button presses for back navigation                     |\n| useAppState        | Hooks API            | Can tell you if the app is in the foreground or background, and notify you when the state changes |\n\n#### Source code demo\n[react-native-template-components](https://github.com/hoaphantn7604/react-native-template-components) A beautiful template for React Native.\n\n### Demo\n\n![](https://github.com/hoaphantn7604/file-upload/blob/master/document/scale/demo.png)\n\n## Usage\n```js\n    import React from 'react';\n    import {SafeAreaView, ScrollView, StyleSheet, Text, View} from 'react-native';\n    import {useBackHandler, useAppState, useDetectDevice, useScale, useDeviceOrientation} from 'react-native-utils-toolkit';\n    \n    const {scale, fontScale} = useScale;\n    const {\n        deviceInch,\n        hasNotch,\n        height,\n        width,\n        isAndroid,\n        isIOS,\n        isSmallDevice,\n        isTablet,\n    } = useDetectDevice;\n\n    const App = () =\u003e {\n        const deviceOrientation = useDeviceOrientation();\n        console.log('deviceOrientation', deviceOrientation); // PORTRAIT or LANDSCAPE\n\n        useBackHandler(() =\u003e {\n            console.log('On goback');\n        }, []);\n\n        useAppState(state =\u003e {\n            console.log('App State', state);\n        }, []);\n        \n        return (\n            \u003cScrollView\u003e\n                \u003cSafeAreaView style={styles.container}\u003e\n                    \u003cText style={styles.fontScale}\u003eDevice width: {width}\u003c/Text\u003e\n                    \u003cText style={styles.fontScale}\u003eDevice height: {height}\u003c/Text\u003e\n                    \u003cText style={styles.fontScale}\u003eDevice inch: {deviceInch}\u003c/Text\u003e\n                    \u003cText style={styles.fontScale}\u003eisAndroid: {isAndroid.toString()}\u003c/Text\u003e\n                    \u003cText style={styles.fontScale}\u003eisIOS: {isIOS.toString()}\u003c/Text\u003e\n                    \u003cText style={styles.fontScale}\u003ehasNotch: {hasNotch.toString()}\u003c/Text\u003e\n                    \u003cText style={styles.fontScale}\u003eisTablet: {isTablet.toString()}\u003c/Text\u003e\n                    \u003cText style={styles.fontScale}\u003eisSmallDevice: {isSmallDevice.toString()}\u003c/Text\u003e\n                    \u003cView style={styles.box}\u003e\n                        \u003cText style={[styles.color, {fontSize: fontScale(14)}]}\u003e150x150\u003c/Text\u003e\n                        \u003cText style={[styles.color, {fontSize: fontScale(14)}]}\u003e\n                            Scale: {scale(150)}x{scale(150)}\n                        \u003c/Text\u003e\n                    \u003c/View\u003e\n                \u003c/SafeAreaView\u003e\n            \u003c/ScrollView\u003e\n        );\n    };\n\n    const styles = StyleSheet.create({\n        container: {\n            flex: 1,\n            alignItems: 'center',\n            justifyContent: 'center',\n        },\n        fontScale: {\n            fontSize: fontScale(16),\n        },\n        box: {\n            width: scale(150),\n            height: scale(150),\n            backgroundColor: 'black',\n            alignItems: 'center',\n            justifyContent: 'center',\n            margin: scale(16),\n        },\n        color: {\n            color: 'white',\n        },\n    });\n\n    export default App;\n\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoaphantn7604%2Freact-native-utils-toolkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoaphantn7604%2Freact-native-utils-toolkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoaphantn7604%2Freact-native-utils-toolkit/lists"}