TextInput loses focus after every keystroke react-native

Question

I have the following code (full example):

import React, { useState, useEffect } from 'react';
import { SafeAreaView, View, TextInput, Button, StyleSheet } from 'react-native';

const App = () => {
  const [textblocks, setTextblocks] = useState([]);
  const CreateTextBlockHandler = () => {
    let array = [...textblocks];
    array.push({text: ''});
    setTextblocks(array);
  };
  const SaveTextHandler = (index, text) => {
    let array = [...textblocks];
    array[index].text = text;
    setTextblocks(array);
  };
  const RenderTextInputs = () => {
      return textblocks.map((item, index) => {
        return (
          <View key={index}>
            <TextInput style={styles.textinput} placeholder="text" value={textblocks[index].text} onChangeText={value => SaveTextHandler(index, value)} />
          </View>
        );
      });
  };
  return (
    <SafeAreaView style={styles.pancontainer}>
      <RenderTextInputs />
      <Button title="Create textblock" onPress={CreateTextBlockHandler} />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  pancontainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  textinput: {
    width: 200,
    margin: 10,
    borderWidth: 1,
    borderColor: 'black'
  }
});

export default App;

How it works: I have a button to dynamically add a new textinput. This works. The problem is, for every character I enter in a textput, the focus is lost after every character.

I created a snack, you can test it here: https://snack.expo.io/BJcHxluyI.

I THINK I need to save the reference to the textinput somewhere, and then give the focus back to the textinput after every keystroke, but I don't know how to do that.

Alexander Vidaurre Arroyo · Accepted Answer · 2019-12-30 22:44:00Z

11

Change

return (
    <SafeAreaView style={styles.pancontainer}>
      <RenderTextInputs />
      <Button title="Create textblock" onPress={CreateTextBlockHandler} />
    </SafeAreaView>
  );

To

return (
    <SafeAreaView style={styles.pancontainer}>
      {RenderTextInputs()}
      <Button title="Create textblock" onPress={CreateTextBlockHandler} />
    </SafeAreaView>
  );

Or put RenderTextInputs outside App and pass data via props. With first syntax react treats RenderTextInputs as a component and, as it is nested in App, mounts it again on each App render.

answered Dec 30, 2019 at 22:44

Alexander Vidaurre Arroyo

2,24213 silver badges11 bronze badges

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

1 Comment

FreakyCoder Over a year ago

Thank you so much sir! This is what I am looking for.

Collectives™ on Stack Overflow

TextInput loses focus after every keystroke react-native

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related