DrawableView

Draw svg paths with shadows

android: api 21+
ios : 10.0+
web: svg

Getting started

$ npm install react-native-drawableview --save
$ react-native link react-native-drawableview

or

$ yarn add react-native-drawableview

IOS

cd ios

pod install

Add Swift

/ios/name_project

add a .swift file

Usage

import{DrawableView,DrawableViewS,DrawableViewB,Color}from'react-native-drawableview';// (Android) DrawableViewS -> support shadow ( Layer type Software < api 28 )// (Android) DrawableViewB ->Layer type None , support shadow ( Bitmap < api 28 ) // (Android) DrawableView -> Layer type None // TODO: What to do with the module?varcolorRed=Color('red')//Color('rgba(255,0,0,1)'), #FF0000 .....<DrawableViewS{...props}shadow={colorRed}/>

Props

Name	description	type	default
svgKey	(web) required to shadow , stroke start-end.	String	""
d	The shape, defined by a series of commands	String	""
viewBox	defines the position and dimension, in user space	Array[Number] (4)	undefined
align	the aligment	String	xMidYMid
aspect	aspect ratio	String	meet
opacity	The opacity attribute specifies the transparency	Number	1
fill	The fill prop refers to the color inside the shape.	Color	black
fillRule	determines what side of a path is inside a shape	String	nonzero
fillOpacity	the opacity of the color [0 - 1]	Number	1
stroke	defines the color of a line	Color	transparent
strokeOpacity	the opacity of the line color [0 - 1]	Number	1
strokeWidth	defines the thickness of a line	Number	1
strokeCap	line cap	string	'butt'
strokeJoin	line join	string	'miter'
strokeMiter	control the behavior of miter	Number	4
strokeStart	the start	Number	0
strokeEnd	the end	Number	1
dashArray	required for stroke (web)	Number	0
dashClipValue	(web) required for stroke start-end != 0-1. [0 to 1] (rec:0.05)	Number	0
shadow	set the sahdow color	Color	'black'
shadowOpacity	set the shadow opacity [0 - 1]	Number	0
shadowRadius	the radius	Number	2
shadowOffset	set the offset	Number	2
shadowOffsetX	set the offset x	Number	2
shadowOffsetY	set the offset y	Number	2
shadowPercentageValue	offset * size (mobile)	Bool	false
shadowRect	clip Region (web)	Object	size * 3

Transform

The percentageValue property (mobile) : refers to the fact that the Origin will be multiplied by the size of the view.

Name	type	default
translateZ	Number (zIndex)	0
transX	Number	0
transY	Number	0
transPercentageValue	Bool	false
rot	Number	0
rotOx	Number	0
rotOy	Number	0
rotPercentageValue	Bool	false
sc	Number	1
scX	Number	1
scY	Number	1
scO	Number	0
scOx	Number	0
scOy	Number	0
scPercentageValue	Bool	false