react-native-styled-px2dp 🎩

Write CSS px in react-native using styled-components and adapt multi resolution screens automatically.

How to use

1. install

yarn add react-native-styled-px2dp

or

npm i react-native-styled-px2dp --save

note: react-native and styled-components are required peer dependencies.

2. configure your styled

Setup a styled according to your visual design.

Say we have an iphone6 visual design which is 750x1334, then:

// my-styled.js
import getFlexibleStyled from 'react-native-styled-px2dp';

export const { styled } = getFlexibleStyled({
  designWidth: 750
})

3. use your configured styled

Now you can write css px values exactly what your visual design tells you ;)

The library will translate px into dp according to the design width of your visual design.

import { styled } from 'path-to-your/my-styled'
export const Logo = styled.Image`
  position: absolute;
  width: 413px;
  height: 175px;
  top: 50px;
  left: 50px;
  margin-left: -206px;
`

Further Usage

Get px2dp caculator in javascript

Sometimes you might want to caculate style programmatically, you can get the caculator directly from getFlexibleStyled

export const { styled, px2dp} = getFlexibleStyled({
  designWidth: 750
})

and then you can use it in your code like:

<View style={{width: parseInt(px2dp(1368))}}></View>

Deal with orientation

In some complex applications, you might need to deal with device orientation and re-render your application in a width-height-switched resolution, but don't worry, react-native-styled-px2dp will cover your back.

First, you need to specify both width and height of your visual design, and the original orientation.

export const {styled, updateOrientation} = getFlexibleStyled({
  designWidth: 1920,
  designHeight: 1080,
  orientation: 'landscape' // 'landscape' or 'portrait'
})

Second, call updateOrientation when the orientation changes, the library will change its inside logic for the changed orientation (like switch the value of designWidth and designHeight).

() => { // some orientation change callback
  updateOrientation('portrait')  // 'landscape' or 'portrait'
}

**Note: ** You should always call updateOrientation before you render components in your target orientation. In some cases you might need to add some delay before render using setTimeout.

links:

• Expo - ScreenOrientation
• react-native-orientation

How it works?

to be continued.

Inspirations

inspired by:

• amfe/lib-flexible
• styled-px2vw