How to use useRef hook to select next TextInput after pressing next keyboard button with redux-form

Question

I know we can do this easily with react class method.because we have this.ref. but I am not sure how to do this with useRef hook in functional component.

using tricks written here

This is how I am trying to do this.

  ...

  const inputEl1 = useRef(null);
  const inputEl2 = useRef(null);
  return (
        <Field
            name="first_name"
            component={MyTextInput}
            placeholder="First name"
            ref={inputEl1}
            refField={inputEl1}
            onEnter={() => {
              inputEl2.current.focus();
            }}
          />
          />
          <Field
            name="last_name"
            placeholder="Last name"
            component={MyTextInput}
            ref={inputEl2}
            refField={inputEl2}
          />
)
...

So I need to pass ref from field to MyTextInput and on nextKeyPress I want to focus to second input component i.e inputEl2

// My Text Input

...
render() {
    const {
      input: { value, onChange, onBlur },
      meta: { touched, error },
      keyboardType,
      placeholder,
      secureTextEntry,
      editable,
      selectTextOnFocus,
      style,
      selectable,
      customValue,
      underlineColorAndroid,
      autoFocus,
      maxLength,
      returnKeyType,
      onEnter,
      refField,
    } = this.props;
    const { passwordVisibility, undelineColor } = this.state;

    return (
      <View style={{ marginVertical: 8 }}>
        <TextInput
          style={[{
            height: 50,
            paddingLeft: 20,
            color: Colors.SECONDARY_COMMON,
          }, style]}
          onBlur={val => onBlur(val)}
          keyboardType={keyboardType}
          underlineColorAndroid={undelineColor}
          placeholder={placeholder}
          returnKeyType={returnKeyType || 'go'}
          value={customValue || value.toString()}
          onChangeText={onChange}
          maxLength={maxLength}
          onSubmitEditing={onEnter}
          ref={refField}
        />
)
}

Answer 1

const inputEl2 = useRef(null);
<TextInput
        name="first_name"           
        placeholder="First name"
        onSubmitEditing={() => inputEl2.current.focus()}
      />

<TextInput
        name="last_name"
        placeholder="Last name"
        ref={inputEl2}
      />

it worked for me

Answer 2

If it is a child component you are trying to get the ref of, you need to pass the prop as some other name rather than ref.

This method worked for me

For hooks, useRef to init ref.

const passwordInput = useRef(null);

Use a different name for ref prop for custom component, e.g. inputRef.

<CustomInput
  inputRef={ passwordInput }
/>

Child component - Set ref as custom ref prop.

const CustomInput = props => {
  const { inputRef } = props;
  
  return ( <TextInput
    { ...props }
    ref={ inputRef }
  /> );
};

Answer 3

If a child needs to use a prop like a ref as in <TextInput ref={refField}..., then the prop needs to be a ref (not a string):

<Field refField={inputEl2} ...