Skip to content

A function for making React Native apps resolution independent.

Notifications You must be signed in to change notification settings

alphabeats-works/react-native-responsive

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 

Repository files navigation

  • Conversion of units - pixels, percentages, dp, inch, mm

Installation & Usage

npm install react-native-responsive

Include all the Components

import React from 'react'
import { units, Size } from 'rn-responsive-units'

Get the desired units by one of the 2 conversion methods:

  1. Make objects of type Size and get it's DP value
w = (new Size(50, units.DP)).getSize();
h = (new Size(40, units.INCH)).getSize()
<View style = {{
    width: w,
    height: h,
}}
  1. Use the static methods of Size to get the DP value.
w = Size.mmToDP(50);
h = Size.heightPercToDP(20);
<View style = {{
    width: w,
    height: h,
}}

Possible units and their respective methods

units.PIXELS, pixelsToDP(size);
units.WPERC, widthPercToDP(size);
units.HPERC, heightPercToDP(size);
units.INCH, inchToDP(size);
units.MM, mmToDP(size);
units.DP, //can be ommitted since it's the base unit

Some documentation

React uses density-indipendent pixels (DP, pronouncend "dips") as main units. DP is a unit which is created to consistenly display elements on screens with various pixel densities. This package can convert one to another

About

A function for making React Native apps resolution independent.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published