Next Input in React Native using functional component and component Input

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?

86 thoughts on “Next Input in React Native using functional component and component Input”

Leave a Comment