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