componentDidMount = () => {
console.log(this.refs.lastName.getRenderedComponent());
this.refs.lastName.getRenderedComponent().focus();
}
render() {
return (
<Grid containerStyle={{backgroundColor: '#fff'}}>
<Row size={3.5} containerStyle={styles.topContainer}>
<View>
<Field type="text" returnKeyType={"next"} ref="firstName" withRef
name="firstName" label="First Name" component={RenderField}/>
<Field last type="text" name="lastName" label="Last Name"
ref="lastName" withRef component={RenderField}/>
</View>
</Row>
</Grid>
)
}
// Render Field
import React from 'react';
import PropTypes from 'prop-types';
import {Text} from 'react-native';
import {Item, Input, Label} from 'native-base';
class RenderField extends React.Component {
render() {
const {input, label, type, meta: {touched, error, invalid, warning}, custom} = this.props;
let hasError = false;
if (error !== undefined) {
hasError = true;
}
return (
<Item floatingLabel error={hasError} style={{marginBottom: 20}}>
<Label>{label}</Label>
<Input {...input} {...custom}/>
{hasError ? <Text>{error}</Text> : <Text />}
</Item>
)
}
}
export default RenderField;
The console.log return properly but at this.refs.lastName.getRenderedComponent().focus(); it always return this error_this.refs.lastName.getRenderedComponent().focus is not a function.
How can I set focus on specific input text?
I'm using Redux Form v6 and Native Base v2
Ref: Stack Overflow
Pass the ref as ref={c => this.lastName = c} and you can use it as this.lastName._root.focus()