https://github.com/i6mi6/react-native-view

A lightweight View component for React Native
https://github.com/i6mi6/react-native-view

Last synced: 4 months 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 (over 6 years ago)
• Last Synced: 2024-10-28T15:09:07.399Z (4 months ago)
• Language: JavaScript
• Size: 15.6 KB
• Stars: 41
• 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.

[![NPM](https://nodei.co/npm/react-native-view.png)](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

/*...*/

```

![alt text](https://github.com/i6mi6/react-native-view/blob/master/docs/hcenter.png?raw=true "hcenter")

- ##### align children to the left

```javascript

/*...*/

```

![alt text](https://github.com/i6mi6/react-native-view/blob/master/docs/hstart.png?raw=true "hstart")

- ##### center children horizontally and vertically

```javascript

/*...*/

```

![alt text](https://github.com/i6mi6/react-native-view/blob/master/docs/hcenter%20vcenter.png?raw=true "vcenter hcenter")

## 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

/*...*/

```

![alt text](https://github.com/i6mi6/react-native-view/blob/master/docs/spread.png?raw=true "push")

- ##### push

```javascript

/*...*/

```

![alt text](https://github.com/i6mi6/react-native-view/blob/master/docs/push.png?raw=true "spread")

## 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

```

![alt text](https://github.com/i6mi6/react-native-view/blob/master/docs/mdpt_mdpl.png?raw=true "mdpt mdpl")

- #### 5px padding on all sides

```javascript

```

![alt text](https://github.com/i6mi6/react-native-view/blob/master/docs/smp.png?raw=true "smp")

License

----

MIT