Keyboard closes after every keypress in TextInput react native

Question

I am working on a react-native app in which I am facing a problem with the TextInput.

Whenever I press a key on the keyboard, the keyboard closes down.

I have tried using different text input components like material text input and 'react-native-elements' input. However the same issue exists.

There are similar questions on stackexchange but they are all trying to fix this problem in TextInput. However, the problem is not in the TextInput but somewhere in the implementation of TextInput.

I have simplified the code to:

import React, {useState} from 'react';
import { Text, View, StyleSheet, TextInput } from 'react-native';

const App = () => {
  const [additionalComments, setAdditionalComments] = useState("");

  const StarFeedback = () => {
        return (
            <TextInput
              placeholder="Additional Comments"
              onChangeText={text => setAdditionalComments(text)}
              value={additionalComments}
            />
        )
  }
  

  return (
    <View>
      <StarFeedback/>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
});

Link to snack: https://snack.expo.dev/@rachitkohli/634602

score 2 · Answer 1 · answered Dec 16 '21 at 18:34

import React, {useState, useCallback} from 'react';
import { Text, View, StyleSheet, TextInput } from 'react-native';

  const Aux = () => {
    const [additionalComments, setAdditionalComments] = useState("");

    const handleAdditionalCommentsChanged = (text) => {
      setAdditionalComments(text);
    };

        return (
          <View >
            <TextInput
              placeholder="Additional Comments"
              onChangeText={handleAdditionalCommentsChanged}
              value={additionalComments}
            />
          </View>
        )
  }
  

const App = () => {

  return (
    <View>
      <Aux/>
    </View>
  );
};

export default App;

Aux component is declared inside App component and additionalComments is state of App component, so it is getting refreshed every time as the prop passed to it is changing.

score 0 · Answer 2 · answered Dec 16 '21 at 15:29

You shouldn't use the value attribute on each input. It's better (less re-renders) to use a useRefand make use the onEndEditing to store the value.


import React, {useState, useRef, useCallback } from 'react';
import { Text, View, StyleSheet, TextInput, } from 'react-native';

const App = () => {
    const [additionalComments, setAdditionalComments] = useState("");

    const inputEl = useRef(null);


    const handleInputSubmit = useCallback((ev) => {
        const input =  ev.nativeEvent.text;

    // validate all you want here

      setAdditionalComments(input)
    }, [setAdditionalComments]);

    const Aux = () => {
        return (
            <View style={{marginTop: 100}}>
                <TextInput
                    ref={ inputEl }
                    placeholder="Additional Comments"
                    onEndEditing={ handleInputSubmit }
                    defaultValue={additionalComments}
                />
            </View>
        )
  }
  
...

This way the component will only be update WHEN the user finishes the input.

You could use the onChange to show a warning label for example (or for pre-fetching a search result, etc). But it's not worth to set a state on each key input.

Thanks for the answer João. Your answer is working however the user would have to submit every time he puts an input. That's an additional step for the user. However, I would like to use onChangeText to make the user proceed without using the submit button on the keyboard. But when I use onChangeText I face the same issue of keyboard getting closed. Can you please tell me how can I fix it? Thanks!! — rachit7, Dec 16 '21 at 17:08
Just change the `onEndEditing` to a `onChangeText` on the TextInput component. As the name suggest: one run at the end and one runs everytime the user changes it's input. You can use the `handleInputSubmit` in my answer as a starting point — Joao Oliveira Rocha, Dec 20 '21 at 00:38

Keyboard closes after every keypress in TextInput react native

2 Answers2