SearchPage.js

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) {
    super(props);
    this.state = {
      query: '',
      data: []
    };
  }
  
  onChangeText(query) {
    this.setState({ query });
    getPredictionWithDetail(query, KEY).then(result => {
      this.setState({ data: result });
    });
  }
  
  render() {
    return (
      <View>
        <AutoCompleteBox
          placeholder="Masukan Nama Tempat"
          value={this.state.query}
          onChangeText={query => this.onChangeText(query)}
        />
        <AutoCompleteResultList data={this.state.data} />
      </View>
    );
  }
}

export default SearchPage;