This is actually the standard code I use for the Intermediary app. Over time, almost all of my react-native projects use this code. So I think that making this package, will make it easier for me in the future.
P.S: I just made my first react-native package, please help to fix if anything wrong✌😁
| Function | Description |
|---|---|
| sizer(size, type) | size: number type: width or height |
import RNSizer from 'react-native-sizer';
// Iphone X default dimension
const rns = new RNSizer();
console.log(`Height: ${rns.sizer(100, 'height')}`);
console.log(`Width: ${rns.sizer(50, 'width')}`);
height: 896px and width: 414px
So you can write like this:
import RNSizer from 'react-native-sizer';
const rns = new RNSizer(896, 414);If you want to make a button like this:
You can write the full code like this:
import {View} from 'react-native';
import RNSizer from 'react-native-sizer';
const App = () => {
const rns = new RNSizer(896, 414);
return (
<View style={{ height: rns.sizer(63), width: rns.sizer(374, 'w') }} />
);
};Credit: Meditation App Design
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent