Working with an array of refs in React

This is how you’d tap “next” to select the next TextInput when you have an arbitrary amount of inputs

function Container({ items }) {
  const inputRef = useRef<TextInput[]>([]);
  return (
    <View>
      {items.map((item, index) => (
        <TextInput
          key={item.id}
          ref={(node) => {
            if (node) {
              inputRef.current[index] = node;
            }
          }}
          onSubmitEditing={() => {
            const next = inputRef.current[index + 1];
            if (next) {
              next.focus();
            }
          }}
        />
      ))}
    </View>
  );
}

Say that you create a custom TextInput called MyCustomTextInput, you’ll have to forward the ref:

const CustomTextInput = forwardRef((props, ref) => {
  return <TextInput ref={ref} {...props} />;
});

function Container({ items }) {
  const inputRef = useRef<TextInput[]>([]);
  return (
    <View>
      {items.map((item, index) => (
        <CustomTextInput
          key={item.id}
          ref={(node) => {
            if (node) {
              inputRef.current[index] = node;
            }
          }}
          onSubmitEditing={() => {
            const next = inputRef.current[index + 1];
            if (next) {
              next.focus();
            }
          }}
        />
      ))}
    </View>
  );
}

That should do it!