How do I focus next stateless input when pressing next

Question

I'm developing an app in React Native. On my login page, I have a form with Redux. I want to focus the password input after I hit "next" on the email input field.

I tried using onSubmitEditing on the Input inside renderInput() in combination with accessing refs, but unfortunately without success (refs not available because the elements are stateless).

My code:

class LoginForm extends React.Component<Props, State> {
    textInput: any;

    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: '',
            isLoading: false,
        }
    }

    renderInput({ input, disabled, label, type, meta: { touched, error, warning } }) {
        return (
            <Item error={error && touched}>
                <Icon active name={input.name === "email" ? "person" : "unlock"} />
                <Input
                    ref={c => (this.textInput = c)}
                    placeholder={input.name === "email" ? "Email" : "Password"}
                    secureTextEntry={input.name === "password"}
                    editable={!disabled}
                    // autoFocus={input.name === "email"}
                    returnKeyType={input.name === "email" ? "next" : "send"}
                    keyboardType={input.name === "email" ? "email-address" : "default"}
                    autoCapitalize="none"
                    blurOnSubmit={false}
                    {...input}
                />
            </Item>
        );
    }

    render() {
        const { isLoading } = this.state;
        const form = (
            <Form>
                <Field
                    name="email"
                    disabled={isLoading}
                    component={this.renderInput}
                    validate={[email, required]}
                    onChange={(event, value) => this.setState({email: value})}
                />
                <Field
                    name="password"
                    disabled={isLoading}
                    component={this.renderInput}
                    validate={[minLength8, maxLength15, required]}
                    onChange={(event, value) => this.setState({password: value})}
                />
                {isLoading && (
                    <ActivityIndicator style={styles.loading} size="large" animating={true} />
                )}
                <View style={{padding: 10}}>
                    <Button block} disabled={this.state.isLoading}>
                        <Text>Login</Text>
                    </Button>
                </View>
            </Form>
        );
        return <Login navigation={this.props.navigation} loginForm={form} />;
    }
}
const LoginContainer = reduxForm({
    form: "login",
})(LoginForm);
export default LoginContainer;

Answer 1

Use TextInput with onSubmitEditing you should also use KeyboardAvoidingView for example:

         <KeyboardAvoidingView>
                <TextInput
                    placeholder="Enter your Username"
                    returnKeyType="next"
                    onSubmitEditing={() => this.passwordInput.focus()}
                    keyboardType="email-address"
                    autoCapitalize="none"
                    autoCorrect={false}
                    style={styles.input}
                />
                <TextInput
                    placeholder="Enter your Password"
                    returnKeyType="go"
                    secureTextEntry
                    style={styles.input}
                    ref={(input) => this.passwordInput = input}
                />
       </KeyboardAvoidingView>