Overlap list of result over other components

Describe the problem

I would like to overlap the list of address over other components. To do that I use position: absolute for the listView style. The list is showing over the result but when I press a row the onPress handler is not called. It works on IOS but not in Android. The only way I know to overlap components is with position: absolute . How could I achieve this behaviour? It is annoying that the list of result push the rest of the components down.

Reproduction

Add position: absolute in the styles of the listView and zIndex:1 in the container

Please provide a FULLY REPRODUCIBLE example.

Click to expand!

export const autocompleteStyle = {
container: {
  width: "100%",
  flex: null,
  marginTop: 20,
  zIndex:1
},

listView: {
  borderColor: "#c8c7cc",
  borderWidth: 1,
  borderRadius: 2,
  position: "absolute",
  width: parseInt(listViewWidth),
  left: parseInt(offsetHorizontal),
  top: 47,
},
textInput: {
  height: 38,
  color: "#5d5d5d",
  fontSize: 16,
},
row: {
  backgroundColor: "blue",
},
predefinedPlacesDescription: {
  color: "black",
},
loader: { color: "red" },
};

  
  <ScrollView keyboardShouldPersistTaps="handled">
    <View style={styles.mainContainer}>
      <GooglePlacesAutocomplete
        currentLocation
        currentLocationLabel="Usar mi localización."
        debounce={750}
        enablePoweredByContainer={false}
        fetchDetails
        keyboardShouldPersistTaps="handled"
        listUnderlayColor="#ff0000" // color cuando se presiona un elemento de la lista
        minLength={2}
        nearbyPlacesAPI="GoogleReverseGeocoding"
        onPress={handlers.onPress}
        placeholder="Busca tu calle."
        ref={autoCompleteRef}
        renderRow={renderRow}
        query={{
          components: "country:es",
          key: PLACES_TOKEN,
          language: "es",
        }}
        styles={autocompleteStyle}
        textInputProps={{
          InputComp: Input,
          renderErrorMessage: false,
          leftIcon: {
            name: "home",
          },
        }}
      />

      <View style={styles.contactInfoContainer}>
        <Input label="Calle" value={values.street} onChangeText={(street) => handlers.setStreet(street)} />
        <View>
          <Input label="Número" value={values.number} onChangeText={(number) => handlers.setNumber(number)} />
          <Input label="Bloque" value={values.block} onChangeText={(block) => handlers.setBlock(block)} />
          <Input label="Piso" value={values.flat} onChangeText={(flat) => handlers.setFlat(flat)} />
        </View>
        <Input
          label="Código Postal"
          errorMessage={values.postalCodeError ? "Sólo enviamos a Santa Fe, Jau y Belicena" : ""}
          onChangeText={(postalCode) => handlers.setPostalCode(postalCode)}
          value={values.postalCode}
        />
        <Input label="Localidad" value={values.city} onChangeText={(city) => handlers.setCity(city)} />
      </View>
    </View>
  </ScrollView>

Additional context

• Library Version: 2.1.2

• React Native Version: 0.63

• iOS

• Android

• Web

If you are using expo please indicate here:

• I am using expo

[bouiboui]

For me the solution was to set flex: 0 for the container style. It pushes down the rest of the page below the results instead of overlapping, which is fine by me:

    <GooglePlacesAutocomplete
      ...
      styles={{
        container: {
          flex: 0
        },
      }}
    />

[fabriziobertoglio1987]

also tried this component… does not work … I just ended up hitting an endpoint on my own backend it’s easier… I’m sure this dependency will give lots of issues in the future