android: api 21+
ios : 10.0+
web: svg
Example --> Demo
$ npm install react-native-clippathview --save
$ react-native link react-native-clippathview
yarn add react-native-clippathview
Add Swift
(If you are using expo sdk >=42 you don't need to do this)
/ios/name_project
add a .swift file
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>| 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 |
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 |