Transfer focus to next TextInput [error = this2.refs.LastName.focus is not a function]

I want to transfer the focus of TextInput to next TextInput but it couldn't succeed.

My efforts :

set autofocus to true for focus TextInput

set returnType to next for add button next to the keyboard

and used onSubmitEditing for call event [which transfer focus to next TextInput]

this is my code

<View>
                    <Block width={width * 0.8}>
                      <Input
                        placeholder= 
                      {this.props.navigation.getParam("myJSON")}
                        style={{marginTop:20, borderRadius:30, 
                          borderWidth:3}}
                        onChangeText={FirstName => 
                        this.setState({FirstName})}

                        iconContent={
                          <Icon
                            size={16}
                            color={argonTheme.COLORS.ICON}
                            name="nav-right"
                            family="ArgonExtra"
                            style={styles.inputIcons}
                          />
                        }
                      returnKeyType = {"next"}

                      autoFocus = {true}

                      onSubmitEditing={(event) => { 
                      this.refs.LastName.focus(); 
                      }}
                      />
                    </Block>

                     <Block width={width * 0.8}>
                      <Input
                        ref='LastName'
                        placeholder= 
                          {this.props.navigation.getParam("myJSON1")}
                        style={{marginTop:20, borderRadius:30, 
                        borderWidth:3}}
                        onChangeText={LastName => this.setState({LastName})}
                        iconContent={
                          <Icon
                            size={16}
                            color={argonTheme.COLORS.ICON}
                            name="nav-right"
                            family="ArgonExtra"
                            style={styles.inputIcons}
                          />
                        }
                      />
                    </Block>

Error ==>

_this2.refs.LastName.focus is not a function

Solution

EDIT:

If you are using native-base library(Which I'm note sure of), You can set the reference of the input using the prop getRef:

<Input getRef={(Input)=>{this.LastName=Input}} />

and shift focus to it by calling the function this.LastName._root.focus().

Your debugged code:

<View>
  <Block width={width * 0.8}>
    <Input
      placeholder= 
    {this.props.navigation.getParam("myJSON")}
      style={{marginTop:20, borderRadius:30, 
        borderWidth:3}}
      onChangeText={FirstName => 
      this.setState({FirstName})}

      iconContent={
        <Icon
          size={16}
          color={argonTheme.COLORS.ICON}
          name="nav-right"
          family="ArgonExtra"
          style={styles.inputIcons}
        />
      }
    returnKeyType = {"next"}

    autoFocus = {true}

    onSubmitEditing={(event) => { 
      this.LastName._root.focus(); 
    }}
    />
  </Block>

  <Block width={width * 0.8}>
    <Input
      getRef={(Input)=>this.LastName=Input}
      placeholder= 
        {this.props.navigation.getParam("myJSON1")}
      style={{marginTop:20, borderRadius:30, 
      borderWidth:3}}
      onChangeText={LastName => this.setState({LastName})}
      iconContent={
        <Icon
          size={16}
          color={argonTheme.COLORS.ICON}
          name="nav-right"
          family="ArgonExtra"
          style={styles.inputIcons}
        />
      }
    />
  </Block>
</View>

If you're using the Native-Base library, this should work.

Older One: The ref prop should be a function with a parameter that returns nothing. How it is used commonly:

<TextInput ref={(ref)=>this.LastName=ref} />

Then you can shift focus to it using this.LastName.focus().

Your debugged code:

<View>
  <Block width={width * 0.8}>
    <Input
      placeholder= 
    {this.props.navigation.getParam("myJSON")}
      style={{marginTop:20, borderRadius:30, 
        borderWidth:3}}
      onChangeText={FirstName => 
      this.setState({FirstName})}

      iconContent={
        <Icon
          size={16}
          color={argonTheme.COLORS.ICON}
          name="nav-right"
          family="ArgonExtra"
          style={styles.inputIcons}
        />
      }
    returnKeyType = {"next"}

    autoFocus = {true}

    onSubmitEditing={(event) => { 
    this.LastName.focus(); 
    }}
    />
  </Block>

   <Block width={width * 0.8}>
    <Input
      ref={ref=>this.LastName=ref}
      placeholder= 
        {this.props.navigation.getParam("myJSON1")}
      style={{marginTop:20, borderRadius:30, 
      borderWidth:3}}
      onChangeText={LastName => this.setState({LastName})}
      iconContent={
        <Icon
          size={16}
          color={argonTheme.COLORS.ICON}
          name="nav-right"
          family="ArgonExtra"
          style={styles.inputIcons}
        />
      }
    />
  </Block>
</View>