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>
);
};
const refInput = React.useRef(null);
...
<TextInput
{...props}
ref={refInput}
multiline={true}
style={styles.textStyle}
editable={editingState}>
</TextInput>
on button click function
refInput.current.focus()