index.html

import React from 'react';
import { StyleSheet, Text, View, Alert, TextInput, Button } from 'react-native';
import { MapView } from 'expo';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      address: '', 
      region: {latitude: 60.200692, longitude: 24.934302, latitudeDelta: 0.0322, longitudeDelta: 0.0221}
    };
  }
  
  // Fetch coordinates from the Google API and show the address in the map
  // Use geocoding API
  // https://developers.google.com/maps/documentation/geocoding/intro
  // key = AIzaSyBKwL3M2YKl1vlYxx66C2SnP-qjwIR1fXY 
  showAddress = () => {
    const url = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + this.state.address + '&key=AIzaSyBKwL3M2YKl1vlYxx66C2SnP-qjwIR1fXY';
    fetch(url)
  	.then((response) => response.json()) 
  	.then((responseData) => {
      const lat = responseData.results[0].geometry.location.lat;
      const lon = responseData.results[0].geometry.location.lng;
      this.setState({region: {latitude: lat, longitude: lon, latitudeDelta: 0.0322, longitudeDelta: 0.0221}});
	  });
  }

  onRegionChange(region) {
    this.setState({ region });
  }
    
  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={{flex: 5}}
          region={this.state.region}
          onRegionChange={this.onRegionChange} >
          <MapView.Marker
            coordinate={{latitude: this.state.region.latitude, longitude: this.state.region.longitude}}
          />
        </MapView>
        <View style={styles.container}>
          <TextInput placeholder='Type address' style={{height: 40, fontSize: 18}} onChangeText={(address) => this.setState({address})} />
          <Button title="Show" onPress={this.showAddress} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});