Nativebase: How can I set focus on specific input text with Redux Form v6

Created on 25 May 2017  路  1Comment  路  Source: GeekyAnts/NativeBase

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

>All comments

Pass the ref as ref={c => this.lastName = c} and you can use it as this.lastName._root.focus()

Was this page helpful?
0 / 5 - 0 ratings

Related issues

eggybot picture eggybot  路  3Comments

natashache picture natashache  路  3Comments

Bundas picture Bundas  路  3Comments

agersoncgps picture agersoncgps  路  3Comments

muthuraman007 picture muthuraman007  路  3Comments