Package Exports

react-native-clippathview
react-native-clippathview/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-clippathview) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Native ClipPath

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

Example --> Demo

Getting started

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

Yarn

yarn add react-native-clippathview

IOS

Add Swift

(If you are using expo sdk >=42 you don't need to do this)

/ios/name_project

add a .swift file

Usage

ClipPathViewH (Android Layer type Hardware)

import {ClipPathView , ClipPathViewH } from 'react-native-clippathview'

// TODO: What to do with the module?
    <ClipPathView style={{backgroundColor:'green'}} 

       
        d={myPath}
        viewBox={myViewBox}
        
        
    
    >
  
        <View >
            <Text style={{color:'white'}}>hello world</Text>
        </View>
        
    </ClipPathView>

Props

Name	description	type	default
svgKey	Each view must have a different key	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
fillRule	determines what side of a path is inside a shape	String	nonzero
strokeWidth	defines the thickness of a line (mobile)	Number	1
strokeCap	line cap (mobile)	string	'butt'
strokeJoin	line join (mobile)	string	'miter'
strokeMiter	control the behavior of miter (mobile)	Number	4
strokeStart	the start (mobile)	Number	0
strokeEnd	the end (mobile)	Number	1

Transform

The percentageValue property 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