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

[savkevip]

I have an issue with ref too -> I am getting undefined when I call readSignature. With out ref is working as expected.

[savkevip]

I have an issue with ref too -> I am getting undefined when I call readSignature. With out ref is working as expected.

false alarm I didn't add onOK now it's working