Can't focus on TextInputMask if customTextInput is defined

[vgeorge]

I'm passing an Input from native-base as the customTextInput parameter of a TextInputMask:

<Item>
  <Label>Sobrenome</Label>
  <Input
    value={lastName}
    ref='lastNameInput'
    autoCapitalize='words'
    returnKeyType='next'
    onSubmitEditing={() => { this.refs.dateOfBirthInput.getElement().focus() }}
    onChangeText={text => this.onChangeField('lastName', text)}
  />
</Item>
<Item>
  <Label>Data de Nascimento</Label>
  <TextInputMask
    ref='dateOfBirthInput'
    type='datetime'
    returnKeyType='next'
    options={{
      format: 'DD/MM/YYYY'
    }}
    customTextInput={Input}
  />
</Item>

The code above raises a function is not defined error. If I remove the customTextInput={Input} it can focus fine. The only workaround I've found is calling this:

this.refs.dateOfBirthInput.refs['$input-text']._root.focus()

But the keyboard do not show, so it is not a proper fix.

[bhrott]

Hi, Sorry for the time, I was killing zombies...

I tried this code:

import React, { Component } from 'react';
import { Container, Header, Content, Form, Item, Input, Label } from 'native-base';
import { TextInputMask } from 'react-native-masked-text';

export default class FormExample extends Component {
  constructor(props) {
    super(props)

    this.state = {
      lastName: ''
    }
  }

  onChangeField(field, value) {
    let newState = {}
    newState[field] = value

    this.setState(newState)
  }

  _onLastNameSubmitted() {
    const el = this.refs.dateOfBirthInput.getElement()
    // el.focus()
    el._root.focus()
  }

  render() {
    return (
      <Container>
        <Header />
        <Content>
          <Form>
            <Item>
              <Label>Sobrenome</Label>
              <Input
                value={this.state.lastName}
                ref='lastNameInput'
                autoCapitalize='words'
                returnKeyType='next'
                onSubmitEditing={() => { this._onLastNameSubmitted() }}
                onChangeText={text => this.onChangeField('lastName', text)}
              />
            </Item>
            <Item>
              <Label>Data de Nascimento</Label>
              <TextInputMask
                ref='dateOfBirthInput'
                type='datetime'
                returnKeyType='next'
                options={{
                  format: 'DD/MM/YYYY'
                }}
                customTextInput={Input}
              />
            </Item>
          </Form>
        </Content>
      </Container>
    );
  }
}

And it's works fine:

Reopen this issue if you have some other problem.

[syedamirali14]

not working on functional components