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)