Licence
MIT
Version
1.1.2
Deps
0
Vulns
0
Weekly
0
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
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 |
| animateCustom | array |
[{x,y,r,s,o,t,f},{..] | animate the element with a custom animation |
| delay | number |
0,.5,1.2,.. | seconds of delay for this animation |
Predefined Animations
bounceIn bounceOutIn bounceLeft bounceRight bounceUp bounceDown ..
Custom Animations
render(){
var elasticUp = [ { y : 100 , f : 1 } ] ;
return <Div w="100" h="100" bgColor="red" animateCustom={ elasticUp } ></Div>
}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>
}