Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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

About

A lightweight View component for React Native

Resources

License

Packages

No packages published
You can’t perform that action at this time.