title: Why does the keyboard disappear after each key pressed in my react native app?
body: <p>The main portion of my code is below, and basically, it allows the user to pick a country and type their phone number in. Once the phone number is recognized as valid the color of the icon is changed. The only problem is that the keyboard continues to disappear each time a key on the number pad is pressed. Here is an example:</p>
  
  <p><a href="https://i.stack.imgur.com/B4Nvi.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B4Nvi.gif" alt="enter image description here"></a></p>
  
  <p>Here is the source code from the Phone Login Screen. Without the line <code>onChangePhoneNumber={ (phone) =&gt; {this.updateInfo()} }</code> the keyboard doesn't disappear as you type but then the next icon won't change to that shade of blue when a valid number is typed. That function updates the states as the user types. </p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Text, StyleSheet, TouchableOpacity, TextInput, Keyboard} from 'react-native';
  import { Icon } from 'react-native-elements';
  
  import KeyboardAccessory from 'react-native-sticky-keyboard-accessory';
  import PhoneInput from 'react-native-phone-input';
  
  export default class PhoneLogin extends Component {
  
      constructor() {
          super();
  
          this.state = {
              valid: "",
              type: "",
              value: "",
              iconColor: "#D3D3D3",
          };
  
          this.updateInfo = this.updateInfo.bind(this);
      }
  
      updateInfo() {
          this.setState({
              valid: this.phone.isValidNumber(),
              type: this.phone.getNumberType(),
              value: this.phone.getValue().replace(/[- )(]/g,''),
          });
      }
  
      render() {
          return (
            &lt;View style={styles.container}&gt;
              &lt;PhoneInput
                ref={ref =&gt; {
                  this.phone = ref;
                }}
                style={{height: 50, borderColor:'#44c0b9', borderBottomWidth:2}}
                onChangePhoneNumber={ (phone) =&gt; {this.updateInfo()} }
              /&gt;
  
              &lt;KeyboardAccessory backgroundColor="#fff"&gt;
                  &lt;View style={{ alignItems: 'flex-end', padding:10 }}&gt;
                      &lt;Icon
                          raised
                          reverse
                          color={(this.state.valid) ? "#44c0b9" : "#D3D3D3"}
                          name='arrow-right'
                          type='font-awesome'
                          onPress={ Keyboard.dismiss()}
                      /&gt;
                  &lt;/View&gt;
              &lt;/KeyboardAccessory&gt;
            &lt;/View&gt;
          );
      }
  
  }
  </code></pre>