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

CodePudding user response：

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

on button click function

refInput.current.focus()

CodePudding user response：

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