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

#react #reactnative #javascript #ios

Steps:

Use ref to Control Focus

Assign a ref to each TextInput to programmatically control focus.
Handle onSubmitEditing

Use the onSubmitEditing event to focus the next input.
Set returnKeyType

Set returnKeyType to "next" for intermediate fields and "done" for the last one.
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:

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

DEV Community

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

Steps:

Code Example:

Key Properties:

Top comments (0)

Read next

Evaluating Medical Retrieval-Augmented Generation (RAG) with NVIDIA AI Endpoints and Ragas

Understanding Localhost Networking in iOS Simulator vs Android Emulator

Best Version Control Practices Every React Development Team Needs To Know

Possible to Do Panoramic Image Stitching in React Native?