React Native - ref's depreciation message

Question

I am using a signature capture component (https://github.com/RepairShopr/react-native-signature-capture) as part of a form. I want to reset the form fields on submission via a reset function (ClearDutyRecord below) and need to reset the signature capture also as part of this process.

The component documentation (https://github.com/RepairShopr/react-native-signature-capture) describes a reset function, which is ideal - but the method to call the function (using refs) is depreciated. Looking around Stack Overflow I've found this post which explains the issue - Deprecation warning using this.refs - but I'm unsure how to implement in RN - or whether there is a different approach I should now take - can anyhow offer any advice please?

This is my reset code currently:

clearDutyRecord = () => {

    this.setState({
      dutyRecordViewId: 'home',
      comments:'',
      signatureName:'',
    });
    this.refs["drSig"].resetImage();
    this.props.navigation.navigate('HomeViewContainer');
  }

score 1 · Accepted Answer · answered Jan 06 '20 at 15:31

Since it's a class component, You can use the React.createRef() solution - that is the most up-to-date way for class components.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

source: reactjs docs

React Native does use React.js inside, so don't worry about using the React in the Native environment - this is the same React (the stuff characteristic for browser-enviromnets are encapsulated in react-dom package).

React Native - ref's depreciation message

1 Answers1