A lightweight View component for React Native
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs
LICENSE
README.md
View.js
index.js
package.json

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