Warning: Function components cannot be given refs.

[douglasfrancis]

Error message - (index.js:1 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?)

This is the code from my functional component (I'm using the basic implementation shown in the docs and have tried multiple other options and fixes without any luck) -

import React, { useState, useContext, useRef, useEffect } from "react";
import { StyleSheet, Text, View } from "react-native";
import { AuthContext } from '../../AuthContext';
import Signature from "react-native-signature-canvas";

const StaffSignature = () =>{

  return (
    <View style={{flex: 1}}>
      <Signature
        // handle when you click save button
        onOK={(img) => console.log(img)}
        onEmpty={() => console.log("empty")}
        // description text for signature
        descriptionText="Sign"
        // clear button text
        clearText="Clear"
        // save button text
        confirmText="Save"
        // String, webview style for overwrite default style, all style: https://github.com/YanYuanFE/react-native-signature-canvas/blob/master/h5/css/signature-pad.css
        webStyle={`.m-signature-pad--footer
          .button {
            background-color: red;
            color: #FFF;
          }`}
        autoClear={true}
        imageType={"image/svg+xml"}
      />
   
    </View>
  );

}

[YanYuanFE]

Can you see if the code in the example works? Ensure version consistency

[yanodnoralov]

@YanYuanFE I'm getting the same error. Using the code as in the example. It works fine in the context of mobile, but when i try to view it on web, it is showing me this same error. Would you have any insight?

package.json

`import { useEffect, useRef, useState } from "react";
import PropTypes from "prop-types";
import { StyleSheet, View } from "react-native";
import { useTheme, Text } from "react-native-paper";
import BasicModal from "../../../components/Modals/BasicModal";
import { BetterButton } from "../../../components/CommonFieldset/BetterButton";
import { isWebView } from "../../../utils/viewportUtils";
import SignatureScreen from "react-native-signature-canvas";
import * as FileSystem from "expo-file-system";
import { getSignatureDisclaimerText } from "../../../hooks/useCustomerEstimate";

export const SignatureModal = ({ isVisible, onSignatureSubmit, onClose }) => {
const ref = useRef();
const signatureDisclaimer = getSignatureDisclaimerText();
const theme = useTheme();
const styles = styleMaker(theme);
const [isBlank, setIsBlank] = useState(true);

//reset isBlank to true on "unmount"
useEffect(() => {
setIsBlank(true);
}, [isVisible]);

const handleSignature = (signature) => {
const timestamp = new Date().getTime();
const path = FileSystem.cacheDirectory + sign_${timestamp}.png;
FileSystem.writeAsStringAsync(path, signature.replace("data:image/png;base64,", ""), { encoding: FileSystem.EncodingType.Base64 })
.then(() => {
FileSystem.getInfoAsync(path);
onSignatureSubmit(path);
})
.catch(console.error);
};

const handleClear = () => {
ref.current.clearSignature();
setIsBlank(true);
};

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

const handleEnd = () => {
setIsBlank(false);
};

const style = .m-signature-pad--footer {display: none; margin: 0px;}; // hide default footer

return (




{signatureDisclaimer && (

{signatureDisclaimer}

)}
{!isBlank && (

<BetterButton
mode="text"
compact={true}
style={{ marginTop: 15 }}
onPress={handleClear}
textColor={theme.colors.labelLight}>
Reset Pad


)}

<BetterButton
mode="text"
style={{ marginTop: 15, minWidth: 140 }}
onPress={onClose}
icon="close"
textColor={theme.colors.error}>
Cancel

<BetterButton
mode="contained"
icon="check-circle"
disabled={isBlank}
style={{ marginTop: 15, minWidth: 140 }}
onPress={handleConfirm}>
Submit



);
};
`