https://github.com/only-icesoul/react-native-clippath
ClipPath Android Web IOS - Hardware accelerated
https://github.com/only-icesoul/react-native-clippath
accelerated android clip clippath exo gpu hardware ios native path react react-native web
Last synced: about 1 month ago
JSON representation
ClipPath Android Web IOS - Hardware accelerated
- Host: GitHub
- URL: https://github.com/only-icesoul/react-native-clippath
- Owner: Only-IceSoul
- License: mit
- Created: 2021-08-05T19:28:57.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-11-28T14:54:37.000Z (over 3 years ago)
- Last Synced: 2025-04-20T01:03:23.266Z (about 1 month ago)
- Topics: accelerated, android, clip, clippath, exo, gpu, hardware, ios, native, path, react, react-native, web
- Language: Java
- Homepage:
- Size: 235 KB
- Stars: 2
- Watchers: 2
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native ClipPath
android: api 21+
ios : 10.0+
web: svg
Example --> [Demo](https://github.com/Only-IceSoul/canal/tree/master/react-native/LiquidSwipe/ClipPath)
## 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)
```javascript
import {ClipPathView , ClipPathViewH } from 'react-native-clippathview'
// TODO: What to do with the module?
hello world
```
## 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 |