ver 1.1.6

Author: Only-IceSoul

README.md

@@ -9,9 +9,6 @@ web: svg
 ## Getting started
 
 `$ npm install react-native-clippathview --save`
-
-### Mostly automatic installation
-
 `$ react-native link react-native-clippathview`  
 
 ### Yarn
@@ -56,6 +53,7 @@ import {ClipPathView , ClipPathViewH } from 'react-native-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 |

index.d.ts

@@ -3,7 +3,7 @@ import { Constructor, NativeMethods, ViewProps } from "react-native";
 
 
 interface ClipPathViewProps extends ViewProps {
-  
+    svgKey:string // web
     d:string
     viewBox?:number[] 
     aspect?: 'meet' | 'slice' | 'none'

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-clippathview",
   "title": "React Native ClipPath",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "ClipPath Android Web IOS",
   "main": "index.js",
   "files": [

src/ClipPathWeb.js

@@ -107,6 +107,8 @@ const ClipPathWeb  =  React.forwardRef((props,ref) =>{
     const myRef = ref || refAlt
 
     const {
+
+        svgKey,
         d,
         viewBox,
         aspect,
@@ -165,6 +167,8 @@ const ClipPathWeb  =  React.forwardRef((props,ref) =>{
         return style
       },[style])
 
+
+    const userKey = svgKey === undefined ? "" : svgKey
     const path = d === undefined ? "" : d
     const vb = viewBox === undefined ? [0,0,-1,-1] : viewBox
     const asp = aspect === undefined ? "meet" : aspect
@@ -311,15 +315,16 @@ const ClipPathWeb  =  React.forwardRef((props,ref) =>{
         }
     })
 
+    const keyClip = `clipPathViewjjfl${userKey}`
 
     return(
         <>
-            <div {...rest} ref={myRef} style={{...styleObject,clipPath:`${d.length > 0 ? 'url(#clipPathViewjjfl)' : ''}`, zIndex:zIndex}} >
+            <div {...rest} ref={myRef} style={{...styleObject,clipPath:`${d.length > 0 ? `url(#${keyClip})`  : ''}`, zIndex:zIndex}} >
 
             </div>
             <svg  style={{width:0,height:0}}>
             <defs>
-                    <clipPath id="clipPathViewjjfl" 
+                    <clipPath id={keyClip} 
                     clipPathUnits="objectBoundingBox" 
 
                     >