Not able to select drop down elements that are outside of parent container view?

I tried playing around with the zIndex of the parent container as well as the various style props for the autocomplete. All items that flow outside of the parent container are not selectable and the view underneath is touched.

I am using it not as a search form but as a custom dropdown component. I figure the issue is the same regardless.

I have wrapped the autocomplete in an absolute positioned view as per the docs. Does anyone else experience this?

My component below is inside a <View> that is positioned absolutely with a fixed height and the dropdown elements hang outside of the parent view.

  <View style={{minHeight: 35, flex: 1}}>
      <View style={styles.autocompleteContainer}>
        <Autocomplete
          data={data}
          listStyle={styles.listStyles}
          inputContainerStyle={styles.inputContainer}
          onFocus={onFocus}
          keyExtractor={item => item}
          returnKeyType={'next'}
          hideResults={hideResults}
          renderTextInput={() => (
            <TouchableOpacity
              style={styles.textInputItem}
              onPress={() => setHideResults(!hideResults)}>
              <Text style={styles.textInputItemText}>{currentValue}</Text>
            </TouchableOpacity>
          )}
          renderItem={({item}) => (
            <TouchableOpacity onPress={onSelect}>
              <Text style={styles.listTextStyle}>{item}</Text>
            </TouchableOpacity>
          )}
        />
      </View>
    </View>

const styles = {
  autocompleteContainer: {
    flex: 1,
    left: 0,
    position: 'absolute',
    borderRadius: 2,
    right: 0,
    top: 0,
  },
  inputContainer: {
    backgroundColor: 'red',
    borderWidth: 0,
  },
  listStyles: {
    backgroundColor: 'blue',
    borderWidth: 0,
    margin: 0,
  },
  listTextStyle: {
    color: 'white',
    width: '100%',
    paddingVertical: 8,
    paddingLeft: 20,
  },
  textInputItem: {
    height: 35,
    justifyContent: 'center',
    paddingLeft: 20,
  },
  textInputItemText: {
    color: 'white',
  },
};

[tayloraleach]

@changyu2hao Hey so I was able to get my list items to register touch by importing from here instead of the regular react-native:

import {TouchableOpacity} from 'react-native-gesture-handler';

I also went into the actual node_modules directory and inside index.js for this package, doing the same thing and moving that import for the root <FlatList> component to the gesture handler, and now scroll works for me with my absolute positioned component on both Android and iOS!!! 😃

[AustinWood]

@changyu2hao Hey so I was able to get my list items to register touch by importing from here instead of the regular react-native:

import {TouchableOpacity} from 'react-native-gesture-handler';

I also went into the actual node_modules directory and inside index.js for this package, doing the same thing and moving that import for the root <FlatList> component to the gesture handler, and now scroll works for me with my absolute positioned component on both Android and iOS!!! 😃

This is exact solution in Android for scrolling issue. I think it needs to be pinned on issues tab

after patching node_modules, add this step in package.json.

"postinstall": "npx patch-package"