ReactNative TextInput Focus

Question

I'm having a form in my application where I want the user to be able to go to the next TextInput by clicking the "Next" return button. My Input component:

 export default class Input extends Component { focusNextField = (nextField) => { console.log('NEXT FIELD:', nextField); this.refs[nextField].focus(); } render() { var keyboardType = this.props.keyboardType || 'default'; var style = [styles.textInput, this.props.style]; if (this.props.hasError) style.push(styles.error); return ( <View style={styles.textInputContainer}> <TextInput placeholder={this.props.placeholder} onChangeText={this.props.onChangeText} style={style} blurOnSubmit={false} ref={this.props.reference} returnKeyType= {this.props.returnType} onSubmitEditing={() => this.focusNextField(this.props.fieldRef)} secureTextEntry={this.props.isPassword} value={this.props.value} keyboardType={keyboardType} underlineColorAndroid="transparent" /> {this.props.hasError && this.props.errorMessage ? <Text style={{ color: 'red' }}>{this.props.errorMessage}</Text> : null} </View> ); } }

And how it is used:

<Input onChangeText={(email) => this.setState({ email })} value={this.state.email} returnType={"next"} reference={'1'} fieldRef={'2'} keyboardType="email-address" /> <Text style={{ color: '#fff', marginTop: 10, }}>Password</Text> <Input onChangeText={(password) => this.setState({ password })} value={this.state.password} returnType={"done"} reference={'2'} fieldRef={'2'} isPassword={true} />

But I get the error:

undefined is not an object (evaluating _this.refs[nextField].focus)

Custam · Accepted Answer · 2017-10-03 09:18:49Z

Not sure if you are still trying to do this but for anyone else who has the problem, please do the following :

Add this code to your imports (anywhere in your imports)

import { findNodeHandle } from 'react-native'; import TextInputState from 'react-native/lib/TextInputState'; export function focusTextInput(node) { try { TextInputState.focusTextInput(findNodeHandle(node)); } catch(e) { console.log("Couldn't focus text input: ", e.message) } };

Add the following lines to your constructor

this.focusNextField = this.focusNextField.bind(this); this.inputs = {};

Add the following function to your class

focusNextField(id) { this.inputs[id].focus(); }

Edit your TextInput as follow :

<TextInput onSubmitEditing={() => {this.focusNextField('two');}} ref={ input => {this.inputs['one'] = input;}} /> <TextInput onSubmitEditing={() => {this.focusNextField('three');}} ref={ input => {this.inputs['two'] = input;}} /> ....

Here is the source of that answer

Worked in 0.45 for me.

Collectives™ on Stack Overflow

ReactNative TextInput Focus

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related