React-native-paper: TextInput.Focus is not working if i use Textinputmask in TextInput

[anveshreddy87]

Environment

"react-native": "0.57.8",
"react": "16.6.3",
"react-native-masked-text": "1.11.0",
"react-native-paper": "2.12.0",

Description

I tried to jump onto next Custom textinput by clicking on returnKeyType='next'....It's throwing an error...if it is normal textinput(moving from one textinput to nextinput by clicking onreturnKeyType='next'. ) focus() is working fine..but when i injected textinputmask it is breaking... please help me how to resolve..

Reproducible Demo

This flow is working fine

import { TextInputMask } from 'react-native-masked-text'
import { TextInput } from 'react-native-paper'

 <TextInput 
mode="outlined"
                ref='firstName'
                style={{marginVertical: Metrics.baseMargin * Metrics.screenWidth * 0.004,
marginRight: Metrics.baseMargin * Metrics.screenWidth * 0.022,
marginLeft: Metrics.baseMargin * Metrics.screenWidth * 0.004,}}
                label="First Name"
                theme={{
                  colors: {
                    primary: 'purple',
                    background: 'white
                  }
                }}
                value={this.state.firstName}
                keyboardType='default'
                returnKeyType='next'
                autoCorrect={false}
                autoCapitalize='words'
                onChangeText={(value) => this.handleRegistration('firstName', value)}
                onSubmitEditing={(event) => { this.refs.lastName.focus() }}
              />

<TextInput 
mode="outlined"
                ref='lastName'
                 value={this.state.lastName}
                    style={{marginVertical: Metrics.baseMargin * Metrics.screenWidth * 0.004,
    marginRight: Metrics.baseMargin * Metrics.screenWidth * 0.022,
    marginLeft: Metrics.baseMargin * Metrics.screenWidth * 0.004,}}
                label="Last Name"
                theme={{
                  colors: {
                    primary: 'purple',
                    background: 'white
                  }
                }}

                keyboardType='default'
                returnKeyType='next'
                autoCapitalize='words'
                onChangeText={(value) => this.handleRegistration('lastName', value)}
                onSubmitEditing={(event) => { this.refs.dateofBirth.focus() }}
              />

*This flow is throwing error**
(Regular TextInput-->Custom TextInput ---->Regular Text Input)

<TextInput 
mode="outlined"
                ref='lastName'
                 value={this.state.lastName}
                    style={{marginVertical: Metrics.baseMargin * Metrics.screenWidth * 0.004,
    marginRight: Metrics.baseMargin * Metrics.screenWidth * 0.022,
    marginLeft: Metrics.baseMargin * Metrics.screenWidth * 0.004,}}
                label="Last Name"
                theme={{
                  colors: {
                    primary: 'purple',
                    background: 'white
                  }
                }}

                keyboardType='default'
                returnKeyType='next'
                autoCapitalize='words'
                onChangeText={(value) => this.handleRegistration('lastName', value)}
                onSubmitEditing={(event) => { this.refs.dateofBirth.focus() }}
              />

                  <TextInput 
mode="outlined"
                    ref='dateofBirth'
                    render={props =>
                      <TextInputMask
                        {...props}
                        type={'custom'}
                        options={{
                          mask: "99/99/9999"
                        }}

                      />
                    }
                    value={this.state.dateOfBirthValue}
                    style={{marginVertical: Metrics.baseMargin * Metrics.screenWidth * 0.004,
    marginRight: Metrics.baseMargin * Metrics.screenWidth * 0.022,
    marginLeft: Metrics.baseMargin * Metrics.screenWidth * 0.004,}}
                    maxLength={10}
                    textInputStyle={{
                      flex: 1,
                      color: Colors.facebook,
                      fontSize: Fonts.size.input * Metrics.screenWidth * 0.0020
                    }}

                    label="Date of Birth"
                    theme={{
                      colors: {
                       primary: 'purple',
                    background: 'white
                      }
                    }}
                    keyboardType='phone-pad'
                    returnKeyType='done'
                    onChangeText={(value) => this.handleRegistration('dateOfBirth', value)}
                    onSubmitEditing={(event) => { this.refs.zipCode.focus() }}
                  />

 <TextInput mode="outlined"
                ref='zipCode'
                label="Zip Code"
                maxLength={5}
                theme={{
                  colors: {
                      primary: 'purple',
                    background: 'white
                  }
                }}
                 value={this.state.zipCode}
                    style={{marginVertical: Metrics.baseMargin * Metrics.screenWidth * 0.004,
    marginRight: Metrics.baseMargin * Metrics.screenWidth * 0.022,
    marginLeft: Metrics.baseMargin * Metrics.screenWidth * 0.004,}}
                onChangeText={(value) => this.handleRegistration('zipCode', value)}
                keyboardType='numeric'
                returnKeyType='done'
              />

[ferrannp]

@anveshreddy87 can you provide a Snack?

[anveshreddy87]

Hi,
here is the expo link: https://snack.expo.io/@anveshreddy8787/cGFwZX

Please find the complete repo in below path:
https://github.com/anveshreddy87/TextInputApp.git

[brunocrpontes]

Hi, @anveshreddy87 :)

1 - you're using a deprecated method to get refs, try use React.createRef instead.

2 - when you render a custom TextInput inside the TextInput from react-native-paper the refs aren't passed to his children. So you need to get the ref directly from TextInputMask, like this:

dateOfBirt = React.createRef();
[...]
<TextInput
...props
render={props => <TextInputMask {...props} ref={this.dateOfBirt} />}
/>

3 - If you read the documentation of TextInputMask, he says: "getElement(): return the instance of Text component."

So, to get the instance ref you need do:
onSubmitForm = () => this.dateOfBirt.current.getElement().focus()

I forked your snack reproduction and made the changes cited above to help you.
https://snack.expo.io/@brunocardosor/paper-textinput-refs

[Trancever]

@brunocrpontes Thanks for your suggestion!
@anveshreddy87 Does this solution from Bruno work for you, can we close the issue?

[anveshreddy87]

@brunocrpontes Thanks for the solution.
@Trancever It's working now as expected..thanks and we can close the issue