Maps blank react native - google-maps

Question

I'm having a problem while viewing google maps in my react native app. I ran a test with an HTML file and it displays. But in my app open blank but shows the logo of google. Below my map code.
App.js
import React, { Component, Fragment } from 'react';
import { View, Image } from 'react-native';
import MapView, { Marker } from 'react-native-maps';
import Geocoder from 'react-native-geocoding';
import { getPixelSize } from '../../components/utils';
import Search from '../Search';
import Directions from '../Directions';
import Details from '../Details';
import markerImage from '../../assets/marker.png';
import backImage from '../../assets/back.png';
import {
Back,
LocationBox,
LocationText,
LocationTimeBox,
LocationTimeText,
LocationTimeTextSmall
} from './styles';
Geocoder.init('MY API');
export default class Map extends Component {
state = {
region: null,
destination: null,
duration: null,
location: null
};
async componentDidMount () {
navigator.geolocation.getCurrentPosition(
async ({ coords: { latitude, longitude } }) => {
const response = await Geocoder.from({ latitude, longitude });
const address = response.results[0].formatted_address;
const location = address.substring(0, address.indexOf(','));
console.log(latitude);
console.log(longitude);
this.setState({
location,
region: {
latitude,
longitude,
latitudeDelta: 0.0143,
longitudeDelta: 0.0134
}
});
}, // sucesso
() => {}, // erro
{
timeout: 2000,
enableHighAccuracy: true,
maximumAge: 1000
}
);
}
handleLocationSelected = (data, { geometry }) => {
const {
location: { lat: latitude, lng: longitude }
} = geometry;
this.setState({
destination: {
latitude,
longitude,
title: data.structured_formatting.main_text
}
});
};
handleBack = () => {
this.setState({ destination: null });
};
render () {
const { region, destination, duration, location } = this.state;
return (
<View style={{ flex: 1 }}>
<MapView
style={{ flex: 1 }}
region={region}
showsUserLocation
loadingEnabled
ref={el => (this.mapView = el)}
>
{destination && (
<Fragment>
<Directions
origin={region}
destination={destination}
onReady={result => {
this.setState({ duration: Math.floor(result.duration) });
this.mapView.fitToCoordinates(result.coordinates, {
edgePadding: {
right: getPixelSize(50),
left: getPixelSize(50),
top: getPixelSize(50),
bottom: getPixelSize(350)
}
});
}}
/>
<Marker
coordinate={destination}
anchor={{ x: 0, y: 0 }}
image={markerImage}
>
<LocationBox>
<LocationText>{destination.title}</LocationText>
</LocationBox>
</Marker>
<Marker coordinate={region} anchor={{ x: 0, y: 0 }}>
<LocationBox>
<LocationTimeBox>
<LocationTimeText>{duration}</LocationTimeText>
<LocationTimeTextSmall>MIN</LocationTimeTextSmall>
</LocationTimeBox>
<LocationText>{location}</LocationText>
</LocationBox>
</Marker>
</Fragment>
)}
</MapView>
{destination ? (
<Fragment>
<Back onPress={this.handleBack}>
<Image source={backImage} />
</Back>
<Details />
</Fragment>
) : (
<Search onLocationSelected={this.handleLocationSelected} />
)}
</View>
);
}
}
In androidManifest i put the correct code and the rest also, I do not know what else to do , I think it might be something with my emulator, can anyone give me a guideline?

Answer 1

you need to install google play services or Gapps on emulator.