Next Input in React Native using functional component and component Input

Question

i try implemented the next input where user click in enter to react native, but i dont know what i can do

I created a component Input in my components files:

class Input extends React.Component {
constructor() {
    super();

    this.state = {
        hidePassword: true
    }
}

setPasswordVisibility = () => {
    this.setState({ hidePassword: !this.state.hidePassword })
}

render() {
    return (
        <>
            <TextInput
                placeholder={this.props.placeholder ? this.props.placeholder : ''}
                selectionColor='#BA90B7'
                keyboardType={this.props.keyboard ? this.props.keyboard : 'default'}
                maxLength={this.props.maxLen ? this.props.maxLen : 100}
                style={[styles.input,
                {
                    width: this.props.width ? this.props.width : 244,
                    marginLeft: this.props.marginL ? this.props.marginL : 0,
                    marginTop: this.props.marginT ? this.props.marginT : 0,
                    textAlign: this.props.alignText ? this.props.alignText : 'left',
                    fontSize: this.props.fontSize ? this.props.fontSize : 15,
                }]}
                autoFocus={this.props.focus ? this.props.focus : false}
                secureTextEntry={this.props.type == 'security' ? this.state.hidePassword : false}
            />
            <Feather style={[styles.eye,
            {
                marginTop: this.props.marginT ? this.props.marginT : 0,
            }]}
                name={(this.state.hidePassword) ? 'eye' : 'eye-off'}
                size={this.props.eye ? 24 : 0}
                color="#BA90B7"
                onPress={this.setPasswordVisibility}
            />
        </>
    );
}}

and in my file, i call this component third times:

export default function RegisterStep1({ navigation }) {

return (
    <View style={styles.container}>

        <Back navi={() => navigation.navigate('Login')} />

        <Text style={styles.txtNome}>
            Seu nome:
        </Text>

        <Input
            placeholder="nome"
            width={141}
            focus={true}
            maxLen={50}
        />
        <Input
            placeholder="Sobrenome"
            width={141} marginL={164}
            maxLen={50}
        />

        <Text style={styles.txtChoiceUser}>
            Escolha seu
        </Text>
        <Text style={styles.txtUser}>
            usuário:
        </Text>

        <Input
            placeholder="Usuário"
            width={312}
            marginT={200}
            maxLen={30}
        />

        <Button text="Próximo" marginT={250} navi={() => navigation.navigate('RegisterStep2')} />

        <Text style={styles.infoUser}>
            Não mostraremos seu usuário dentro do aplicativo, ele séra usado somente para logar na plataforma.
        </Text>

    </View>

But i dont can call the "onSubmitEditing" in component Input, and not thought some way to resolve this in my component.

Exist some form this?

Answer 1

I resolved this problem using this in my component:

<Input
            placeholder="nome"
            inputName="nome"
            width={141}
            focus={true}
            onSubmitEditing={(event) => {
                this.sobrenomeInput.focus()
            }}
            maxLen={50}
        />
        <Input
            placeholder="Sobrenome"
            inputName="sobrenome"
            width={141} marginL={164}
            maxLen={50}
            inputRef={(input) => {
                this.sobrenomeInput = input
            }}
            onSubmitEditing={(event) => {
                this.sobrenomeInput.focus()
            }}
        />

and this in my logical componenet:

 {...this.props}
 ref={(input) => this.props.inputRef && this.props.inputRef(input)}

now here it works in two first inputs, but in my third input it does not work, i'm still trying to solve this