title: Icons from react-native-vector-icons onpress needs to click twice to work
body: <p>I use react-native-vector-icons.</p>
  
  <ol>
  <li>Click the input</li>
  <li>Keyboard goes up</li>
  <li>When pressing the icon, icon doesn't trigger, the keyboard will go down first rather than the onpress method icon triggers while having the keyboard is on</li>
  </ol>
  
  <p>Expected Result would like a live chat, while keyboard is up submit icon will always trigger.</p>
  
  <p>I tried to enwrap it in scrollview with keyboardshouldpersisttaps and it doesn't work.</p>
  
  <pre><code> &lt;KeyboardAvoidingView
          behavior={Platform.OS === 'ios' ? 'padding' : null}
          style={{ flex: 1 }}
          keyboardVerticalOffset={64}
        &gt;
          &lt;View style={styles.slide} key={i}&gt;
            &lt;TouchableHighlight
              style={styles.video}
              onPress={this.handleDoubleTap}
              onLongPress={this.handlePlayAndPause}
            &gt;
              &lt;ViewportAwareVideo
                key={i}
                source={{ uri: firstVideoUri }}
                shouldPlay={this.state.shouldPlay}
                isLooping
                preTriggerRatio={-0.4} // default is 0
                retainOnceInViewport={false} // default is false
                style={styles.video}
                onPlaybackStatusUpdate={this._onPlaybackStatusUpdate}
                progressUpdateIntervalMillis={1000}
                resizeMode='contain'
                innerRef={ref =&gt; (this._videoRef = ref)}
                onViewportEnter={() =&gt; {
                  this.setState({ shouldPlay: true });
                }}
                onViewportLeave={() =&gt; {
                  this.setState({ shouldPlay: false });
                }}
              /&gt;
            &lt;/TouchableHighlight&gt;
  
            {this.state.shouldPlay ? null : (
              &lt;TouchableHighlight
                onPress={this.handlePlayAndPause}
                style={styles.pauseBtn}
              &gt;
                &lt;IconComponent name='play-circle' size={50} color='black' /&gt;
              &lt;/TouchableHighlight&gt;
            )}
  
            &lt;CopilotStep
              name='swipeUp'
              text='Swipe up to view next video'
              order={5}
            &gt;
              &lt;WalkthroughableView style={styles.topSection}&gt;
                &lt;Text style={styles.imageHeadingText}&gt;{product.name}&lt;/Text&gt;
                {product.short_description === '' ? null : (
                  &lt;HTML
                    html={product.short_description}
                    imagesMaxWidth={Dimensions.get('window').width}
                    containerStyle={styles.imageDescText}
                    baseFontStyle={styles.htmlStyle}
                  /&gt;
                )}
                &lt;CopilotStep
                  name='swipeRight'
                  text='Swipe right to view product details'
                  order={6}
                &gt;
                  &lt;WalkthroughableView
                    style={{
                      flexDirection: 'row',
                      flexWrap: 'wrap',
                      paddingHorizontal: 20,
                      paddingVertical: 5
                    }}
                  &gt;
                    {product.tags.map((value, index) =&gt; {
                      return (
                        &lt;Text key={index} style={styles.tagText}&gt;
                          {value.name.charAt(0) === '#'
                            ? value.name
                            : '#' + value.name}
                        &lt;/Text&gt;
                      );
                    })}
                  &lt;/WalkthroughableView&gt;
                &lt;/CopilotStep&gt;
                {product.total_sales &gt; 0 ? (
                  &lt;View
                    style={{
                      flexDirection: 'row',
                      flexWrap: 'wrap',
                      paddingHorizontal: 20,
                      paddingVertical: 5
                    }}
                  &gt;
                    &lt;Text style={styles.totalSales}&gt;
                      {product.total_sales +
                        (product.total_sales &gt; 100
                          ? '+ bought'
                          : ' bought in the last 24 hours')}
                    &lt;/Text&gt;
                  &lt;/View&gt;
                ) : null}
              &lt;/WalkthroughableView&gt;
            &lt;/CopilotStep&gt;
  
            &lt;View style={styles.bottomSection}&gt;
              &lt;View style={{ flex: 1, justifyContent: 'flex-end', height: 30 }}&gt;
                {this.state.messages.map((message, index) =&gt; (
                  &lt;React.Fragment key={index}&gt;
                    &lt;View
                      key={index}
                      style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                        marginHorizontal: 5,
                        marginVertical: 5,
                        paddingLeft: 10,
                        height: 20
                      }}
                    &gt;
                      &lt;Image
                        style={{ width: 20, height: 20, borderRadius: 20 / 2 }}
                        source={{ uri: 'https://picsum.photos/20/20' }}
                      /&gt;
                      &lt;Text
                        style={{
                          fontFamily: Constants.fontHeader,
                          marginHorizontal: 5,
                          color: '#007AFF'
                        }}
                      &gt;
                        {message.user.name}
                      &lt;/Text&gt;
                      &lt;Text
                        style={{
                          fontFamily: Constants.fontHeader,
                          marginHorizontal: 5,
                          color: 'white'
                        }}
                      &gt;
                        {message.text}
                      &lt;/Text&gt;
                    &lt;/View&gt;
                  &lt;/React.Fragment&gt;
                ))}
              &lt;/View&gt;
              &lt;CopilotStep
                name='chatOnFeed'
                text='Click here to chat on video feed'
                order={7}
              &gt;
                &lt;WalkthroughableTextInput
                  style={{
                    // position: 'absolute',
                    // bottom: 0,
                    // left: 0,
                    fontFamily: Constants.fontFamily,
                    marginBottom: 110,
                    marginHorizontal: 5,
                    marginVertical: 5,
                    paddingRight: 35,
                    paddingLeft: 20,
                    height: 35,
                    width: width - 60,
                    backgroundColor: 'white',
                    borderRadius: 25
                  }}
                  onChangeText={messageText =&gt; this.setState({ messageText })}
                  value={this.state.messageText}
                  placeholder='Share your thoughts'
                  placeholderTextColor='#9B9B9B'
                /&gt;
              &lt;/CopilotStep&gt;
  
              &lt;IconComponent
                style={{ position: 'absolute', bottom: 115, right: 10 }}
                name='arrow-right'
                size={25}
                color='black'
                onPress={product =&gt; this.sendMessage(product)}
              /&gt;
            &lt;/View&gt;
  
            &lt;View style={styles.iconBar}&gt;
              &lt;CopilotStep
                name='productDetail'
                text='Click here to got to product details'
                order={8}
              &gt;
                &lt;WalkthroughableText&gt;
                  &lt;IconComponent
                    style={styles.iconBarIcon}
                    name='shopping-cart'
                    size={iconSize}
                    color='white'
                    onPress={() =&gt; {
                      this.props.onViewProductScreen({ product });
                      this.setState({ shouldPlay: false });
                    }}
                  /&gt;
                &lt;/WalkthroughableText&gt;
              &lt;/CopilotStep&gt;
              &lt;Text style={styles.iconBarText}&gt;Shop&lt;/Text&gt;
              &lt;CopilotStep
                name='like'
                text='Click here to like this product'
                order={9}
              &gt;
                &lt;WalkthroughableText&gt;
                  &lt;Entypo
                    style={styles.iconBarIcon}
                    name='heart'
                    size={30}
                    color={this.state.isInWishList ? 'red' : 'white'}
                    onPress={() =&gt; {
                      this.state.isInWishList
                        ? this.props.removeWishListItem(product)
                        : this.props.addWishListItem(product);
  
                      this.setState(prevState =&gt; ({
                        isInWishList: !prevState.isInWishList
                      }));
                    }}
                  /&gt;
                &lt;/WalkthroughableText&gt;
              &lt;/CopilotStep&gt;
              &lt;Text style={styles.iconBarText}&gt;Like&lt;/Text&gt;
              &lt;CopilotStep
                name='share'
                text='Click here to share this product'
                order={10}
              &gt;
                &lt;WalkthroughableText&gt;
                  &lt;IconComponent
                    style={styles.iconBarIcon}
                    name='share'
                    size={iconSize}
                    color='white'
                    onPress={this.onShare}
                  /&gt;
                &lt;/WalkthroughableText&gt;
              &lt;/CopilotStep&gt;
              &lt;Text style={styles.iconBarText}&gt;Share&lt;/Text&gt;
              &lt;CopilotStep
                name='fullChat'
                text='Click here to view full chat'
                order={11}
              &gt;
                &lt;WalkthroughableText&gt;
                  &lt;IconComponent
                    style={[styles.iconBarIcon, { paddingTop: 4 }]}
                    name='message-circle'
                    size={iconSize}
                    color='white'
                    onPress={product =&gt; this.sendChat(product)}
                  /&gt;
                &lt;/WalkthroughableText&gt;
              &lt;/CopilotStep&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/KeyboardAvoidingView&gt;
      );
  </code></pre>
  
  <p>You can see my problem is on IconComponent after the WalkthroughableTextInput</p>