Drawing is not working, I have use given example

[Anubhavshakya]

Please provide correct example to use it. In my case UI is rendering but it does not draw anything.

[BenJeau]

I am assuming that you have not properly setup https://docs.swmansion.com/react-native-gesture-handler/, since the whole drawing relies on react-native-gesture-handler. Please follow the setup instructions on their docs and let me know if it still doesn't work afterwards.

I just tried creating a new react native project with this library and it is working (there were only some small syntax issues in the example, which I just fixed).

[Anubhavshakya]

First of all thank you for quick response, I have setup this project using expo managed. I have tried many ways but it still does not draw anything. I am attaching the UI and my Code. Can you provide me working example repo ?? so that it can help me.

`import React, { useRef } from 'react';
import { Draw, DrawRef } from "@benjeau/react-native-draw";

export default function App() {
const drawRef = useRef(null);

const removeLastPath = () => {
drawRef.current?.undo();
}

const clearDrawing = () => {
drawRef.current?.clear();
}

// ... for more ref functions, look below

return (
<Draw
ref={drawRef}
height={600}
initialValues={{
color: "#B644D0",
thickness: 10,
opacity: 0.5,
paths: []
}}
/>
)
}`

[BenJeau]

Have you tried running the example? (although the code inside may seem a bit weird, just picture that the objects in the data variable in the data.ts file as props to the component, more specifically the props object of the data variable)

It is using Expo and should be working on Android and iOS (web has a problem with one of the dependencies).

If that is not enough, I can create a small repo with only the example.

[mhumza37dev]

Nothing happens when i try to draw on canvas.

screen-20220726-064108.mp4

[Anubhavshakya]

When I run the example then I got babel runtime error. I have try to solve it by googling but none of them working.

[BenJeau]

I have created a new project and it is working, have you maybe forgotten to import the following at the top of your file? (as per the extra steps for https://docs.expo.dev/versions/latest/sdk/gesture-handler/)

import 'react-native-gesture-handler';

[Anubhavshakya]

Here is my Code

[BenJeau]

I assume you are trying it on Android and that you cannot draw? This should help you https://stackoverflow.com/a/70950177/11006837 - you need to do this since you are using Expo

Here's a screenshot of it working:

[Anubhavshakya]

Finally Problem solved.... Thanks for your help and Thanks for this amazing package. I am working on a project in which I will use it.... Can I use this package in js rather than typescript ???

[BenJeau]

No problem! glad I could help, yes it should work in javascript too