Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hoaphantn7604/react-native-size-scaling
Provide solutions to make your app flexible for different screen sizes, different devices.
https://github.com/hoaphantn7604/react-native-size-scaling
react-native scale scaling size
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-size-scaling
- Owner: hoaphantn7604
- License: mit
- Created: 2022-08-11T03:37:37.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-11-07T02:43:44.000Z (over 2 years ago)
- Last Synced: 2024-11-03T02:05:59.078Z (3 months ago)
- Topics: react-native, scale, scaling, size
- Language: JavaScript
- Homepage:
- Size: 566 KB
- Stars: 38
- Watchers: 4
- Forks: 12
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-size-scaling
Provide solutions to make your app flexible for different screen sizes, different devices, based on your device's pixel ratio. 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.
## Installation
```sh
npm install react-native-size-scaling
```
or
```sh
yarn add react-native-size-scaling
```
### Jest setup
```js
jest.mock('react-native-size-scaling', () => {
const sizeScaling = require('react-native-size-scaling/mock');
return sizeScaling;
});
```
### Demo
Before
After
### Documents
| API | Type | Description |
| ------------------ | -------------------- | ----------------------------------------------------------------------- |
| StyleSheet | StyleSheet | Will take the same stylesObject a regular StyleSheet will take, plus a special (optional) annotation that will automatically apply the scale functions for you |
| scale | Function | Will return a linear scaled result of the provided size |
| isAndroid | Boolean | Tells if the device is Android operating system |
| isIOS | Boolean | Tells if the device is IOS operating system |
| isTablet | Boolean | Tells if the device is a tablet |
| width | Number | Screen width |
| height | Number | Screen height |
### API
### scale(size: number)
Will return a linear scaled result of the provided size, based on your device's pixel ratio.
```js
import { scale } from 'react-native-size-scaling';
export default function App() {
return (
Hello word {scale(30)}
);
}
```
### StyleSheet
Will take the same stylesObject a regular StyleSheet will take, plus a special (optional) annotation that will automatically apply the scale functions for you.
```js
import * as React from 'react';
import { View, Text } from 'react-native';
import { StyleSheet } from 'react-native-size-scaling';
export default function App() {
return (
Hello word
Device: IPhone 13
Before: 300x300
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 22,
},
box: {
width: 300,
height: 300,
marginVertical: 20,
backgroundColor: 'gray',
justifyContent: 'center',
alignItems: 'center',
},
});
```
## Donate
Support maintainers with a donation and help them continue with activities.
