Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hoaphantn7604/react-native-utils-toolkit
Toolkit makes the UI more perfect on many screen sizes.
https://github.com/hoaphantn7604/react-native-utils-toolkit
check-small-device check-tablet device-inch font-scale has-notch react-native scale size-matters
Last synced: about 1 month ago
JSON representation
Toolkit makes the UI more perfect on many screen sizes.
- Host: GitHub
- URL: https://github.com/hoaphantn7604/react-native-utils-toolkit
- Owner: hoaphantn7604
- Created: 2021-05-21T04:11:51.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-04-25T09:30:55.000Z (over 2 years ago)
- Last Synced: 2024-11-17T19:44:19.002Z (about 2 months ago)
- Topics: check-small-device, check-tablet, device-inch, font-scale, has-notch, react-native, scale, size-matters
- Language: TypeScript
- Homepage:
- Size: 351 KB
- Stars: 14
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-utils-toolkit
Provide solutions to make your app flexible for different screen sizes, different devices.
When developing with react-native, you need to manually adjust your app to look great on a variety of different screen sizes.
This package provides some simple tooling to make your scaling a whole lot easier.
## Getting started
```js
yarn add react-native-utils-toolkit
```
or
```js
npm i react-native-utils-toolkit
```
### RN Version < 0.60
```js
react-native link react-native-utils-toolkit
```
### Run IOS
```js
cd ios && pod install
react-native run-ios
```
### Run Android
```js
react-native run-android
```
### Jest setup
```js
jest.mock('react-native-utils-toolkit', () => {
const UtilsToolkit = require('react-native-utils-toolkit/mock');
return UtilsToolkit;
});
```
### Documents
| API | Type | Description |
| ------------------ | -------------------- | ----------------------------------------------------------------------- |
| scale | Function | Will return a linear scaled result of the provided size |
| fontScale | Function | Will return a linear scaled result of the font size provided |
| deviceInch | Number | Inch of device |
| hasNotch | Boolean | Tells if the device has a notch |
| isAndroid | Boolean | Tells if the device is Android operating system |
| isIOS | Boolean | Tells if the device is IOS operating system |
| isSmallDevice | Boolean | Tells the device has a screen size smaller than 4.8 inches |
| isTablet | Boolean | Tells if the device is a tablet |
| width | Number | Screen width |
| height | Number | Screen height |
|useDeviceOrientation| Hooks API | Device orientation detection |
| useBackHandler | Hooks API | Detects hardware button presses for back navigation |
| useAppState | Hooks API | Can tell you if the app is in the foreground or background, and notify you when the state changes |
#### Source code demo
[react-native-template-components](https://github.com/hoaphantn7604/react-native-template-components) A beautiful template for React Native.
### Demo
## Usage
```js
import React from 'react';
import {SafeAreaView, ScrollView, StyleSheet, Text, View} from 'react-native';
import {useBackHandler, useAppState, useDetectDevice, useScale, useDeviceOrientation} from 'react-native-utils-toolkit';
const {scale, fontScale} = useScale;
const {
deviceInch,
hasNotch,
height,
width,
isAndroid,
isIOS,
isSmallDevice,
isTablet,
} = useDetectDevice;
const App = () => {
const deviceOrientation = useDeviceOrientation();
console.log('deviceOrientation', deviceOrientation); // PORTRAIT or LANDSCAPE
useBackHandler(() => {
console.log('On goback');
}, []);
useAppState(state => {
console.log('App State', state);
}, []);
return (
Device width: {width}
Device height: {height}
Device inch: {deviceInch}
isAndroid: {isAndroid.toString()}
isIOS: {isIOS.toString()}
hasNotch: {hasNotch.toString()}
isTablet: {isTablet.toString()}
isSmallDevice: {isSmallDevice.toString()}
150x150
Scale: {scale(150)}x{scale(150)}
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
fontScale: {
fontSize: fontScale(16),
},
box: {
width: scale(150),
height: scale(150),
backgroundColor: 'black',
alignItems: 'center',
justifyContent: 'center',
margin: scale(16),
},
color: {
color: 'white',
},
});
export default App;
```