react-native nested ScrollView fails to respond to touch in android

Viewed 2077

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}.

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.

<ScrollView
    style={Style.view}
    contentContainerStyle={Style.container}
    keyboardShouldPersistTaps="handled"
>
    <TouchableOpacity
        onPress={this.onClose}
          style={Style.close}
          hitSlop={{
            top: 16,
            right: 16,
            bottom: 16,
            left: 16,
          }}
        >
          <Icon
            name="times"
            size={24}
            color={Palette.$color_white}
          />
        </TouchableOpacity>
        <Animated.View style={[Style.animatedWrapper, { transform: [{ translateY }] }]}>
          <View style={Style.tags}>
            {
              tags.map(tag => (
                <View key={tag.guid} style={Style.tag}>
                  <Strong color={Palette.$color_white}>{tag.name}</Strong>
                  <TouchableOpacity
                    style={Style.tagButton}
                    onPress={() => this.onTagPress(tag)}
                    hitSlop={{
                      top: 16,
                      right: 16,
                      bottom: 16,
                      left: 16,
                    }}
                  >
                    <Icon name="times" size={14} color={Palette.$color_white} />
                  </TouchableOpacity>
                </View>
              ))
            }
          </View>
          <View style={Style.searchWrapper} onLayout={this.onLayout}>
            <Image
              source={Buzz}
              style={Style.illustration}
            />
            <View style={Style.inputWrapper}>
              <Heading
                level={3}
                color={Palette.$color_white}
              >
                Search by key words
              </Heading>
              <View style={Style.controlWrapper}>
                <View style={{ flex: 1 }}>
                  <TextInput
                    ref={(ref) => { 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}
                  />
                  <Animated.View
                    style={[Style.menu, { opacity: menuOpacity }]}
                    pointerEvents={isMenuOpen ? 'auto' : 'none'}
                  >
                    <ScrollView
                      contentContainerStyle={Style.menuOptionsContentContainer}
                      keyboardShouldPersistTaps="always"
                      style={[Style.menuOptions, { maxHeight: scrollHeight }]}
                      nestedScrollEnabled
                    >
                      {
                        !isLoading
                          ? results.map(tag => (
                            <TouchableHighlight
                              style={Style.menuOption}
                              key={tag.guid}
                              onPress={() => this.onOptionSelect(tag)}
                              underlayColor={Palette.$color_light_grey}
                            >
                              <Text style={Style.menuOptionText}>{tag.name}</Text>
                            </TouchableHighlight>
                          ))
                          : (
                            <View style={Style.activityIndicator}>
                              <ActivityIndicator size="small" color={Palette.$color_orange} />
                            </View>
                          )
                      }
                    </ScrollView>
                  </Animated.View>
                </View>
                <StyledTextButton
                  title="Search"
                  onPress={this.onSearchPress}
                  disabled={tags.length <= 0}
                />
              </View>
            </View>
          </View>
        </Animated.View>
      </ScrollView>

The ScrollView is rendered as expected, but in android it cannot respond to touch and swipe gestures. Works as intended in iOS.

Here's an example in iOS of the Component.

Search Component functioning in iOS

0 Answers
Related