Awesome
react-native-view
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