How to focus TextInput on button press in React Native

Question

I have a TextInput component, which is only editable on component mount. It should become editable and auto focused, when a button is pressed. As I understood it correctly, the autoFocus property only works on first mount. Is there any way to implement this on state change?

import { FunctionComponent } from 'react';
import { View, TextInput, TextInputProps } from 'react-native';


interface InputTextBoxProps {
  editingState: boolean;
}

type InputProps = TextInputProps & InputTextBoxProps;

const InputTextBox: FunctionComponent<InputProps> = ({editingState, ...props}) => {
  return (
    <View>
      <TextInput
        {...props}
        multiline={true} 
        style={styles.textStyle}
        editable={editingState}
        autoFocus={editingState}
      >
      </TextInput>
    </View>
  );
};

Does this answer your question? [How to set focus on an input field after rendering?](https://stackoverflow.com/questions/28889826/how-to-set-focus-on-an-input-field-after-rendering) — A G, Sep 09 '22 at 17:38

score 9 · Accepted Answer · answered Sep 09 '22 at 17:35

9

const refInput = React.useRef(null);
 ...
<TextInput
  {...props}
  ref={refInput}
  multiline={true} 
  style={styles.textStyle}
  editable={editingState}>
</TextInput>

on button click function

refInput.current.focus()

answered Sep 09 '22 at 17:35

mainak

1,886
2
9
19

Thanks this is working, but only if `editable` prop is true or not specified. – Nandor Krizbai Sep 09 '22 at 19:00
I also leave the extended solution as an answer too, which works perfectly – Nandor Krizbai Sep 09 '22 at 19:18

score 1 · Answer 2 · answered Sep 09 '22 at 19:24

Update

Here's the working solution, as if the editable prop seems to work only on component mount, so it won't change via state. This solution is built on mainak's answer.

import { FunctionComponent, useRef } from 'react';
import { View, StyleSheet, TextInput, TextInputProps } from 'react-native';

interface InputTextBoxProps {
  editingState: boolean;
}

type InputProps = TextInputProps & InputTextBoxProps;

const InputTextBox: FunctionComponent<InputProps> = ({editingState, ...props}) => {

  const refInput = useRef<TextInput>(null);

  if (editingState) {
    refInput.current?.focus();
  } else {
    refInput.current?.blur();
  }

  return (
    <View pointerEvents={editingState ? 'auto' : 'none'}>
      <TextInput
        {...props}
        ref={refInput}
        multiline={true}
      >
      </TextInput>
    </View>
  );
};

How to focus TextInput on button press in React Native

2 Answers2

Update