Error when reading signature : ref.current.readSignature is not a function (it is undefined),

[r083rt]

I just face this problem with my new project. My previous project that using the old RN version don't have this error.

TypeError: ref.current.readSignature is not a function (it is undefined), js engine: hermes

Here's my current info : System: OS: Windows 11 10.0.22621 CPU: "(16) x64 AMD Ryzen 7 5800H with Radeon Graphics " Memory: 1.28 GB / 15.41 GB Binaries: Node: version: 18.17.1 path: C:\Program Files\nodejs\node.EXE Yarn: version: 1.22.22 path: C:\Program Files\nodejs\yarn.CMD npm: version: 9.6.7 path: C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: API Levels:

• "23"
• "27"
• "28"
• "29"
• "30"
• "31"
• "32"
• "33"
• "33"
• "34" Build Tools:
• 28.0.3
• 29.0.2
• 30.0.2
• 30.0.3
• 31.0.0
• 32.0.0
• 33.0.0
• 33.0.1
• 33.0.2
• 34.0.0 System Images:
• android-29 | Google Play Intel x86 Atom
• android-30 | Google APIs Intel x86 Atom
• android-33 | Google APIs Intel x86_64 Atom
• android-33 | Google Play Intel x86_64 Atom
• android-34 | Google Play Intel x86_64 Atom Android NDK: Not Found Windows SDK: AllowDevelopmentWithoutDevLicense: Enabled IDEs: Android Studio: AI-223.8836.35.2231.10811636 Visual Studio: Not Found Languages: Java: 12.0.2 Ruby: Not Found npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.73.6 wanted: 0.73.6 react-native-windows: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: Not found newArchEnabled: Not found

The codes :

import React, {useState, useEffect, useRef} from 'react';
import {Box, Button, ButtonGroup, ButtonText} from '@gluestack-ui/themed';
import SignatureScreen from 'react-native-signature-canvas';
import {Sign} from '../components';

export default function SignPad({navigation, route}) {
  const handleOk = () => {};
  const ref = useRef();
  const [signature, setSign] = useState(null);

  const handleConfirm = () => {
    ref.current.readSignature();
  };

  const handleClear = () => {
    setSign(null);
    ref.current.clearSignature();
  };

  return (
    <Box flex={1}>
      <SignatureScreen
        ref={ref}
        webStyle={`
                .m-signature-pad {
                  flex: 1;
                  box-shadow: none;
                  border-radius: 10px;
                }
                .m-signature-pad--footer {
                  display: none;
                }
                `}
        onOK={setSign}
        imageType={'image/png+xml'}
        // autoClear
      />
      <ButtonGroup>
        <Button onPress={handleConfirm}>
          <ButtonText>Simpan</ButtonText>
        </Button>
        <Button onPress={handleClear}>
          <ButtonText>Hapus</ButtonText>
        </Button>
      </ButtonGroup>
    </Box>
  );
}

Please help. Thank you