CODEWITHSUNDEEP
typescriptreact-native
Nandor Krizbai
Nandor Krizbai

Reputation: 123

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

Upvotes: 3

Views: 11856

Answers (3)

Jasim Khan
Jasim Khan

Reputation: 27

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
/>

Upvotes: 0

Nandor Krizbai
Nandor Krizbai

Reputation: 123

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

Upvotes: 2

mainak
mainak

Reputation: 2301

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

on button click function

refInput.current.focus()

Upvotes: 13

Related Questions