How to select the next TextInput after pressing the “next” keyboard button

See code on Github

Navigating between text fields using the keyboard is very convenient to improve the user experience in your apps. As more and more apps offer this kind of experience, it’s essential that you optimize your app to support interactions through the keyboard device.

It’s possible for Android users to navigate between Text fields using the keyboard, because Android enables most of the necessary behaviors by default. However, this is not a native iOS feature; even though, this is a feature in an iOS browser. The keyboard navigation buttons work automatically if you display an HTML form inside a WebView, but there is no API for displaying these buttons in native iOS apps.

In short, the iOS web browser gives us next and previous buttons. But, for a native iOS app, they aren’t present. And despite that Android does handle tab navigation, React Native doesn’t support them natively.

So What can we do?

There are many ways to do this. But, in this case, we will use refs.

Using refs

First of all, a ref, as the name says, is a reference to a React component. Typically props are the only way that a parent component interacts with their children. However, there are a few cases where you would need to modify a child outside the normal data flow.

It’s not recommended to overuse refs, and avoid them for anything that can be done declaratively. So even though your first inclination could be used refs, take a moment to think and read carefully when to use refs in the React docs.

When to use refs?

The React docs specify that there are a few good use cases for refs:

    >  Managing focus, text selection, or media playback.
    > Triggering imperative animations.
    > Integrating with third-party DOM libraries.

1. To define an object in the constructor method that we’ll pass as a prop:

     . . .
 constructor(props) {
   super(props);
   this.textInput = {};
}
     . . .

2. To add a handler method that will call the focus()method on the next textInput component.

     . . .
focusNextTextInput(id) {
   this.textInput[id].focus();
}
     . . .

3. To add a few of <TextInput/>, and define the onSubmitEditing callback, except on the last one.

        . . .
           {
              this.focusNextTextInput("two");
            }}
          />
           {
              this.focusNextTextInput("three");
            }}
          />
           {
              this.focusNextTextInput("four");
            }}
          />
        . . .
   

4. To define the ref param and specify a callback function to capture the referenced component from the arguments. In this example we’re storing each <TextInput/>’s ref on the textInput object that we’ve previously defined in the constructor.

        . . .
           {
              this.focusNextTextInput("two");
            }}
            ref={input => {
              this.textInput["one"] = input;
            }}
          />
           {
              this.focusNextTextInput("three");
            }}
            ref={input => {
              this.textInput["two"] = input;
            }}
          />
           {
              this.focusNextTextInput("four");
            }}
            ref={input => {
              this.textInput["three"] = input;
            }}
          />
           {
              this.textInput["four"] = input;
            }}
          />
        
        . . .
   

Is your Keyboard disappearing?

It’s possible that your keyboard hides and displays itself when you navigate to the next textInput, and it could be very annoying. Fortunately, we can avoid this by using a prop on TextInput called blurOnSubmit, this prop was introduced in react-native .22.

     . . .
       <TextInput
         ...
         blurOnSubmit={false}
         ...
       />
     . . .

If true, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. So, in other words, this property will force the keyboard to keep itself visible when the user presses ‘next’.

Learn more about MagmaLabs & check out our mobile department!