Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hoaphantn7604/react-native-utils-scale
Provide solutions to make your app flexible for different screen sizes, different devices.
https://github.com/hoaphantn7604/react-native-utils-scale
check-tablet device-inch font-scaling has-notch react-native scaling size-matters
Last synced: 3 months ago
JSON representation
Provide solutions to make your app flexible for different screen sizes, different devices.
- Host: GitHub
- URL: https://github.com/hoaphantn7604/react-native-utils-scale
- Owner: hoaphantn7604
- License: mit
- Created: 2020-11-06T04:35:57.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-07-12T06:53:48.000Z (over 2 years ago)
- Last Synced: 2024-11-20T10:00:11.655Z (3 months ago)
- Topics: check-tablet, device-inch, font-scaling, has-notch, react-native, scaling, size-matters
- Language: Java
- Homepage:
- Size: 3.79 MB
- Stars: 46
- Watchers: 2
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
## react-native-utils-scale
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-scale
```
or
```js
npm i react-native-utils-scale
```
### RN Version < 0.60
```js
react-native link react-native-utils-scale
```
### 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-scale', () => {
const UtilsScale = require('react-native-utils-scale/mock');
return UtilsScale;
});
```
### 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 |
#### Source code demo
[react-native-template-components](https://github.com/hoaphantn7604/react-native-template-components) A beautiful template for React Native.
### Demo
### Usage
```javascript
import React from 'react';
import {SafeAreaView, ScrollView, StyleSheet, Text, View} from 'react-native';
import {
fontScale,
scale,
deviceInch,
hasNotch,
isAndroid,
isIOS,
isSmallDevice,
isTablet,
width,
height,
} from 'react-native-utils-scale';
const App = () => {
return (
Device width: {width}
Device height: {height}
Device inch: {deviceInch}
isAndroid: {isAndroid.toString()}
isIOS: {isIOS.toString()}
isTablet: {isTablet.toString()}
hasNotch: {hasNotch.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: 150,
height: 150,
backgroundColor: 'black',
alignItems: 'center',
justifyContent: 'center',
margin: 16,
},
scale: {
width: scale(150),
height: scale(150),
},
color: {
color: 'white',
},
});
export default App;
```