title: react-native nested ScrollView fails to respond to touch in android
body: <p>I'm building a 'Search' component, in which a ScrollView is displayed when the search terms in the TextInput return related tags from the API endpoint. While running in iOS the component works as expected and allows me to scroll through the list and select an option. However, android does not seem to allow scroll or touch events on the ScrollView component. I've decorated the component with the keyboardShouldPersistTaps="always" and nestedScrollEnabled={true}.</p>
  
  <p>Attempted placing the ScrollView at different levels of the overall screen. When close to the top level View, the ScrollView works as intended, but at a certain depth, it ceases to work. Having the ScrollView higher up in the component would require a lot of calculation based on the onLayout events of each nested View in order for the component to match designs, so I'd like to avoid it if possible.</p>
  
  <pre><code>&lt;ScrollView
      style={Style.view}
      contentContainerStyle={Style.container}
      keyboardShouldPersistTaps="handled"
  &gt;
      &lt;TouchableOpacity
          onPress={this.onClose}
            style={Style.close}
            hitSlop={{
              top: 16,
              right: 16,
              bottom: 16,
              left: 16,
            }}
          &gt;
            &lt;Icon
              name="times"
              size={24}
              color={Palette.$color_white}
            /&gt;
          &lt;/TouchableOpacity&gt;
          &lt;Animated.View style={[Style.animatedWrapper, { transform: [{ translateY }] }]}&gt;
            &lt;View style={Style.tags}&gt;
              {
                tags.map(tag =&gt; (
                  &lt;View key={tag.guid} style={Style.tag}&gt;
                    &lt;Strong color={Palette.$color_white}&gt;{tag.name}&lt;/Strong&gt;
                    &lt;TouchableOpacity
                      style={Style.tagButton}
                      onPress={() =&gt; this.onTagPress(tag)}
                      hitSlop={{
                        top: 16,
                        right: 16,
                        bottom: 16,
                        left: 16,
                      }}
                    &gt;
                      &lt;Icon name="times" size={14} color={Palette.$color_white} /&gt;
                    &lt;/TouchableOpacity&gt;
                  &lt;/View&gt;
                ))
              }
            &lt;/View&gt;
            &lt;View style={Style.searchWrapper} onLayout={this.onLayout}&gt;
              &lt;Image
                source={Buzz}
                style={Style.illustration}
              /&gt;
              &lt;View style={Style.inputWrapper}&gt;
                &lt;Heading
                  level={3}
                  color={Palette.$color_white}
                &gt;
                  Search by key words
                &lt;/Heading&gt;
                &lt;View style={Style.controlWrapper}&gt;
                  &lt;View style={{ flex: 1 }}&gt;
                    &lt;TextInput
                      ref={(ref) =&gt; { this.input = ref; }}
                      returnKeyType="done"
                      textContentTypez="none"
                      placeholder="Type your search"
                      onChangeText={this.onChangeText}
                      onFocus={this.onFocus}
                      onBlur={this.onBlur}
                      underlineColorAndroid="transparent"
                      placeholderTextColor={Palette.$color_white}
                      style={Style.searchInput}
                    /&gt;
                    &lt;Animated.View
                      style={[Style.menu, { opacity: menuOpacity }]}
                      pointerEvents={isMenuOpen ? 'auto' : 'none'}
                    &gt;
                      &lt;ScrollView
                        contentContainerStyle={Style.menuOptionsContentContainer}
                        keyboardShouldPersistTaps="always"
                        style={[Style.menuOptions, { maxHeight: scrollHeight }]}
                        nestedScrollEnabled
                      &gt;
                        {
                          !isLoading
                            ? results.map(tag =&gt; (
                              &lt;TouchableHighlight
                                style={Style.menuOption}
                                key={tag.guid}
                                onPress={() =&gt; this.onOptionSelect(tag)}
                                underlayColor={Palette.$color_light_grey}
                              &gt;
                                &lt;Text style={Style.menuOptionText}&gt;{tag.name}&lt;/Text&gt;
                              &lt;/TouchableHighlight&gt;
                            ))
                            : (
                              &lt;View style={Style.activityIndicator}&gt;
                                &lt;ActivityIndicator size="small" color={Palette.$color_orange} /&gt;
                              &lt;/View&gt;
                            )
                        }
                      &lt;/ScrollView&gt;
                    &lt;/Animated.View&gt;
                  &lt;/View&gt;
                  &lt;StyledTextButton
                    title="Search"
                    onPress={this.onSearchPress}
                    disabled={tags.length &lt;= 0}
                  /&gt;
                &lt;/View&gt;
              &lt;/View&gt;
            &lt;/View&gt;
          &lt;/Animated.View&gt;
        &lt;/ScrollView&gt;
  </code></pre>
  
  <p>The ScrollView is rendered as expected, but in android it cannot respond to touch and swipe gestures. Works as intended in iOS.</p>
  
  <p>Here's an example in iOS of the Component.</p>
  
  <p><a href="https://i.stack.imgur.com/6prVX.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6prVX.gif" alt="Search Component functioning in iOS"></a></p>