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? — A G
– A G, Commented Sep 9, 2022 at 17:38

mainak · Accepted Answer · 2022-09-09 17:35:19Z

13

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 9, 2022 at 17:35

mainak

2,3312 gold badges12 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nandor Krizbai · Accepted Answer · 2023-09-30 18:09:19Z

Update

Here's the working solution, as 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>
  );
};

possum · Accepted Answer · 2023-12-02 19:54:22Z

0

You can use autoFocus which works fine for me

const [focusedInput, setFocusedInput] = useState(false);

<TextInput
     placeholder="Search Manifest ID"
     style={styles.SearchInput}
     placeholderTextColor={'#808080'}
     value={search}
     onChangeText={setSearch}
     onSubmitEditing={() => { onSubmitted(); }}
    autoFocus={focusedInput} // here its working for me
/>

edited Dec 2, 2023 at 19:54

possum

2,9667 gold badges19 silver badges24 bronze badges

answered Nov 30, 2023 at 14:46

Jasim Khan

276 bronze badges

Collectives™ on Stack Overflow

How to focus TextInput on button press in React Native

3 Answers 3

Comments

Update

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Update

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related