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 |