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
npm install react-native-size-scaling
or
yarn add react-native-size-scaling
Jest setup
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.
import { scale } from 'react-native-size-scaling';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello word {scale(30)}</Text>
</View>
);
}
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.
import * as React from 'react';
import { View, Text } from 'react-native';
import { StyleSheet } from 'react-native-size-scaling';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello word</Text>
<View style={styles.box}>
<Text style={styles.text}>Device: IPhone 13</Text>
<Text style={styles.text}>Before: 300x300</Text>
</View>
</View>
);
}
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. Buy me a coffee and you can request quick processing of issues.
0 Jun 14, 2022
136 Dec 30, 2022
12 Dec 30, 2022
8 Nov 21, 2022
3 Mar 2, 2022
200.2k Jan 8, 2023
13.1k Dec 31, 2022
11.1k Dec 28, 2022
2.1k Jan 2, 2023
5 Mar 11, 2022