extension stylesheet for cross platforms and responsive
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
.editorconfig
.gitignore
.npmignore
CHANGELOG.md
LICENSE
README.md
index.js
package.json

README.md

react-native-stylesheet-xg

extension stylesheet for cross platforms and responsive

Example

Check index.js in the Example folder.

origin

{
  test1: {
    width: 0,
    height: 1,
    borderWidth: 100,
    $borderRadius: 100,
  },
  test: {
    width: 100,
    color: 'red',
    android: {
      width: 0,
      height: 1,
      width: 200,
      color: 'blue'
    },
    ios: {
      width: 300,
      color: 'green'
    }
  }
}

android (width: 360, base: 320)

{
  test1: {
    width: 0,
    height: 1,
    borderWidth: 113,
    $borderRadius: 100,
  },
  test: {
    width: 225,
    color: 'blue',
    height: 1
  }
}

ios (width: 320, base: 320)

{
  test1: {
    width: 0,
    height: 1,
    borderWidth: 100,
    $borderRadius: 100,
  },
  test: {
    width: 300,
    color: 'green'
  }
}

Usage

npm install react-native-stylesheet-xg --save
import StyleSheet from 'react-native-stylesheet-xg';

// before use, you may need set the base width with StyleSheet.setBase(width:number), which default to 320
StyleSheet.setBase(360); // this is optional, if your target screen is 320

// use react-native-stylesheet-xg replace react-native StyleSheet Module
StyleSheet.create({
  test: {
    width: 100
  }
});

// or you can use StyleSheet.r(num:number) to get the target responsive num
StyleSheet.r(100); // 113 (width: 360, base: 320)
Method Params Description
setBase width:number set the target width according to the UI
setMinWidth width:number set the responsive minWidth. If the device width is less than minWidth, will use minWidth as the device width!
setMaxWidth width:number set the responsive maxWidth. If the device width is greater than minWidth, will use maxWidth as the device width!
create style:object replace native StyleSheet creating stylesheet
r num:number the inner function to get the responsive size according to the device with and base
switchR isRon:boolean set the flag to switch the responsive size function, which return the prev value