реагировать на нативные места Google автозаполнение пакета npm, прикрепляя полную страницу в приложении

Question

Я занимаюсь разработкой собственного приложения. В этом я использую пакет NPM реагировать-родной-Google-мест-автозаполнение. Работает нормально. Моя проблема в том, что он занимает полный просмотр страницы. как это исправить. Я хочу такой вывод

Требуется ссылка на выходное изображение

вот мой код

https://snack.expo.io/@savadks1818/react-native-google-places-autocomplete-example

        import React from 'react';
    import { Constants } from 'expo';
    import { View, TextInput,Text,Alert } from 'react-native';
    import {
      GooglePlacesAutocomplete,
    } from 'react-native-google-places-autocomplete'; // 1.2.12
    let datas;
    let details;
    const homePlace = {
      description: 'Home',
      geometry: { location: { lat: 48.8152937, lng: 2.4597668 } },
    };
    const workPlace = {
      description: 'Work',
      geometry: { location: { lat: 48.8496818, lng: 2.2940881 } },
    };

    export default class OutletCreator extends React.Component {
      render() {
        return (

          <View style={{ paddingTop: Constants.statusBarHeight, flex: 1 }}>
            <GooglePlacesAutocomplete
              placeholder="Search"
              minLength={2} // minimum length of text to search
              autoFocus={false}
              returnKeyType={'search'} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
              listViewDisplayed="false" // true/false/undefined
              fetchDetails={true}
              renderDescription={row => row.description} // custom description render
              onPress={(data, details = null) => {
                // 'details' is provided when fetchDetails = true
                datas=data;
                alert("lat: "+JSON.stringify(details.geometry.location.lat)+" lan: " +JSON.stringify(details.geometry.location.lng) )
                console.log(data);
                console.log(details);
              }}
              getDefaultValue={() => {
                return ''; // text input default value
              }}
              query={{
                // available options: https://developers.google.com/places/web-service/autocomplete
                key: 'xxxxxxxxxx',
                language: 'en', // language of the results
                types: '(cities)', // default: 'geocode'
              }}





              styles={{
                locationAutocompleteStyle: {
        container: {
          zIndex: 10,
          overflow: 'visible',
          height: 50,
          flexGrow: 0,
          flexShrink: 0
        },
                description: {
                  fontWeight: 'bold',
                },
                predefinedPlacesDescription: {
                  color: '#1faadb',
                },
                textInput: {
                backgroundColor: 'transparent',
                fontSize: 15,
                lineHeight: 22.5,
                paddingBottom: 0,
                flex: 1
              },
        listView: {
          position: 'absolute',
          top: 60,
          left: 10,
          right: 10,
          backgroundColor: 'white',
          borderRadius: 5,
          flex: 1,
          elevation: 3,
          zIndex: 10
        },
                }


              }}
              //currentLocation={true} // 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
              predefinedPlaces={[homePlace, workPlace]}
              debounce={200}
            />
          <TextInput>Some Text</TextInput>

          </View>
        );
      }
    }