title: Need to double press to release focus on Text Input from within a Modal with KeyboardAvoidingView
body: <p>I have a Modal wrapping a KeyboardAvoidingView wrapping a few animated components. One of them is a TextInput and the other is a Button. When clicking on the button, keyboard is first hidden, and then need to click once again to reach the buttons "onPress"</p>
  
  <p>Looked into the solution of wrapping the components with a scroll view and using a the prop keyboardShouldPersistTaps={'always'} but that doesn't work.</p>
  
  <pre><code>  constructor(props) {
      super(props);
      this.paddingInput = new Animated.Value(0);
      this.state = {
          modalVisible: false,
          otherTip: '',
      }
  }
  
    renderHoveringNote = () =&gt; {
      const {total, currentTipPercent} = this.props.rootStore.orderStore;
      return (
          &lt;View&gt;
              &lt;KeyboardAvoidingView style={{flex: 1}}&gt;
                  &lt;Animated.View style={{
                      marginBottom: this.paddingInput,
                      flex: 1
                  }}&gt;
                      &lt;View&gt;
                          &lt;Text&gt;Enter custom amount&lt;/Text&gt;
                      &lt;/View&gt;
                      &lt;TextInput                  
                          onChangeText={value =&gt; {
                              this.setState({otherTip: value})
                          }}
                          autoFocus
                          value={this.state.otherTip}
                      /&gt;
                       &lt;Button title='Save'
                        onPress={()=&gt;{
                              ...do some stuff here
                              this.setState({modalVisible: false});
                              Keyboard.dismiss();
                   }}
                  &lt;/Animated.View&gt;
  
              &lt;/KeyboardAvoidingView&gt;
          &lt;/View&gt;
      )
  };
  
  
    renderOtherTipModal = () =&gt; {
      return (
          &lt;Modal
              isVisible={this.state.modalVisible}
             onBackdropPress{()=&gt;this.setState({modalVisible:false})}
              style={{margin: 0, flex: 1}}
              hideModalContentWhileAnimating={true}
          &gt;
              {this.renderHoveringNote()}
          &lt;/Modal&gt;
      )
  };
  </code></pre>
  
  <p>One click should reach the onPress of the button</p>