advancedPlaceFinder

import React, { Component } from 'react'
import {
  View,
  Text,
  Button,
  Platform,
  TextInput,
  StyleSheet
} from 'react-native'
import { Constants, Location, Permissions } from 'expo'

// https://developers.google.com/places/web-service/get-api-key
const ApiKey = 'AIzaSyAl_gQqNibe6FCE_MRBUyOOsQgmZJZvAjU'

class PlaceFinder extends Component {
  state = {
    location: null,
    errorMessage: null,
    results: []
  }

  async componentWillMount () {
    if (Platform.OS === 'android' && !Constants.isDevice) {
      this.setState({
        errorMessage: 'Oops, this will not work on Sketch in an Android emulator. Try it on your device!'
      })
    } else {
      await this._getLocationAsync()
    }
  }

  async _loadNearByPlaces () {
    const { location = {} } = this.state
    const { coords = {} } = location
    const { latitude, longitude } = coords
    // 55.9471579,-3.203891
    const url = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${latitude},${longitude}
      &radius=1500&type=restaurant&key=${ApiKey}`

    const response = await fetch(url)
    const { results } = await response.json()
    console.log(results)
    this.setState({ results })
  }

  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION)
    if (status !== 'granted') {
      this.setState({
        errorMessage: 'Permission to access location was denied'
      })
    }

    let location = await Location.getCurrentPositionAsync({})
    console.log(location)
    this.setState({ location })
    this._loadNearByPlaces()
  }

  render () {
    return (
      <View style={{ padding: 10 }}>

        <View>
          {this.state.results.map(({ name, vicinity }) => {
            return (
              <View style={styles.placeCard}>
                <Text style={styles.mainText}>{name}</Text>
                <Text>{vicinity}</Text>
              </View>
            )
          })}
        </View>
      </View>
    )
  }

  _onChangePlace = value => {
    this.setState({
      searchQuery: value
    })
  }
}

const styles = StyleSheet.create({
  searchBox: {
    margin: 5,
    flex: 3
  },
  mainText: {
    fontSize: 26
  },
  placeCard: {
    margin: 20,
    padding: 5,
    borderBottomWidth: 1
  },
  button: {
    color: '#841584',
    borderWidth: 1
  }
})

export default PlaceFinder