Skip to content

i6mi6/react-native-view

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-view

A lightweight View component that can be styled quickly.

NPM

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>

alt text

  • align children to the left
<View hstart>
/*...*/
</View>

alt text

  • center children horizontally and vertically
<View vcenter hcenter>
/*...*/
</View>

alt text

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>

alt text

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

alt text

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>

alt text

  • 5px padding on all sides

<View smp>
</View>

alt text

License

MIT