react-native-masked-text: Error while trying to focus TextInputMask

I want to focus on TextInputMask, while user is clicking next button in the previous TextInput, when I’m trying to do it, I’m getting an error, how is possible to focus TextInputMask programmatically?

Here is my code:

 <TextInput
                        style={styles.input}
                        placeholder='Last Name*'
                        ref={lastNameRef => this.lastNameRef = lastNameRef}
                        returnKeyType='next'
                        onSubmitEditing={() => this.phoneRef.focus()}
                        placeholderTextColor='#B1B1B1'
                        onChangeText={ text => this.onChangeLastName('lastName', text) }
                    /> 
 <TextInputMask
                        style={styles.input}
                        placeholder='Phone*'
                        ref={phoneRef => this.phoneRef = phoneRef}
                        returnKeyType='next'
                        type={'custom'}
                        value={this.state.phoneNumber}
                        options={{
                            mask: '(999) 999-9999'
                          }}
                          onChangeText={
                            text => this.onChangePhone('phoneNumber', text)
                        }
                    ></TextInputMask>

About this issue

Original URL
State: open
Created 5 years ago
Comments: 24 (3 by maintainers)

Most upvoted comments

Hey there, I’m also having trouble with maked input and refs. In my case I’m attaching the ref like this:

 valueInputRef = React.createRef();
 <MaskedInput
   ref={valueInputRef}
   type="money"
   { ...otherProps }
  />

Logging the ref out I get this:

The same result happens if I just log the ref out like this:

 <MaskedInput
   ref={ref => { console.log(ref) }}
   type="money"
   { ...otherProps }
  />

No “focus” property is found in current, but it’s found in _inputElement, so if I call it this.valueInputRef.current._inputElement.focus(); it does work.

I’m using RN 0.58.5, masked-text 1.12.3;

+47

ammichael on May 18, 2019

Hi @Luckygirlllll could you check this sample?

<View style={container}>
  <Text>Focusing next input</Text>
  <TextInput
    value={this.state.name}
    onChangeText={name => {
      this.setState({
        name
      })
    }}
    onSubmitEditing={() => {
      this._cpfRef.getElement().focus()
    }}
    placeholder='Name'
  />
  <TextInputMask
    ref={ref => this._cpfRef = ref}
    type={'cpf'}
    value={this.state.cpf}
    onChangeText={text => {
      this.setState({
        cpf: text
      })
    }}
    placeholder='Cpf'
  />
</View>

+47

bhrott on May 10, 2019

Use refInput instead of ref

+43

RageOfJustice on Jul 15, 2019

For Typescript users:

let ref_name = useRef<TextInput>(null); let ref_cnpj = createRef<any>();

<TextInput style={styles.input} placeholder="placeholder" autoCorrect={false} value={name} onChangeText={setName} ref={ref_name} returnKeyType='next' onSubmitEditing={() => ref_cnpj.current?._inputElement.focus()} />

<TextInputMask type={'cnpj'} style={styles.input} placeholder="CNPJ" autoCorrect={false} value={cnpj} onChangeText={setCnpj} ref={ref_cnpj} /> `

+11

marceloambarc on Apr 7, 2021

Ref InputTextMask better way onSubmitEditing={() => phoneField.current.getElement().focus()}

willnrf on Mar 12, 2020

Hello, I did like this:

react: 16.9.0 react-native: 0.61.2

refTelehone = React.createRef()
refCellPhone = React.createRef()

cellPhoneFocus = () => {
    if(this.refCellPhone.current) {
          this.refCellPhone.current._inputElement.focus()
    }
}

<LabelInput
    returnKeyType='next'
    haveMask={true}
    typeMask='custom'
    maskCustom='(99) 9999-9999'
    value={this.state.telephoneValue}
    innerRef={this.refTelehone}
    onSubmitEditing={this.cellPhoneFocus}
/>

// component
<TextInputMask
    type={this.props.typeMask}
    options={{ mask: this.props.maskCustom }}
    onChangeText={this.props.onChangeText}
    ref={ref => this.props.innerRef = ref}
    onSubmitEditing={this.props.onSubmitEditing}
 />

The problem is that when I click Next, it does not focus on the next entry, could anyone help?

doponalopes on Oct 11, 2019

thanks @ammichael it works

remmcal on Aug 8, 2019