ver 1.1.7

Author: Only-IceSoul

README.md

@@ -4,11 +4,12 @@ android: api 21+
 ios : 10.0+   
 web: svg    
 
-<img src="./src/demo.jpg" width="200">
+ Example --> [Demo](https://github.com/Only-IceSoul/canal/tree/master/react-native/LiquidSwipe/ClipPath)   
+<img src="./src/demo.jpg" width="300">
 
 ## Getting started
 
-`$ npm install react-native-clippathview --save`
+`$ npm install react-native-clippathview --save`  
 `$ react-native link react-native-clippathview`  
 
 ### Yarn

index.d.ts

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

package.json

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

src/ClipPathWeb.js

@@ -202,7 +202,9 @@ const ClipPathWeb  =  React.forwardRef((props,ref) =>{
     const [bounds,setbounds] = useState({w:0,h:0})
 
     const finalPath = useMemo(()=>{
-        if(d.length > 0 && bounds.w > 0 && bounds.h > 0){
+   
+        if(path.length > 0 && bounds.w > 0 && bounds.h > 0){
+    
             var vbLeft = vb[0]
             var vbTop = vb[1]
             var vbWidth = vb[2]
@@ -308,8 +310,8 @@ const ClipPathWeb  =  React.forwardRef((props,ref) =>{
 },[bounds,dx,dy,scaleY,scaleX,scaleOX,scaleOY,path,rotation,rotationOX,rotationOY,asp,alg,vb,scalePercent,transPercent,rotationPercent])
 
     useLayoutEffect(()=>{
-        let w = myRef.current.clientWidth
-        let h = myRef.current.clientHeight
+        let w = myRef.current?.clientWidth || 0
+        let h = myRef.current?.clientHeight || 0
         if(w !== bounds.w || h !== bounds.h  ){
             setbounds({w:w,h:h})
         }
@@ -319,7 +321,7 @@ const ClipPathWeb  =  React.forwardRef((props,ref) =>{
 
     return(
         <>
-            <div {...rest} ref={myRef} style={{...styleObject,clipPath:`${d.length > 0 ? `url(#${keyClip})`  : ''}`, zIndex:zIndex}} >
+            <div {...rest} ref={myRef} style={{...styleObject,clipPath:`${path.length > 0 ? `url(#${keyClip})`  : ''}`, zIndex:zIndex}} >
 
             </div>
             <svg  style={{width:0,height:0}}>