next and go in Form don't work (React Native and native-base)

Question

I'm using native-base's form to handle user's username and password.

When I press next or go from keyboard, it doesn't move cursor to the next or doesn't submit the inputs. How can we fix this?

import { Form } from 'native-base';
<Form style={styles.formStyle}>
    <AuthFieldInput
        placeholder="Username or Email"
        value={this.state.username}
        onChangeText={username => this.setState({username})}
        returnKeyType="next"/>
    <AuthFieldInput
        placeholder="Password"
        value={this.state.password}
        onChangeText={password => this.setState({password})}
        secureTextEntry
        returnKeyType="go"/>
</Form>

Here is <AuthField> render function

import { Item, Label, Input, Text } from 'native-base';
<Item>
  <Input
    value={value}
    onChangeText={onChangeText}
    placeholder={placeholder}
    autoCorrect={false}
    secureTextEntry={secureTextEntry}
    returnKeyType={returnKeyType}
  />
</Item>

Thank you!

From looking at the native-base docs, returnKeyType is not supported — ShaneG, Dec 19 '17 at 16:20
Thanks for pointing out! But native-base's Input is inherited from TextInput. https://facebook.github.io/react-native/docs/textinput.html#returnkeytype https://docs.nativebase.io/Components.html#Form — merry-go-round, Dec 19 '17 at 16:23

score 4 · Answer 1 · answered Aug 26 '18 at 10:44

I was getting error as "_this2.refs.password.focus" is not a function on onSubmitEditing of TextInput.

This is how I fixed it:

Upgraded package for native-base "^2.4.2” to native-base "^2.7.1”.
Sharing my sample code below:

<Item floatingLabel>
  <Label>Mobile Number</Label>
  <Input
    onChangeText = {(phone) => this.setState({phone})}
    value = {this.state.phone}
    autoCapitalize="none"
    keyboardType='numeric'
    returnKeyType={"next"}
    maxLength = {10}
    onSubmitEditing={(event) => this._password._root.focus()}
  />
</Item>

<Item floatingLabel>
  <Label>Password</Label>
  <Input
    getRef={(c) => this._password = c}
    onChangeText = {(password) => this.setState({password})}
    value={this.state.password}
    autoCapitalize="none"
    returnKeyType={"done"}
    secureTextEntry={this.state.hiddenPassword}
    onSubmitEditing = {this.handleLogin}
  />
</Item>

<TouchableOpacity>
  <Button style={styles.Button}
    onPress={this.handleLogin.bind(this)}>
    <Text style={styles.buttonText}>
      LOGIN
    </Text>
  </Button>
</TouchableOpacity>

Thanks suprabha, this was really helpful. – Karan Verma Aug 26 '18 at 10:45 — Karan Verma, Aug 26 '18 at 10:45

Joel Jaime · Accepted Answer · 2017-12-19T18:39:40.520

This is basically a TextInput Wrapper from React Native, if what you want to do is that when you press the "next" button, go to the other input you should do the following.

// <AuthField> render function
<Item>
    <Input
        value={value}
        onChangeText={onChangeText}
        placeholder={placeholder}
        autoCorrect={false}
        secureTextEntry={secureTextEntry}
        returnKeyType={returnKeyType}
        { ...this.props }
    />
</Item>

And in your Component you can use it in this way:

// Other render
<Form style={styles.formStyle}>
    <AuthFieldInput
        placeholder="Username or Email"
        value={this.state.username}
        onChangeText={username => this.setState({username})}
        returnKeyType="next"
        onSubmitEditing={() => { 
            this.refs.passwowrd.focus(); 
        }}
    />
    <AuthFieldInput
        ref='password'
        placeholder="Password"
        value={this.state.password}
        onChangeText={password => this.setState({password})}
        secureTextEntry
        returnKeyType="go"
        />
</Form>

Update: Please check the documentation about this feature https://facebook.github.io/react-native/docs/textinput.html#onsubmitediting

score 1 · Answer 3 · answered Dec 19 '17 at 16:41

1

It seems that those return types do not do that. This question was asked before also:

React Native: How to select the next TextInput after pressing the "next" keyboard button?

Maybe it can be of some help to you!

answered Dec 19 '17 at 16:41

ShaneG

1,498
7
16

next and go in Form don't work (React Native and native-base)

3 Answers3