how to place the autocomplete on Map

I am trying to build the autocomplete on top of a map, but the search box keeps pushing the map down, how can i overlay the search results on the map ?

    <GooglePlacesAutocomplete
                    listViewDisplayed='true'
                    placeholder='Search'
                    minLength={1} // minimum length of text to search
                    autoFocus={false}
                    fetchDetails={true}
                    onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
                        this.setState({
                            latitude: details.geometry.location.lat,
                            longitude: details.geometry.location.lng, latitudeDelta: 0.3, longitudeDelta: 0.3
                        });
                    }}
                    getDefaultValue={() => {
                        return ''; // text input default value
                    }}
                    query={{
                        // available options: https://developers.google.com/places/web-service/autocomplete
                        key: key
                        language: 'ar', // language of the results
                        types: 'address', // default: 'geocode'
                    }}
                    styles={{
                        description: {
                            fontWeight: 'bold',
                            textAlign: 'right'
                        },
                        predefinedPlacesDescription: {
                            color: '#1faadb',
                        },
                    }}
                    currentLocation={false} // Will add a 'Current location' button at the top of the predefined places list
                    currentLocationLabel="Current location"
                    nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
                    GoogleReverseGeocodingQuery={{
                        // available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
                    }}
                    GooglePlacesSearchQuery={{
                        // available options for GooglePlacesSearch API : https://developers.google.com/places/web-service/search
                        rankby: 'distance',
                        types: 'food',
                    }}
                    filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']} // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities
                    predefinedPlacesAlwaysVisible={true}
                />

                <MapView
                    region={this.getMapRegion()}
                    style={styles.map}
                    // onPress={() => alert('hello')}
                    provider={PROVIDER_GOOGLE}
                    mapType="standard"
                    onRegionChangeComplete={(region) => this.setState({
                        latitude: region.latitude, longitude: region.longitude,
                        latitudeDelta: region.latitudeDelta, longitudeDelta: region.longitudeDelta
                    })}
                    showsCompass={true}
                    showsBuildings={true}
                    showsTraffic={true}
                    showsIndoors={true}
                >
                    <MapView.Marker
                        coordinate={this.getMapRegion2()} />
                    <Image

                        style={{
                            resizeMode: 'contain',
                            left: '50%',
                            marginLeft: -24,
                            marginTop: -48,
                            height: 60, width: 60,
                            top: '50%'
                        }} source={require('../../assets/fake-marker.png')} />
                </MapView>

[jaska120]

in your styles prop, add:

  container: {
    position: 'absolute',
    zIndex: 9999,
    width: '100%'
  }

[lyudad]

But select items on Map not work