react-native-form-focus-management

react-native-form-focus-management

Did you ever have to...

• Automatically focus the first input
• Submit the form when editing finishes on the last form
• Move focus to the next input when the next button is tapped
• De-focus all inputs

Then you know how much of a painful experience this is when working with a list or group of inputs in a form. react-native provides no existing abstraction to manage focus when working with multiple inputs at once.

react-native-form-focus-management gives you a set of tools to make this less painful. Less hacking with refs and a convenient way of manging focus in a form.

import { TextInput } from "react-native";

import { FocusableGroup } from "react-native-form-focus-management";

const MyForm = () => (
    <FocusableGroup
        onMount={context => {
            if (!context.isAnyFocused()) {
                // focus first input on mount
                context.focusables[0].focus();
            }

            // nah, changed my mind
            context.blurAll();
        }}
        onChildFocus={({ focusable, index }, context) => {
            console.log(`input at index ${index} got focus`);
        }}
        onChildBlur={({ focusable, index }, context) => {
            console.log(`input at index ${index} lost focus`);
        }}
        onChildSubmitEditing={({ focusable, index }, context) => {
            console.log(`input at index ${index} submitted`);

            // move focus to next
            context.focusables[index + 1].focus();
        }}
        onChildEndEditing={({ focusable, index }, context) => {
            console.log(`input at index ${index} finished edited`);
        }}
    >
        <TextInput />
        <TextInput />
        <TextInput />
    </FocusableGroup>
);

Other tools

AutoManagedFormFocus

AutoManagedFormFocus sits on top of FocusableGroup and implements some of the most common focus-related work in a form:

• Let the user navigate to the next field using the returnKey on the keyboard.
• Let the user submit the form using the returnkey on the keyboard.
• Automatically focus the first input.

import { TextInput } from "react-native";

import { AutoManagedFormFocus } from "react-native-form-focus-management";


const MyForm = () => {
    const [hasValidationErrors, setHasValidationErrors] = React.useState(false);

    const onKeyboardSubmit = React.useCallback(() => {
        console.log("user submitted form using keyboard!");
    }, []);

    return (
        <AutoManagedFormFocus
            nextReturnKeyType="next"
            submitReturnKeyType="go"
            doneReturnKeyType="done"
            isSubmittable={hasValidationErrors}
            onSubmit={onKeyboardSubmit}
        >
            <TextInput />
            <TextInput />
            <TextInput />
            <TextInput />
        </AutoManagedFormFocus>
    );
};