response-native-google-place-autocomplete не работает на React native 0.61

Question

Я добавил реактив-native-google-place-autocomplete с пряжей в свой проект Reaction-native Cli, но он не работает. Вот проблемы, с которыми я сталкиваюсь в данный момент.

1. раскрывающийся список мест не отображается на IOS, однако в поле ввода текста можно ввести название места, но список прогнозов не появляется

2. Обработчик onPress вообще не запускается как на IOS, так и на android

3. Ввод текста происходит из response-native-google-place-autocomplete не позволяет мне вводить что-либо на ANDROID. Это как отключение все время (хотя фокус установлен на true)

Примечание: все API-адреса местоположения Google включены, API-интерфейсы Google Maps, API-интерфейсы мест и API геокодирования включены, и указан правильный ключ API.

Я испробовал все возможные решения, включая следующие:

1. настройка zIndex: 1000 высокое значение, чтобы избежать его скрытия за другим представлением

2. Попытка создания нового приложения RN и добавление только этого компонента для поддержания чистоты проекта

3. Восстановление API и даже использование другого API, который работает с предыдущими версиями РЕАГИРУЙТЕ НАРОДНОЕ.

В журналах ничего не отображается ни в Xcode, ни в Android Studio. Вот фрагмент кода:

        <View style = {[{zIndex: 2, backgroundColor: 'white'}]}>
                <GooglePlacesAutocomplete
                    ref = {ref => setSearchTextRef(ref)}
                    placeholder='Search for gym'
                    styles={{
                        container: {backgroundColor: 'transparent'},
                        textInputContainer: styles.viewStyle,
                        textInput: styles.textInputStyle,
                    }}
                    keyboardShouldPersistTaps = {'handled'}
                    listUnderlayColor = {'transparent'}
                    textInputProps = {{
                        onFocus: () => focusInput(),
                        onBlur: () => blurInput(),
                        onChangeText: (text) => onChange(text)
                    }}
                    minLength={1} // minimum length of text to search
                    returnKeyType={'search'}
                    listViewDisplayed={'auto'}   // true/false/undefined
                    fetchDetails={true}
                    renderDescription={row => row.description} // custom description render
                    onPress={(data, details = null) => {
                        let coordinates = details.geometry.location;
                        sendCoordinates(coordinates, {data, details});
                    }}
                    getDefaultValue={() => ''}
                    query={{
                        key: googleAPIKey,
                        language: 'en', // language of the results
                        // types: '(cities)' // default: 'geocode'
                    }}
                    nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
                    GooglePlacesSearchQuery={{
                        rankby: 'distance',
                        types: 'gym'
                    }}
                    filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']} 
                    debounce={200}
                />
            </View>

Заранее спасибо

Answer 1

Этот пакет больше не поддерживается и просто не работает. Я попробовал на IOS с выставкой. Я даже не получил список результатов. Я нашел другой пакет, который работает как шарм:

https://www.npmjs.com/package/react-native-places-input

Answer 2

Ваш код с несколькими комментариями сработал для меня. Закомментированы ваши вызовы функций, поскольку они не были предоставлены.

      <View style = {[{zIndex: 2, backgroundColor: 'white'}]}>
          <GooglePlacesAutocomplete
              //ref = {ref => setSearchTextRef(ref)}
              placeholder='Search for gym'
              styles={{
                  container: {backgroundColor: 'transparent'},
                  //textInputContainer: styles.viewStyle,
                  //textInput: styles.textInputStyle,
              }}
              keyboardShouldPersistTaps = {'handled'}
              listUnderlayColor = {'transparent'}
              textInputProps = {{
                  //onFocus: () => focusInput(),
                  //onBlur: () => blurInput(),
                  //onChangeText: (text) => onChange(text)
              }}
              minLength={1} // minimum length of text to search
              returnKeyType={'search'}
              listViewDisplayed={'auto'}   // true/false/undefined
              fetchDetails={true}
              renderDescription={row => row.description} // custom description render
              onPress={(data, details = null) => {
                  let coordinates = details.geometry.location;
                  console.log(JSON.stringify(details)); //display details in console!
                  //sendCoordinates(coordinates, {data, details});
              }}
              getDefaultValue={() => ''}
              query={{
                key: 'YourKeyHere',
                language: 'en', // language of the results
                  // types: '(cities)' // default: 'geocode'
              }}
              nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
              GooglePlacesSearchQuery={{
                  rankby: 'distance',
                  types: 'gym'
              }}
              filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']} 
              debounce={200}
          />
      </View>