How to get value of an input - reac native?

Question

I'm trying to get the value of an input after the user click submit, I have a simple form that ask for the user to sign,

when the user click submit, inside the handleLogin, i call the handleSignature and passes the signature to an input, but here is were I'm lost how can I get the value of this field, is the field that contains the signature.led.

 export default function Form({navigation}) {
    
    const handleLogin = (data, setSubmitting) => {  
        handleSignature();
    
    
    }

    return (      
        <>
            <Formik   
                initialValues = {{first_name: '', last_name:' }}
                onSubmit = { (values, {setSubmitting }) => { 
                        
            
                    handleLogin(values, setSubmitting);
                
                }}>

                {({handleChange, handleBlur, handleSubmit, values, isSubmitting, errors, touched}) => ( 
                    
                    <> 
                        <View style={styles.CONTENT}>
                        
                        <View style={styles.INPUTS}>
                                                    
                            <MyTextInput
                                label           = "First Name" 
                                onChangeText    = {handleChange('first_name')}
                                onBlur          = {handleBlur('first_name')}
                                values          = {values.first_name || ''}
                                returnKeyType   = "next"
                                innerRef        = {input1}    
                                
                            />
                            
                            <MyTextInput
                                label           = "Last Name" 
                                onChangeText    = {handleChange('last_name')}
                                onBlur          = {handleBlur('last_name')}
                                values          = {values.last_name}
                                returnKeyType   = "next"
                                refInner        = {input2} 
                            /> 

                            <MyTextInput 
                                values          = {signature} 
                            /> 
                        </View>
                </>
        </Formik>
    )

Answer 1

if you want get the values of input you need to bind the value to state, as follows

          constructor(props) {
                super(props);

            this.state = {
               first_name: '',  // state
               last_name: ''  
            };
          }


          <MyTextInput
              label="First Name"
              onBlur={handleBlur('first_name')}
              values={values.first_name || ''}
              returnKeyType="next"
              innerRef={input1}
              onChangeText={e => this.setState({first_name: e})} // binding value
            />

when you bind the value you can get the value on any function as follows

const handleLogin = (data, setSubmitting) => {  
     handleSignature();
     console.log(this.state.first_name) // the value of input
}

---

the above metho will be work if you use class component, but in your case you are using functional component so you can solve the problem using below snippts

import React, {useState, useEffect} from 'react';
export default function Form({navigation}) {
  const [firstName, setFirstName] = useState('');
  const [lastName, setlastName] = useState('');

  const handleLogin = (data, setSubmitting) => {
    handleSignature();

    console.log(firstName); // output the firstname
    console.log(lastName); // output the lastname
  };

  return (
    <>
      <MyTextInput
        label="First Name"
        onBlur={handleBlur('first_name')}
        values={values.first_name || ''}
        returnKeyType="next"
        innerRef={input1}
        onChangeText={e => setFirstName(e)} // binding value
      />
    </>
  );
}