react-native-style-block
react-native-component
Simple and fast
To use function to describe react native style
Usage
example
<View style=stylesview> <Image style=stylesimage source= /> <Text style=stylesusername>username</Text> <Text style=stylesdescription>description</Text></View>
const sb = ; const styles = view: sbsize'100%' 'auto' alignItems: 'center' sb sbbgColor'#ffffff' sbborder'Bottom' 1 '#eeeeee' sb image: sb sbsize60 60 username: sb sb description: sb sbcolor'#999999'
API
sb.layout(alignItems = 'flex-start', justifyContent = 'flex-start')
{ alignItems, justifyContent, }
sb.center()
{ alignItems: 'center', justifyContent: 'center', }
sb.alignCenter()
{ alignItems: 'center' }
sb.contentCenter()
{ justifyContent: 'center' }
sb.size(width, height)
{ width, height, }
sb.margin(top, right, bottom, left)
sb.margin()
=> { marginTop: 0, marginRight: 0, marginBottom: 0, marginLeft: 0, }
sb.margin(top)
=> { marginTop: top, marginRight: top, marginBottom: top, marginLeft: top, }
sb.margin(top, right)
=> { marginTop: top, marginRight: right, marginBottom: top, marginLeft: right, }
sb.margin(top, right, bottom)
=> { marginTop: top, marginRight: right, marginBottom: bottom, marginLeft: right, }
sb.margin(top, right, bottom, left)
=> { marginTop: top, marginRight: right, marginBottom: bottom, marginLeft: left, }
sb.padding(top, right, bottom, left)
sb.padding()
=> { paddingTop: 0, paddingRight: 0, paddingBottom: 0, paddingLeft: 0, }
sb.padding(top)
=> { paddingTop: top, paddingRight: top, paddingBottom: top, paddingLeft: top, }
sb.padding(top, right)
=> { paddingTop: top, paddingRight: right, paddingBottom: top, paddingLeft: right, }
sb.padding(top, right, bottom)
=> { paddingTop: top, paddingRight: right, paddingBottom: bottom, paddingLeft: right, }
sb.padding(top, right, bottom, left)
=> { paddingTop: top, paddingRight: right, paddingBottom: bottom, paddingLeft: left, }
sb.radius(value = 0)
{ borderRadius: value, }
sb.border(direction = 'all', width = 1, color = 'black', style = 'solid')
sb.border('all', width, color, style)
=> { borderWidth: width, borderColor: color, borderStyle: style, }
sb.border('Top', width, color, style)
=> { borderTopWidth: width, borderTopColor: color, borderTopStyle: style, }
sb.border('Right', width, color, style)
=> { borderRightWidth: width, borderRightColor: color, borderRightStyle: style, }
sb.border('Bottom', width, color, style)
=> { borderBottomWidth: width, borderBottomColor: color, borderBottomStyle: style, }
sb.border('Left', width, color, style)
=> { borderLeftWidth: width, borderLeftColor: color, borderLeftStyle: style, }
sb.flex(value = 1)
{ flex: value, }
sb.bgColor(color = 'white')
{ backgroundColor: color, }
sb.color(color = 'white')
{ color, }
sb.alignSelf(alignSelf = 'stretch')
{ alignSelf, }
sb.textAlign(textAlign = 'center')
{ textAlign, }
sb.font(size = 14, height, weight = 'normal')
{ fontSize: size, lineHeight: height || size, fontWeight: weight, }
sb.position(mode = 'absolute', top, right, bottom, left)
{ position: mode, top: top || "", right: right || "", bottom: bottom || "", left: left || "", }
sb.direction(direction = 'row')
{ flexDirection: direction, }