React-native-drawableview NPM

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

$ 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?

   var colorRed = 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	ArrayNumber	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	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