How to select the next TextInput after pressing the "next" keyboard button in react native?

Steps:

1. Use ref to Control Focus
   
   Assign a ref to each TextInput to programmatically control focus.

2. Handle onSubmitEditing
   
   Use the onSubmitEditing event to focus the next input.

3. Set returnKeyType
   
   Set returnKeyType to "next" for intermediate fields and "done" for the last one.

4. Prevent Keyboard Dismissal
   
   Use blurOnSubmit={false} to keep the keyboard open while navigating.

---

Code Example:

import React, { useRef } from 'react';
import { TextInput, View, StyleSheet } from 'react-native';

const App = () => {
  const input1Ref = useRef(null);
  const input2Ref = useRef(null);
  const input3Ref = useRef(null);

  return (
    <View style={styles.container}>
      <TextInput
        ref={input1Ref}
        style={styles.input}
        placeholder="Input 1"
        returnKeyType="next"
        onSubmitEditing={() => input2Ref.current?.focus()}
        blurOnSubmit={false}
      />
      <TextInput
        ref={input2Ref}
        style={styles.input}
        placeholder="Input 2"
        returnKeyType="next"
        onSubmitEditing={() => input3Ref.current?.focus()}
        blurOnSubmit={false}
      />
      <TextInput
        ref={input3Ref}
        style={styles.input}
        placeholder="Input 3"
        returnKeyType="done"
        onSubmitEditing={() => console.log('Form submitted')}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', padding: 16 },
  input: { height: 50, borderColor: 'gray', borderWidth: 1, marginBottom: 10, paddingHorizontal: 10 },
});

export default App;

---

Key Properties:

1. ref: Links each TextInput to a reference for focus control.
2. onSubmitEditing: Triggers focus on the next field when the "Next" button is pressed.
3. returnKeyType: Sets the keyboard button type to "next" or "done".
4. blurOnSubmit: Prevents the keyboard from closing when moving to the next input.

Comments

[sa-bri-na]

Thank you for your great summary! I’d like to add something.

blurOnSubmit is now deprecated. You can use submitBehavior instead. Here’s how it works:

1. submitBehavior="submit"

• The return key triggers onSubmitEditing.
• The keyboard stays open, and the input does not lose focus unless you handle it manually.
• Best for navigating through multiple fields smoothly.

Example:

<TextInput
  ref={input1Ref}
  placeholder="First Input"
  returnKeyType="next"
  submitBehavior="submit"
  onSubmitEditing={() => input2Ref.current?.focus()} // Navigate to the next field
/>

2. submitBehavior="blurAndSubmit" (default for single-line inputs)

• The return key triggers onSubmitEditing and blurs the current input (loses focus).
• The keyboard closes unless another input gets focus immediately.
• Best for the final field in a form to submit and close the keyboard.

Example:

<TextInput
  ref={input2Ref}
  placeholder="Second Input"
  returnKeyType="done"
  submitBehavior="blurAndSubmit"
  onSubmitEditing={() => console.log("Form submitted")}
/>

Key Points

• Use submitBehavior="submit" for seamless navigation through inputs.
• Use submitBehavior="blurAndSubmit" when you want to finish editing and close the keyboard.

Hope this helps! 😊