Issue
I've been trying to install google maps for react-native for a week an still no success. I've searched and tried the solutions in the react-native-maps github issue but still I get a blank page.
What I do:
react-native init myapp
npm install
yarn add react-native-maps
react-native link react-native-maps
In Google Console APIs -> Create new Project -> Enable Google Maps Android API, Google Maps JavaScript API and Places API -> Create credentials
In AndroidManifest.xml
<application>
....
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="XXX"/>
</application>
package.json
{
"name": "maps",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0",
"react-native": "0.50.4",
"react-native-maps": "^0.18.3"
},
"devDependencies": {
"babel-jest": "21.2.0",
"babel-preset-react-native": "4.0.0",
"jest": "21.2.1",
"react-test-renderer": "16.0.0"
},
"jest": {
"preset": "react-native"
}
}
App.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import MapView from 'react-native-maps'
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<MapView
style={styles.map}
region={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}}
>
</MapView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
},
});
Edit: Because some people asked me for stack trace: Sample 1
Solution
Can you provide some stack traces so that we can have a better insight on your problem? Your problem description sounds like your phone is not connected to the internet and this is why map is not rendered.
Regardless, here's some tips to get react-native-maps
running based on my past experiences.
- First and foremost, always configure your Android app according to the official documentation here.
- Make sure a Google Maps API key is generated through the console.
- Check whether your
react-native-maps
is compatible with yourreact-native
version. - Check your android build-tools version.
- If you are using the android emulator from Genymotion (older version), make sure you include Google Play Services, otherwise Map will not work.
- Active internet connection. Make sure your phone or emulator is connected for the Map to load (iOS is good without internet access).
- Always inject a
latlong
object to theinitialRegion
prop so that the map knows where to focus on.
Answered By - Rex Low
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.