Automatic Focusing For Text Inputs Based on returnKeyType

[mjensen6]

Introduction

Filling out forms is one of the essential cornerstones for the user experience in mobile applications. There are a lot of form toolkits out there, but to create a fully customizable form (that also doesn't rely on a third party dependency) the best React Native has to offer is the TextInput component. The capabilities are amazing already, but the techniques for focusing are still very basic and involve lots of moving parts including refs which can be a bit of a hassle especially in functional components (which seem to be overtaking the old class structure from what I can tell). I think it would be beneficial to automatically focus the next TextInput component when the returnKeyType is set to next.

Details

Forms can be lengthy and take up a lot of space on a page making their individual TextInputs hard to navigate to (or maybe I just have fat fingers). In most cases it makes a lot of sense just autofocus the first TextInput and then use the returnKeyType of next (which I assume to be the most popular) to navigate through the form. However to focus the next TextInput component in a form you need to leverage onSubmitEditing, ref, the useRef hook, and the useEffect hook. This results in creating lots of refs for long forms which the documentation says specifically not to do. I think that if a TextInput has a returnKeyType of next that the next child component should be focused automatically. If there was an instance where you wanted the next return key and didn't want to focus the next component you could just simply set the focusable option to false and the "focusing chain" would stop.

Discussion points

I've looked into this issue in multiple different places and still haven't really found something that works great with how I have setup my application. Maybe I am just lazy, but I think it only makes sense that if a user hits next on a TextInput they are going to want to focus the next component in almost every case. Linking this functionality to the returnKeyType could save some headaches and reduce the use of refs.

[AndreiCalazans]

The argument "user hits next on a TextInput they are going to want to focus the next component in almost every case." is valid. In most of my apps we also have this functionality coded and the ones that don't is just as being a bit sloppy.

However, I believe you can easily abstract this functionality with a Component library.

Implementing this at the native layer is a lot of work since you need to write this logic for each platform, thus it is best to have it in the JS layer.

The React Native Core repo should contain low level building blocks to enable all sorts of functionality. Implementing it in React Native Core isn't ideal since this is an assumption on how "next" returnKeyType should work.