Wondering what’s next for npm?Check out our public roadmap! »

    react-native-pixel-perfect

    1.0.2 • Public • Published

    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

    yarn add react-native-pixel-perfect

    or with npm

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

    link to npm page

    Usage

    import

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

    or

    import { 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.)

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

    Basic Usage - predefined screen size (pixels)

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

    Basic Usage - predefined screen size (points)

    import { create, PREDEF_RES } from 'react-native-pixel-perfect'
     
    const perfectSize = create(PREDEF_RES.iphoneX.dp)
     
    perfectSize(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:

    PREDEF_RES.key.px

    or

    PREDEF_RES[key].px

    for points:

    PREDEF_RES.key.dp

    or

    PREDEF_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

    Install

    npm i react-native-pixel-perfect

    DownloadsWeekly Downloads

    2,114

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    8.71 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar