title: blur <TextInput/> by tapping outside of it, doesn't work in react native
body: <p>I have <code>&lt;TextInput/&gt;</code> and I would like to get to blur it and toggle the keyboard when tapping outside the <code>&lt;TextInput/&gt;</code> I have tried <a href="https://stackoverflow.com/questions/29685421/hide-keyboard-in-react-native">this</a> solution but without any luck. </p>
  
  <pre><code>import React, { Component } from 'react'; import { AppRegistry, Dimensions, StyleSheet, Text, TouchableHighlight, View, Image, TextInput, ScrollView, Keyboard, TouchableWithoutFeedback } from 'react-native'; import { Button } from 'react-native-elements'; class CounterextendsComponent {
  
    render() {
      return (
        &lt;View
          style={styles.container}
          onPress={this.focusOff}
        &gt;
          &lt;TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}&gt;
            &lt;View&gt;
              &lt;TextInput
                ref="numberInput"
                id={this.props.id}
                style={styles.title}
                keyboardType='numeric'
                maxLength={2}
                value={this.state.keys.toString()}
                onChange={(event) =&gt; this.updateKeysWithInputHandler(event.nativeEvent.text)}
              /&gt;
            &lt;/View&gt;
          &lt;/TouchableWithoutFeedback&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>