title: React Native-Keyboard is not showing up
body: <p>I am learning React-Native and am having trouble getting the keyboard to pop up to enter text.</p>
  
  <p>I have tried looking through multiple docs and questions but can not seem to find a solution. I tried to change the <code>componentDidMount</code> function multiple times in order to try and make the keyboard pop up.</p>
  
  <p>Here is the Full File</p>
  
  <pre class="lang-py prettyprint-override"><code>    import React, {Component} from 'react';
      import {Image, View, StyleSheet, TouchableOpacity, Text, TextInput, ImageBackground, Button, Alert, Keyboard} from 'react-native';
      import {SearchBar} from 'react-native-elements';
      import {createStackNavigator, createAppContainer} from 'react-navigation';
      const styles = StyleSheet.create ({
          container: { // just for main screen if need be
              flex: 1,
              backgroundColor: '#fff0f5'
          },
          image: { // for time tree logo 
              width: 350,
              height: 450,
              flex: 1,
          },
          words: { // for any text
              margin: 15,
              height: 20,
              borderColor: '#7a42f4',
              borderWidth: 0,
              alignSelf: 'baseline',
              fontSize: 20,
              flex: 0
          },
          small: { // random too scared to get rid of
              alignItems: 'baseline',
              flex: 3,
          },
          info: { // for info button
              height: 50,
              width: 50,
              flex: 1,
              position: 'absolute',
              left: 300,
              bottom: 15,
          },
          panel: { // for panel that input stuff will lay on
              height: 200,
              width: 400,
              backgroundColor: 'rgba(4,22,66,0.5)',
              flex: 1,
              position: 'absolute',
              top: 200,
              right: 0,
          },
          boxA:{ // for taxon A
              height: 40,
              width: 200,
              backgroundColor: '#d3d3d3',
              position: 'absolute',
              top: 235,
              right: 150,
              borderRadius: 10,
              flex: 1,
          },
          boxB: { // for taxon B
              height: 40,
              width: 200,
              backgroundColor: '#d3d3d3',
              position: 'absolute',
              top: 315,
              right: 150,
              borderRadius: 10,
              flex: 1,
          },
          searchButton: {
              height: 30,
              width: 80,
              backgroundColor: '#d3d3d3',
              flex: 1,
              position: 'absolute',
              right: 25,
              top: 280,
              borderRadius: 10,
          },
          text: {
              fontSize: 20,
              textAlign: 'center',
          },
      });
  
      class SearchScreen extends Component&lt;Props&gt;{
          /* Functions for the keyboard */
          componentDidMount() {
              this.keyboardDidShowListener = Keyboard.addListener(
                  'keyboardDidShow',
                  this._keyboardDidShow,
              );
              this.keyboardDidHideListener = Keyboard.addListener(
                  'keyboardDidHide',
                  this._keyboardDidHide,
              );
          }
          componentWillUnmount() {
              this.keyboardDidShowListener.remove();
              this.keyboardDidHideListener.remove();
          }
  
          _keyboardDidShow() {
              alert('Keyboard Shown');
          }
  
          _keyboardDidHide() {
              alert('Keyboard Hidden');
          }
          /* End of KEyboard Functions */
          /* Functions for the input of the Taxa*/
          constructor(Props){
              super(Props);
              this.state = {taxonA : "", taxonB : ""};
          }
          handleTaxonA = (text) =&gt; {
              this.setState({ 
                  taxonA : text, 
              });
          }
          handleTaxonB = (text) =&gt; {
              this.setState({ 
                  taxonB : text, 
              });
          }
          searchHit = (taxonA,taxonB) =&gt; { // for debugging
              Alert.alert('Taxon A: '+ this.state.taxonA + '\nTaxon B: ' + this.state.taxonB)
          }
          _onPressButton() { // for debugging
              Alert.alert('You tapped the button!')
          }
          /* End of Input Functions */
          render(){
              return (
                  &lt;ImageBackground source = {require('../assets/images/TimeTreeSearch.png')} 
                  imageStyle = {{resizeMode: 'contain'}}
                  style = {{width: '100%', height: '100%'}}
                  &gt;
                      &lt;View style = {styles.panel}/&gt;
                      &lt;View style = {styles.boxA}&gt;
                          &lt;TextInput
                              style = {styles.words}
                              autoCapitalize = 'none'
                              onChangeText = {this.handleTaxonA}
                              placeholderTextColor = 'grey'
                              placeholder = 'Taxon A...'
                              autoFocus = {true}
                          /&gt;
                      &lt;/View&gt;
                      &lt;View style = {styles.boxB}&gt;
                          &lt;TextInput 
                              style = {styles.words}
                              autoCapitalize = 'none'
                              onChangeText = {this.handleTaxonB}
                              placeholderTextColor = 'grey'
                              placeholder = 'Taxon B...'
                          /&gt;
                      &lt;/View&gt;
                      &lt;TouchableOpacity
                      style = {styles.searchButton}
                      onPress= {this.searchHit}
                      &gt;
                          &lt;Text style = {styles.text}&gt;Search&lt;/Text&gt;
                      &lt;/TouchableOpacity&gt;
                      &lt;TouchableOpacity 
                      style = {styles.small}
                      hitSlop = {{top: -750, bottom: 15, right: 50, left: -275}}
                      onPress = {this._onPressButton}
                      &gt;
                          &lt;Image 
                          style = {styles.info}
                          resizeMode = 'contain'
                          source = {require('../assets/images/info2.png')} 
                          /&gt;
                      &lt;/TouchableOpacity&gt;
                  &lt;/ImageBackground&gt;
              );
          }
      }
  
      export default SearchScreen;
  </code></pre>
  
  <p>I should be getting the keyboard but I am instead getting an alert, I set up that says <code>Keyboard Hidden</code> instead.</p>