Error [CoreGraphics] clip: empty path.

[cerven]

I am showing react-native-draw with predefined paths.

In react native console it always log message "Error [CoreGraphics] clip: empty path.".

It looks like this error is because SVGRenderer it rendering "memoized"(currentPath) path even when it does not exists(is empty): https://github.com/BenJeau/react-native-draw/blob/master/src/components/renderer/SVGRenderer.tsx#L49

[BenJeau]

Would you have more information on the crash (version of React Native, if you are using Expo, version of Expo, version of react-native-svg, maybe logs)? I can create a simple fix, but I would like to know the root cause of this bug first.

I am unable to reproduce this error. It seems related to this https://github.com/react-native-svg/react-native-svg/issues/987 and https://github.com/react-native-svg/react-native-svg/issues/901.

[cerven]

App will not crash, you are right, it is related to react-native-svg. If I run it in expo, it is ok, but if i run it in custom build of expo(expo run:ios), or from xcode as native app, it will print this warning/error.

<Svg height={100} width={100}>
    <Path  d='' stroke='black' strokeLinejoin="round" />
</Svg>

attributes "d", "stroke" and "strokeLinejoin" are required for this to happen("d" has to be empty string).

It means in react-native-draw this will happen as I described above. It is not bug in this package.

[BenJeau]

Ok makes sense, I'll still merge the PR to remove that error/log for those who are using old versions

[BenJeau]

The fix for older versions of react-native-svg is now available in version 0.5.0 :tada:

[GerardoGarciaR]

The fix for older versions of react-native-svg is now available in version 0.5.0 🎉

In my Case it doesnt work on iOS, I'm running un expo. Previously I've been prebuilt by runnning: npx expo prebuild I made that in order to generate the ios and android folders, for linking native libraries.

So then I Install native gesture handler: npx expo install react-native-gesture-handler Then Instaled React Native SVG: npx expo install react-native-svg Then Installed the Pods: cd ios && pod install

Then for Running I do this: npx expo run. and then I select ios

It shows the project apparently without errors. But when I try to draw, nothing happens, but It doesnt draw nothing, and also in console everytime I Pressed the canvas to draw the console shows me that error:

LOG [ReferenceError: Property 't' doesn't exist]

I've tried on iOS and Android and I've got the same error. ONLY works on WEB.

I checked the versions of SVG and Gesture Handler that I have installed on my project on package.json file and thats what i've got: "react-native-svg": "15.2.0", "react-native-gesture-handler": "~2.16.1",

Also shows that error on Console each time I try to draw in canvas: [CoreGraphics] clip: empty path.

[GerardoGarciaR]

But the most Curious thing is that I replicated the project running a new project, React Native Reanimated and SVG are installed and linked.

Even I import the react reanimated at the first line of code as this: import 'react-native-reanimated';

As the last project The canvas works and draw perfectly on web, but not on iOS. But this time doesn't show the CoreGraphics empty error.

It throws me that error when I try to draw on canvas: ReanimatedError: [Reanimated] Tried to synchronously call a non-worklet functionaddPointToPathon the UI thread.

Thats my Code at this point:

import 'react-native-reanimated';

import React, { useRef } from 'react';

import { Text, View, Pressable } from "react-native";

import { Canvas, CanvasRef } from '@benjeau/react-native-draw';

export default function Index() {
  const canvasRef = useRef<CanvasRef>(null);

  const handleUndo = () => {
    canvasRef.current?.undo();
  };

  const handleClear = () => {
    canvasRef.current?.clear();
  };

  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >

      <Canvas
        ref={canvasRef}
        height={600}
        width={300}
        color="black"
        thickness={2}
        opacity={0.6}
        style={{ backgroundColor: 'papayawhip', borderColor: 'black', borderWidth: 5, borderRadius: 20}}
      />
      <Pressable onPress={handleUndo} style={{margin: 20}} >
        <Text style={{fontWeight: 'bold', fontSize: 15}}>Undo</Text>
      </Pressable>

      <Pressable onPress={handleClear} >
        <Text style={{fontWeight: 'bold', fontSize: 15}}>Clear</Text>
      </Pressable>

    </View>
  );
}