typescriptreact-native

How to focus TextInput on button press in React Native


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>
  );
};

Solution

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

    on button click function

    refInput.current.focus()