# react-native-div

> This is a wrapper for react native that allows to easily create graphic layouts with relative dimensions from parent to children and easy and cool animations to present them

Latest version **1.1.2** (published 2017-07-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-div
pnpm add react-native-div
yarn add react-native-div
bun add react-native-div
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2017-07-24 |
| First published | 2017-04-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Andrea Mazzilli |
| Maintainers | andreamazzilli |
| Keywords | react, native, div |

## Links

- npm: https://www.npmjs.com/package/react-native-div
- Repository: https://github.com/ux-design/react-native-div
- Homepage: https://github.com/ux-design/react-native-div#readme
- Issues: https://github.com/ux-design/react-native-div/issues
- npm.io page: https://npm.io/package/react-native-div

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.2 (latest) — 2017-07-24
- 1.1.1 — 2017-05-17
- 1.1.0 — 2017-05-16
- 1.0.6 — 2017-05-03
- 1.0.5 — 2017-04-24
- 1.0.4 — 2017-04-24
- 1.0.3 — 2017-04-12
- 1.0.2 — 2017-04-12
- 1.0.1 — 2017-04-12
- 1.0.0 — 2017-04-12

## README

# react-native-div
This is a wrapper of the View element that speeds up the process of creating graphic layouts for your React Native app; it's easy to configure and it allows you to implement animations either predefined either custom.

# Installation

`$ npm i --save react-native-div`

```javascript
import { Div } from 'react-native-div' ;

...

render(){
  return <Div w="200" h="200" bgColor="green"></Div>
}
```

# Props

prop | typeof | value | description
------ | ---- | ------- | ----
w | `string`,`number` | "200",200 | shortcut to define the Width , if the `perc` prop is true the value becomes a percentage based on the parent
h | `string`,`number` | "100",100 | shortcut to define the Height , if the `perc` prop is true the value becomes a percentage based on the parent
perc | `boolean` | true,false | defines the `Width` and the `Height` as percentage of the parent element 
align | `string` | left,center,right | alignment in horizontal mode
vAlign | `string` | top,center,bottom | alignment in vertical mode
bgColor | `string` | red,#ffcc00,.. | background color with the same values of the normal styling
column | `boolean` | true,false | align the content vertically
_onPress | `function` | func... | call a function on touch event
animate | `string` | bounceIn,bounceOutIn,.. | animate the element with a [predefined animation](#predefinedanimations)
animateCustom | `array` | [{x,y,r,s,o,t,f},{..] | animate the element with a [custom animation](#customanimation)
delay | `number` | 0,.5,1.2,.. | seconds of delay for this animation


# <a name="predefinedanimations"></a>Predefined Animations

bounceIn
bounceOutIn
bounceLeft
bounceRight
bounceUp
bounceDown
..

# <a name="customanimation"></a>Custom Animations

```javascript
render(){
  var elasticUp = [ { y : 100 , f : 1 } ] ;
  return <Div w="100" h="100" bgColor="red" animateCustom={ elasticUp } ></Div>
}
```

```javascript
render(){
  var leftRightCenter = [ { x : -100 , t : 1 } , { x : 100 , t : 2 } , { x : 0 , t : 1 } ] ;
  return <Div w="100" h="100" bgColor="red" animateCustom={ leftRightCenter } ></Div>
}
```

---
_Source: https://npm.io/package/react-native-div · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._