React-native-google-places-autocomplete: Overlap list of result over other components

[ifmael]

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" },
};
```

```javascript

<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

• [X] Android
• [ ] Web

If you are using expo please indicate here:

• [X] I am using expo

[wievtsal]

Same here

[jerearaujo03]

Same

[loboeduardo1800]

Same

[fractalframing]

Try adding elevation to the styles this is working for me on Android:

...

<GooglePlacesAutocomplete
          container={styles.searchContainer}
          keyboardShouldPersistTaps="always"
          listView={styles.listViewContainer}
          query={{
            key: MAPS_KEY,
            language: 'es',
          }}
        />

...

const styles = StyleSheet.create({
  searchContainer: {
    flex: 1,
    width: '100%',
    justifyContent: 'center',
    top: 20,
    zIndex: 100,
    elevation: 3,
    paddingHorizontal: 15,
  },
  listViewContainer: {
    position: 'absolute',
    zIndex: 100,
    elevation: 3,
    top: 30,
    paddingHorizontal: 15,
  },
});
...

[bell-steven]

@ifmael I am having a hard time reproducing your example, as it is incomplete. Can you show the minimum amount of code needed to demonstrate the problem you are trying to solve.

[Mehdi-17]

I have the same problem with this code :
```import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Image } from 'react-native';
import WeatherIllustration from '../assets/weatherIllustration.png';
import CityWeatherComponent from '../Components/CityWeatherComponent';
import HomePageFooterComponent from '../Components/HomePageFooterComponent';
import { statusBarHeight } from '../utils/constants';
import {
REACT_NATIVE_API_KEY_WEATHER,
REACT_NATIVE_API_KEY_GOOGLE_PLACES,
} from '@env';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const HomeScreen = () => {
const { container, imgStyle } = styles;
const baseCity = 'Tours';
const [city, setCity] = useState('');

const [loadedWeather, setLoadedWeather] = useState(false);
const [weather, setWeather] = useState();

const baseUrlWeather = 'http://api.weatherstack.com/';
const optionsUrl =
'current?access_key=' + REACT_NATIVE_API_KEY_WEATHER + '&query=';

//TODO : Rendre le truc + design
//TODO : Refacto pour avoir bien des components séparés

const searchWeather = async (value) => {
console.log('value => ', value);
setLoadedWeather(false);
await fetch(baseUrlWeather + optionsUrl + value)
.then((response) => response.json())
.then((data) => setWeather(data))
.catch((error) => console.error(error))
.finally(() => setLoadedWeather(true));
};

useEffect(() => {
city !== '' ? searchWeather(city) : searchWeather(baseCity);
}, []);

return (
placeholder="Entrer la ville ici..."
onPress={(data) => {
searchWeather(data.structured_formatting.main_text.toString());
setCity(data.structured_formatting.main_text.toString());
}}
query={{
key: REACT_NATIVE_API_KEY_GOOGLE_PLACES,
language: 'fr',
types: '(cities)',
}}
styles={autoCompleteStyles}
/>

  <CityWeatherComponent loadedWeather={loadedWeather} weather={weather} />
  <HomePageFooterComponent />
</View>

);
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingTop: statusBarHeight,
},
imgStyle: {
marginTop: 50,
marginBottom: 50,
},
});

const autoCompleteStyles = StyleSheet.create({
container: {
width: '90%',
marginTop: 10,
zIndex: 1,
},
listView: {
borderColor: '#c8c7cc',
borderWidth: 1,
borderRadius: 2,
position: 'absolute',
top: 47,
},
});
export default HomeScreen;
```

[Mehdi-17]

Hello, I know it's late but i found the solution, here is my component :
```import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Image } from 'react-native';
import WeatherIllustration from '../assets/weatherIllustration.png';
import CityWeatherComponent from '../Components/CityWeatherComponent';
import HomePageFooterComponent from '../Components/HomePageFooterComponent';
import { statusBarHeight } from '../utils/constants';
import {
REACT_NATIVE_API_KEY_WEATHER,
REACT_NATIVE_API_KEY_GOOGLE_PLACES,
} from '@env';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const HomeScreen = () => {
const { container, imgStyle } = styles;
const baseCity = 'Tours';
const [city, setCity] = useState('');

const [loadedWeather, setLoadedWeather] = useState(false);
const [weather, setWeather] = useState();

const baseUrlWeather = 'http://api.weatherstack.com/';
const optionsUrl =
'current?access_key=' + REACT_NATIVE_API_KEY_WEATHER + '&query=';

//TODO : Rendre le truc + design
//TODO : Refacto pour avoir bien des components séparés

const searchWeather = async (value) => {
console.log('value => ', value);
setLoadedWeather(false);
await fetch(baseUrlWeather + optionsUrl + value)
.then((response) => response.json())
.then((data) => setWeather(data))
.catch((error) => console.error(error))
.finally(() => setLoadedWeather(true));
};

useEffect(() => {
city !== '' ? searchWeather(city) : searchWeather(baseCity);
}, []);

return (
placeholder="Entrer la ville ici..."
onPress={(data) => {
searchWeather(data.structured_formatting.main_text.toString());
setCity(data.structured_formatting.main_text.toString());
}}
query={{
key: REACT_NATIVE_API_KEY_GOOGLE_PLACES,
language: 'fr',
types: '(cities)',
}}
styles={autoCompleteStyles}
enablePoweredByContainer={false}
/>

    <CityWeatherComponent loadedWeather={loadedWeather} weather={weather} />
    <HomePageFooterComponent />
  </View>
</View>

);
};

const styles = StyleSheet.create({
container: {
flex:1,
alignItems: 'center',
paddingTop: statusBarHeight,
width: '100%',
},
searchBarContainer: {
width: '90%',
flex:1,
justifyContent:"center",
alignItems: "center",
position: "absolute",
zIndex:1,
top:statusBarHeight,
},
contentContainer: {
width: '100%',
flex:5,
alignItems: "center",
},
imgStyle: {
marginTop: 50,
marginBottom: 50,
},
});

const autoCompleteStyles = StyleSheet.create({
container: {
width: '100%',
marginTop: 10,
},
listView: {
borderColor: '#c8c7cc',
borderWidth: 1,
borderRadius: 2,
},
});
export default HomeScreen;
```

I separated the google place autocomplete to the others components using views. Then i set a position absolute and zindex : 1 to the view that hold the google component.

[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

[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
        },
      }}
    />