A lightweight View component that can be styled quickly.

Installation

$ npm install react-native-view --save

then

import View from 'react-native-view';
/*...*/
<View vcenter hcenter>
/*...*/
</View>

Usage

Align content

Example

• center children horizontally

<View hcenter>
/*...*/
</View>

• align children to the left

<View hstart>
/*...*/
</View>

• center children horizontally and vertically

<View vcenter hcenter>
/*...*/
</View>

Available props:

prop	description
hstart	Align children to the left
hcenter	Center children horizontally
hend	Align children to the right
vstart	Align children to the top
vcenter	Center children vertically
vend	Align children to the bottom
flex	Apply flex: 1
row	Becomes a row (column by default)
stretch	Stretch the view to fill parent
spread	Spread children evenly along the orientation with padding
push	Spread children evenly along the orientation without padding

More examples:

• spread

<View spread hcenter>
/*...*/
</View>

• push

<View push hcenter>
/*...*/
</View>

Padding

By default paddings can be set using breakpoints:

name	value in px
sm	5
md	15
lg	30
xl	45

Also, you can specify where paddings are applied using directional suffixes: l - left | r - right | t - top | b - bottom:

Example

• 15px padding top and left

<View mdpt mdpl>
</View>

• 5px padding on all sides

<View smp>
</View>

License

MIT