search.js

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

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

class PlaceFinder extends Component {
  constructor (props) {
    super(props)
    this.state = {
      placeInfo: {
        candidates: [{}]
      },
      searchQuery: ''
    }
  }

  render () {
    return (
      <View style={{ padding: 10 }}>
        <Text>Search for a place</Text>
        <View style={{ flexDirection: 'row' }}>
          <TextInput
            onChangeText={this._onChangePlace}
            style={styles.searchBox}
            placeholder='Enter Place Name'
          />
          <Button
            style={styles.button}
            onPress={this._getInfo}
            title='Get info'
          />
        </View>

        <View>
          {this.state.placeInfo.candidates.map(addressInfo => {
            return <Text>{addressInfo.formatted_address}</Text>
          })}
        </View>
      </View>
    )
  }

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

  _getInfo = async () => {
    const searchQuery = this.state.searchQuery
    const url = `https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=${searchQuery}&inputtype=textquery&fields=photos,formatted_address,name,rating,opening_hours,geometry&key=${ApiKey}`

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

const styles = StyleSheet.create({
  searchBox: {
    margin: 5,
    flex: 3
  },
  button: {
    color: '#841584',
    borderWidth: 1
  }
})

export default PlaceFinder