React Native: How to select the next Textinput after pressing the "next" button on the keyboard?

Question

I use Input component to insert data into the main form, according to the code below.

import React from "react";
import { TextInput, View } from "react-native";

const Input = ({
    placeholder,
    value,
    onChangeText,
    keyboardType,
    returnKeyType,
    onSubmitEditing,
    blurOnSubmit,
}) => {
    const { containerStyle, inputStyle } = styles;
    state = { isFocused: true }
    return (
        <View style={containerStyle}>
            <TextInput
                placeholder={placeholder}
                autoCorrect={false}
                blurOnSubmit={blurOnSubmit}
                autoFocus={false}
                style={inputStyle}
                value={value}
                onChangeText={onChangeText}
                onSubmitEditing={onSubmitEditing}
                keyboardType={keyboardType}
                returnKeyType={returnKeyType}
            />
        </View>
    );
};

In the main form I have 2 fields of type Textinput ( Input component above ) in which I need that when clicking the NEXT button of the keyboard the cursor automatically goes to the next Input. However, it is returning the error "_this2.secondInput.Focus is not a Function".

I have already made several changes proposed in the forum but failed.

React Native version: 0.59.5

Version React: 18.8.3

Below code from the main form.

Input 1

 <Input
              placeholder={"kg"}
              style={styles.inputStyle}
              keyboardType="number-pad"
              returnKeyType={"next"}
              blurOnSubmit={false}
              value={this.state.peso}
              onChangeText={peso => this.setState({ peso })}
              onSubmitEditing={() => this.secondInput.focus()}
            />

Input 2

<Input
              placeholder={"mc ou mcg"}
              style={styles.inputStyle}
              keyboardType="number-pad"
              returnKeyType={"next"}
              value={this.state.dose}
              blurOnSubmit={false}
              onChangeText={dose => this.setState({ dose })}
              ref={ref => {
                this.secondInput = ref;
              }}
            />

Answer 1

Just add a reference to the second input and focus it when the first input is "sent" through the property onSubmitEditing.

Second input

// Adicionar a referencia ao segundo input

ref={(input) => { this.input_2 = input; }} 

First input

// Adiciona a função para focar no input_2 quando o 
// botão de enviar do teclado for pressionado

onSubmitEditing={() => { this.input_2.focus(); }}

// Definir como falso a propriedade blurOnSubmit para que o campo a seguir continue focado 

blurOnSubmit={false}

Finally a basic example code:

<View style={styles.container}>
    <TextInput
        placeholder="Primeiro input"
        returnKeyType = {"next"}
        onSubmitEditing={() => { this.input_2.focus(); }}
        blurOnSubmit={false}
    />
    <TextInput
        ref={(input) => { this.input_2 = input; }}
        placeholder="Segundo input"
    />
</View>

Online demonstration