https://github.com/i6mi6/react-native-view
A lightweight View component for React Native
https://github.com/i6mi6/react-native-view
Last synced: 9 days ago
JSON representation
A lightweight View component for React Native
- Host: GitHub
- URL: https://github.com/i6mi6/react-native-view
- Owner: i6mi6
- License: mit
- Created: 2017-10-02T10:31:42.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-17T21:41:31.000Z (almost 7 years ago)
- Last Synced: 2025-04-02T20:36:35.593Z (17 days ago)
- Language: JavaScript
- Size: 15.6 KB
- Stars: 40
- Watchers: 4
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-view ★34 - Lightweight View component for quick styling. (Components / UI)
- awesome-reactnative-ui - react-native-view - native-view.png)| (Others)
- awesome-react-native - react-native-view ★34 - Lightweight View component for quick styling. (Components / UI)
- awesome-reactnative-ui - react-native-view - native-view.png)| (Others)
- awesome-react-native - react-native-view ★34 - Lightweight View component for quick styling. (Components / UI)
- awesome-react-native - react-native-view ★34 - Lightweight View component for quick styling. (Components / UI)
README
# react-native-view
A lightweight View component that can be styled quickly.
[](https://www.npmjs.com/package/react-native-view)
Installation
---
```javascript
$ npm install react-native-view --save
```
then
```javascript
import View from 'react-native-view';
/*...*/
/*...*/
```
# Usage
## Align content
#### Example
- ##### center children horizontally
```javascript
/*...*/
```
- ##### align children to the left
```javascript
/*...*/
```
- ##### center children horizontally and vertically
```javascript
/*...*/
```
## 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
```javascript
/*...*/
```
- ##### push
```javascript
/*...*/
```
## 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
```javascript
```
- #### 5px padding on all sides
```javascript
```
License
----
MIT