Focus Order

Focus Order

Focus Order and Refs Across Inputs

On a form, return should move to the next field and the last one should submit. TextInput exposes focus(), blur(), clear() and isFocused() through a ref, and submitBehavior="submit" keeps the keyboard open on return, so focus can jump without the keyboard closing. Keep many refs in one array, here refs = useRef<(TextInput | null)[]>([]), one per entry of FIELDS (Name, Street, City, Postcode):

src/demos/AddressForm.tsx: return moves focus down the form (excerpt)TSX

      {FIELDS.map((field, i) => {
        const last = i === FIELDS.length - 1;
        return (
          <TextInput key={field} ref={(el) => { refs.current[i] = el; }} style={ui.input}
            placeholder={field} autoFocus={i === 0} returnKeyType={last ? 'done' : 'next'}
            submitBehavior={last ? 'blurAndSubmit' : 'submit'}
            onFocus={() => console.log('focus:', field)}
            onSubmitEditing={() => last ? console.log('submit form')
                                        : refs.current[i + 1]?.focus()} />
        );
      })}

On the emulator, autoFocus opened the keyboard on Name, and four presses of return moved focus through Street, City and Postcode, then logged "submit form". In React 19 7,897 a callback ref may return a cleanup function, so the braces keep this one returning nothing. returnKeyType (or enterKeyHint) only changes the key's label.

MENU