hanipcode

function getPredictionWithDetail(searchQuery, key) {
  return getPredictionList(searchQuery, key)
    .then(result => {
      const predictions = result.predictions;
      const predictionsPromise = predictions.map(prediction =>
        getPlaceDetails(prediction.place_id, key)
      );
      return Promise.all(predictionsPromise);
    })
    .then(data => {

hanipcode

/*
  EDIT!! request-promise mengalami error saat akan digunakan dengan react-native,
  maka kita akan menggunakan native fetch dengan bantuan qs (queryString) module.
  untuk install gunakan `npm install --save qs`
*/
const qs = require('qs');
function getPredictionList(searchQuery, key) {
  const queryString = qs.stringify({
    input: searchQuery,
    type: 'geocode',

hanipcode

import React, { Component } from 'react';
import { TextInput, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  AutoCompleteBox: {
    marginHorizontal: 20,
    padding: 10,
    alignSelf: 'stretch',
    backgroundColor: '#FFF',
    borderColor: '#BBB',

hanipcode

import React, { Component } from 'react';
import {
  TextInput,
  View,
  Text,
  StyleSheet,
  TouchableOpacity
} from 'react-native';

const styles = StyleSheet.create({

hanipcode

// rest of code same as before..
const AutoCompleteBox = props => (
  <View style={styles.AutoCompleteBox}>
    <TextInput
      {...props}
      underlineColorAndroid="#FFF"
      style={styles.AutoCompleteInput}
    />
    <TouchableOpacity onPress={() => props.clearInput()}>
      <Text style={styles.AutoCompleteClose}>X</Text>

hanipcode

import React, { Component } from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  AutoCompleteResultList: {
    marginHorizontal: 22,
    borderWidth: 2,
    borderColor: '#aaa',
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,

hanipcode

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import AutoCompleteBox from '../components/AutoCompleteBox';
import AutoCompleteResultList from '../components/AutoCompleteResultList';

class SearchPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      query: '',

hanipcode

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import AutoCompleteBox from '../components/AutoCompleteBox';
import AutoCompleteResultList from '../components/AutoCompleteResultList';
import { getPredictionWithDetail } from '../services.js';

const KEY = 'Your_API_KEY';

class SearchPage extends Component {
  constructor(props) {

hanipcode

const qs = require('qs');
// import cancelable-fetch
const fetch = require('react-native-cancelable-fetch');

function getPredictionList(searchQuery, key) {
  const queryString = qs.stringify({
    input: searchQuery,
    type: 'geocode',
    key
  });

hanipcode

//..rest of the code still the same
class AutoCompleteResultList extends Component {
  renderItem({ item }) {
    return (
      <View style={styles.AutoCompleteResultItem}>
        <Text style={styles.titleText}>{item.name}</Text>
        <Text style={styles.text}>{item.formatted_address}</Text>
      </View>
    );
  }