How do I make the paths softer?

[ahmtxonly]

Hello everyone,
I am experimenting with Skia and expo for an app.

What I want to do is to paint on a picture of my choice.

Like this;

The way I do it is that the lines are angular and I want it to be smooth.

My code;

import React, { useState, useCallback, useRef } from "react";
import {
  View,
  StyleSheet,
  Button,
  Image,
  SafeAreaView,
  Alert,
} from "react-native";
import {
  Canvas,
  Path,
  Skia,
  useTouchHandler,
} from "@shopify/react-native-skia";
import * as ImagePicker from "expo-image-picker";
import * as MediaLibrary from "expo-media-library";
import { captureRef } from "react-native-view-shot";

const App: React.FC = () => {
  const [imageUri, setImageUri] = useState<string | null>(null);
  const [paths, setPaths] = useState<
    Array<{ path: any; color: string; strokeWidth: number }>
  >([]);
  const previewRef = useRef<View>(null);

  const selectImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      quality: 1,
    });

    if (!result.canceled) {
      setImageUri(result.assets[0].uri);
    }
  };

  const onDrawingStart = useCallback((touchInfo: { x: number; y: number }) => {
    const newPath = Skia.Path.Make();
    newPath.moveTo(touchInfo.x, touchInfo.y);
    setPaths((prev) => [
      ...prev,
      { path: newPath, color: "rgba(255, 0, 0, 0.5)", strokeWidth: 20 },
    ]);
  }, []);

  const onDrawingActive = useCallback((touchInfo: { x: number; y: number }) => {
    setPaths((prev) => {
      const currentPath = prev[prev.length - 1];
      currentPath.path.quadTo(
        currentPath.path.getLastPt().x,
        currentPath.path.getLastPt().y,
        touchInfo.x,
        touchInfo.y
      );
      return [...prev.slice(0, -1), currentPath];
    });
  }, []);

  const touchHandler = useTouchHandler({
    onStart: onDrawingStart,
    onActive: onDrawingActive,
  });

  const clearAll = () => {
    setPaths([]);
    setImageUri(null);
  };

  const saveImage = async () => {
    if (previewRef.current) {
      const uri = await captureRef(previewRef, {
        format: "png",
        quality: 1,
      });

      const permission = await MediaLibrary.requestPermissionsAsync();
      if (permission.granted) {
        await MediaLibrary.saveToLibraryAsync(uri);
        Alert.alert("Success", "Image saved to gallery!");
      } else {
        Alert.alert(
          "Permission Denied",
          "You need to grant permission to save images to your gallery."
        );
      }
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <Button title="Galeriden resim seç" onPress={selectImage} />
      <View style={styles.content}>
        <View style={styles.half}>
          {imageUri && (
            <View style={{ flex: 1 }}>
              <Image
                source={{ uri: imageUri }}
                style={{ width: "100%", height: "100%" }}
              />
              <Canvas style={styles.canvas} onTouch={touchHandler}>
                {paths.map((p, index) => (
                  <Path
                    key={index}
                    path={p.path}
                    color={p.color}
                    style="stroke"
                    strokeWidth={p.strokeWidth}
                    antiAlias={true}
                  />
                ))}
              </Canvas>
            </View>
          )}
        </View>
        <View style={styles.half}>
          <View style={styles.preview} ref={previewRef}>
            {imageUri && (
              <Image
                source={{ uri: imageUri }}
                style={{ width: "100%", height: "100%" }}
              />
            )}
            <Canvas style={styles.canvas}>
              {paths.map((p, index) => (
                <Path
                  key={index}
                  path={p.path}
                  color={p.color}
                  style="stroke"
                  strokeWidth={p.strokeWidth}
                  antiAlias={true}
                />
              ))}
            </Canvas>
          </View>
        </View>
      </View>
      <View style={styles.buttons}>
        <Button title="Temizle" onPress={clearAll} />
        <Button title="Resmi kaydet" onPress={saveImage} />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
  },
  half: {
    flex: 0.5,
  },
  canvas: {
    flex: 1,
    position: "absolute",
    width: "100%",
    height: "100%",
  },
  preview: {
    flex: 1,
    borderWidth: 1,
    borderColor: "black",
  },
  buttons: {
    flexDirection: "row",
    justifyContent: "space-around",
    margin: 10,
  },
});

export default App;

Thanks for your help.