Primary Objective: I aim to have two text inputs where pressing return on the first one will shift the focus to the next input.
Let's begin with the configuration (using TypeScript).
I have a customized text input with specific color settings, and I am utilizing forwardRef to pass the reference if provided. From what I have gathered, this seems to be the correct approach, but there may be room for improvement.
export type TextInputProps = ThemeProps & RNTextInput['props'];
export const TextInput = React.forwardRef<RNTextInput, TextInputProps>((props, ref) => {
...
return <RNTextInput style={[{ backgroundColor, color }, style]} {...otherProps} ref={ref} />;
}
Now, on my interface, I am implementing this component, and upon completing the first input, I want the focus to shift to the next one. The code snippet looks like this:
const secondInput = React.useRef<typeof TextInput>();
const handleFirstInputComplete = () => {
secondInput.current.focus() // This does not work
}
...
<TextInput onSubmitEditing={handleFirstInputComplete} ...>
<TextInput ... ref={secondInput}> //This also raises an error
Any suggestions on accomplishing this effectively in functional components with custom components and TypeScript?
A sample interactive demonstration is available at this link if you would like to see the complete setup in action.