mkp-react-native-style-helper

react-native-style-helper

Install

$ npm install mkp-react-native-style-helper --save

Support

android/ios

Quick Start

import {StyleSheet} from "react-native";
import {padding,margin,shadow} from "mkp-react-native-style-helper";
 
const styles=StyleSheet.create({
    style1:{
        ...padding(10),
        ...margin(10)
    },
    style2:{
        ...padding(10,5),
        ...margin(10,5)
    },
    style3:{
        ...padding(1,2,3,4),
        ...margin(1,2,3,4),
        ...shadow()
    }
});

Methods

padding

support three styles

• padding(all:Number)
• padding(topAndBottom:Number,leftAndRight:Number)
• padding(top:Number,right:Number,bottom:Number,left:Number)

margin

support three styles

• margin(all:Number)
• margin(topAndBottom:Number,leftAndRight:Number)
• margin(top:Number,right:Number,bottom:Number,left:Number)

shadow (Only IOS)

shadow(color = "#000000", opacity = 0.2, radius = 1, offset={width:0,height:2})

getResponsiveValue

getResponsiveValue(value:Number,designDensity:Number=2,designScreenWidth:Number=375)

getResponsiveFontSize

getResponsiveFontSize(value:Number,designDensity:Number=2)