Maps dan Google Places Autocomplete pada React Native(Android)

React native maps merupakan library paling populer yang digunakan untuk membuat atau menambahkan fitur google maps pada aplikasi berbasis react native sedangkan react native google places autocomplete adalah suatu library yang digunakan untuk memberikan sugesti tempat atau daerah atas input yang dimasukkan oleh pengguna. Kedua library ini dapat digunakan untuk membuat aplikasi peta sederhana dengan react native maps untuk menampilkan peta dan react native google places auto complete untuk menerima input daerah atau wilayah pada peta..

Pertama, untuk menggunakan react native maps dan react native google places auto complete kita harus menambahkan library ini pada project kita dengan :

npm install react-native-maps --save
npm install react-native-google-places-autocomplete --save

Tunggu sampai unduhan library selesai…

Kedua, buka build.gradle pada folder app

android/app/build.gradle

Dan tambahkan kode berikut:

dependencies {
  ...
  compile project(':react-native-maps') //tambahkan ini
}

Atau dapat juga menentukan google play module yang digunakan untuk menjalankan library ini dengan mengganti depencency diatas menjadi:

dependencies {
    ...
    compile(project(':react-native-maps')){
        exclude group: 'com.google.android.gms', module: 'play-services-base'
        exclude group: 'com.google.android.gms', module: 'play-services-maps'
    }
    compile 'com.google.android.gms:play-services-base:10.0.1'
    compile 'com.google.android.gms:play-services-maps:10.0.1'
}

Langkah ketiga yaitu dengan menambahkan library yang sudah diunduh tadi pada project Android kita dengan menambahkan kode ini pada file setting.gradle pada folder android (yourproject/android/setting.gradle)

android/settings.gradle

Tambahkan kode ini:

include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')

Setelah ketiga langkah diatas dilakukan maka library maps kita sudah siap digunakan.

Untuk menggunakan google maps dan google places pada aplikasi, kita harus memerlukan API-KEY yang bisa kita dapatkan pada link berikut

Google API Console

Pastikan sudah menghidupkan API google maps dan google places atas API-KEY yang kita buat tadi.

Setelah itu tambahkan API-KEY yang telah dibuat tadi pada Android.Manifest

android\app\src\main\AndroidManifest.xml

Tambahkan kode ini untuk menambah API-KEY google

<application
      android:name=".MainApplication"
      ...
      <meta-data
        android:name="com.google.android.geo.API_KEY"
        android:value="TAMBAHKAN API DISINI"/>
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        ...

Api key diatas digunakan untuk react native maps pada aplikasi kita sedangkan untuk menambahkan api key pada google places auto complete bisa kita tambahkan pada saat kita menggunakan library itu pada project kita.

Setelah semua persiapan selesai maka langsung saja kita membuat aplikasi peta sederhana.

Untuk menggunakan react native maps kita dapat mengimpor library dengan kode ini:

import MapView from 'react-native-maps';

Untuk menampilkan peta pakai kode ini

<MapView
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  />

Pada react native maps ini digunakan latitude, longitude, latitudeDelta, dan longitudeDelta untuk dapat menampilkan wilayah (region) yang ingin kita fokuskan pada peta. Untuk membuat marker dapat kita gunakan kode ini:

<MapView.Marker
      coordinate={{
          latitude: 37.78825,
          longitude: -122.4324,
        }}
      title="Lokasi"
      description="Hello"
    />

Jadi kode yang kita gunakan untuk membuat peta + marker menjadi

<MapView
   style={{ flex: 1, width: window.width }} //window pake Dimensions
   region={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421 
   }} >
<MapView.Marker
   coordinate={{
      latitude: 37.78825,
      longitude: -122.4324,
   }}
   title="Lokasi"
   description="Hello" />
</MapView>

Tampilkan untuk kode kurang lebih seperti ini

Nah setelah kita berhasil membuat peta pada aplikasi android react-native, sekarang kita membuat input untuk react native google places autocomplete. Untuk menggunakan library ini gunakan impor kode dibawah ini

import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

Nah setelah diimport kita bisa langsung menggunakan library ini namun jangan lupa untuk memasukkan API-KEY yang sudah kita buat tadi.

<GooglePlacesAutocomplete
    placeholder='Enter Location'
    minLength={2}
    autoFocus={false}
    fetchDetails
    listViewDisplayed='auto'
    query={{
         key: 'TAMBAHKAN API DISINI',
         language: 'en',
         types: 'geocode',
    }}
    currentLocation={false} />

Nah dengan ditambahkannya kode diatas maka kita sudah dapat menggunakan react native google places autocomplete. Namun apabila kita menggabungkan dengan peta yang sudah kita buat tadi, tampilan masih kurang rapi karena pada dasarnya si “react native google places autocomplete” ini di set flex: 1 dan perlu kita set sesuai dengan kebutuhan kita dengan menambahkan style pada library ini.

Untuk styling dan menggabungkan dua library ini akan kita bahas pada part 2..

:)