title: Issue: React-Native - Keyboard closes on each keystroke for TextInput
body: <p>Full disclaimer upfront for this one - I've been working with react native for around a week or two, and I suspect that I've encountered this issue without fully understanding why!</p>
  
  <p><strong>Issue:</strong> On each keystroke within a TextInput field, the keyboard closes automatically and only records the first keystroke.</p>
  
  <p><strong>Situation:</strong> I am using a prefefined array as the default for useState. The TextInput fields are called using .map() based on the current state. The onChangeText() updates the sate to capture changes to the array. The state is updated with each keystroke.</p>
  
  <p><strong>Things Tried:</strong></p>
  
  <ol>
  <li>Adding/removing Key to different components used in .map()</li>
  <li>Adding keyboardShouldPersistTaps='handled' to the ScrollView that the .map() is called in, including all other variations avaialble</li>
  </ol>
  
  <p><strong>Does anyone know what is causing the keyboard to close on each keystroke, and how I can prevent this from happening whilst continuing to capture changes to the TextInput fields in the main state?</strong></p>
  
  <p>Snippet below of the code I'm working on (I've removed some of the unrelated detail):</p>
  
  <pre><code>import React, { useState } from 'react';
  import {
    View,
    Text,
    Button,
    TextInput,
    SectionList,
    SafeAreaView,
    TouchableOpacity,
    ScrollView,
    Modal,
  } from 'react-native';
  import { Picker} from '@react-native-community/picker';
  
  
  
  //import custom components
  
  import { styles, Break } from './MasterStyles';
  import { inputData, ingredients } from './inputData';
  
  
  
  function addNewLoaf() {
  
    const [ingredientsList, setIngredientsList] = useState(ingredients);
    const [selectedLoaf, setSelectedLoaf] = useState('Regular Loaf');
    const [flourModalVisibility, setFlourModalVisibility] = useState(false);
    const [newLoaf, setNewLoaf] = useState('');
  
    function IngredientsRecorder() {
  
      return (
        &lt;View style={styles.ingredientsContainer}&gt;
          &lt;View style={{flexDirection: 'column'}}&gt;
            &lt;View&gt;
              &lt;Text style={styles.metricTitle}&gt;
                Volume of Ingredients:
              &lt;/Text&gt;
            &lt;/View&gt;
            {
              ingredientsList.map(e =&gt; {
                if(e.isVisible &amp;&amp; e.ingredient){
                  return (
                    &lt;View style={{flexDirection: 'row', alignItems: 'center'}} key={e.id}&gt;
                      &lt;View style={{flex:2}}&gt;
                        &lt;Text style={styles.metricText}&gt;{e.name}:&lt;/Text&gt;
                      &lt;/View&gt;
                      &lt;View style={{flex:3}}&gt;
                        &lt;TextInput
                          placeholder='amount'
                          style={styles.inputText}
                          keyboardType='number-pad'
                          value={e.amount}
                          onChangeText={value =&gt; ingredientsAmountHandler(value, e.id)}
                        /&gt;
                      &lt;/View&gt;
                      &lt;View style={{flex:1}}&gt;
                        &lt;Text style={styles.ingredientsText}&gt;{e.units}&lt;/Text&gt;
                      &lt;/View&gt;
                    &lt;/View&gt;
                  )
                }
              })
            }
          &lt;/View&gt;
        &lt;/View&gt;
      )
    }
  
  
  
    const ingredientsAmountHandler = (text, id) =&gt; {
      // setAmount(enteredText);
  
      let newArray = [...ingredientsList]
      let index = newArray.findIndex(element =&gt; element.id === id)
  
      newArray[index].amount = text
      setIngredientsList(newArray)
    }
  
  
    return (
      &lt;SafeAreaView style={styles.container}&gt;
        &lt;View style={styles.page}&gt;
          &lt;Text style={styles.titleText}&gt;Add a New Loaf&lt;/Text&gt;
          &lt;Break /&gt;
          &lt;View style={{flexDirection: 'row'}}&gt;
            &lt;TextInput 
              placeholder='What would you like to call your loaf?' 
              style={styles.inputText}
              onChangeText={loafNameInputHandler}
              value={newLoaf}
            /&gt;
            &lt;Button title='Create Loaf' color='#342e29' onPress={addNewLoafHandler} /&gt;
          &lt;/View&gt;
          &lt;Break /&gt;
          &lt;ScrollView styles={styles.page} keyboardShouldPersistTaps='handled'&gt;
            &lt;LoafSelector /&gt;
            &lt;FlourSelector /&gt;
            &lt;IngredientsRecorder /&gt;
          &lt;/ScrollView&gt;
        &lt;/View&gt;
        &lt;Break /&gt;
      &lt;/SafeAreaView&gt;
    );
  }
  
    export { addNewLoaf }
  </code></pre>