react-native-pixel-perfect

helps you create pixel perfect apps by design, no matter the screen

About

This module was created for developers who create react-native apps from design and wants to keep their app pixel perfect across all devices, quickly and easily.

All you require to use this module is a design for an app, using one type of size units, for example pixels.

Then you need to measure the screen size in the design and use the create function to genrate a function to compute the correct size for the current device, see more info below.

This method is in use in production in more than a few apps both for android and for ios, works perfectly both for layout and font sizes, as long as the font sizes in the design uses the same type of size unit.

NOW ALL YOU NEED TO DO IS TO PLUG THE MESAUREMENTS YOU TAKE FROM YOUR DESIGN inside the perfectSize function and your app will look great on ALL DEVICES

The module comes with predefined resolutions for Apple devices, see more info below.

Installation

1yarn add react-native-pixel-perfect

or with npm

1npm install react-native-pixel-perfect --save

link to npm page

Usage

import

1import { create } from 'react-native-pixel-perfect'

or

1import { create, PREDEF_RES } from 'react-native-pixel-perfect'

in case you want to use one of the presets screen resolutions, see table down below

Basic Usage - custom screen size

Important: you can enter what kind of size you want and always use the same unit type. (for example: px,dp,dpi,etc.)

1const designResolution = {
2    width: 1125,
3    height: 2436
4} //this size is the size that your design is made for (screen size)
5const perfectSize = create(designResolution)
6
7perfectSize(50)// returns the actual size needed to make 50 fit the screen perfectly according to original design

Basic Usage - predefined screen size (pixels)

1import { create, PREDEF_RES } from 'react-native-pixel-perfect'
2
3const perfectSize = create(PREDEF_RES.iphoneX.px)
4
5perfectSize(50)// returns the actual size needed to make 50 fit the screen perfectly according to original design

Basic Usage - predefined screen size (points)

1import { create, PREDEF_RES } from 'react-native-pixel-perfect'
2
3const perfectSize = create(PREDEF_RES.iphoneX.dp)
4
5perfectSize(50)// returns the actual size needed to make 50 fit the screen perfectly according to original design

Availble Predefined Resolutions

Device	Key	pixels	points
iPhone X	iphoneX	1125 x 2436	375 x 812
iPhone 8 Plus	iphone8P	1080 x 1920	414 x 736
iPhone 8	iphone8	750 x 1334	375 x 667
iPhone 7 Plus	iphone7P	1080 x 1920	414 x 736
iPhone 6s Plus	iphone6sP	1080 x 1920	375 x 667
iPhone 6 Plus	iphone6P	1080 x 1920	375 x 667
iPhone 7	iphone7	750 x 1334	375 x 667
iPhone 6s	iphone6s	750 x 1334	375 x 667
iPhone 6	iphone6	750 x 1334	375 x 667
iPhone SE	iphoneSE	640 x 1136	320 x 568

How to access predefined resolution

All you need to do is look at the table above and then use the imported BASE_RES object like so:

for pixels:

1PREDEF_RES.key.px

or

1PREDEF_RES[key].px

for points:

1PREDEF_RES.key.dp

or

1PREDEF_RES[key].dp

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

License

This project is licensed under the MIT License