react-native-maps: Doesn't work on Android
Here is my component:
import React from 'react-native'
const {View, Text, ScrollView, Dimensions, StyleSheet} = React
import {observe} from 'JB/observeMixin'
import connectToStores from 'JB/connect'
import MapView from 'react-native-maps';
var { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE = 37.78825;
const LONGITUDE = -122.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
let hocs = compose(
observe(loggedInUser$)
,
connectToStores({
jobs: 'employer.jobs',
profile: 'user.profile',
}, {
changePage,
})
)
export default hocs(class EmployerDashboard extends React.Component {
constructor(props) {
super(props)
this.state = {
hidemap: false,
region: {
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
},
}
}
componentDidMount() {
unfinishedJobs = [];
}
componentDidUpdate(prevProps, prevState) {
unfinishedJobs = [];
}
// map example methods
onRegionChange(region) {
this.setState({ region });
}
jumpRandom() {
this.setState({ region: this.randomRegion() });
}
animateRandom() {
this.refs.map.animateToRegion(this.randomRegion());
}
randomRegion() {
var { region } = this.state;
return {
...this.state.region,
latitude: region.latitude + (Math.random() - 0.5) * region.latitudeDelta / 2,
longitude: region.longitude + (Math.random() - 0.5) * region.longitudeDelta / 2,
};
}
render() {
const {profile, jobs, Actions} = this.props
const {hidemap} = this.state
const goToPage = (...args) => _ => Actions.changePage(...args)
const toggleMap = _ => this.setState({ hidemap: !hidemap })
console.log('MapView', MapView)
return (
<View style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'flex-end',
alignItems: 'center',
backgroundColor: 'green'
}}>
<MapView
ref="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'red'
}}
region={this.state.region}
onRegionChange={this.onRegionChange.bind(this)}
>
</MapView>
<MaterialButtonFixed
onPress={ goToPage('employer.hire', {unfinishedJobs}) }
text='HIRE!'
/>
</View>
)
}
})
"react": "^0.14.6",
"react-native": "^0.18.0",
"react-native-maps": "^0.2.3",
right now it works in iOS properly. In android i see only green background of the View container, nothing else
Also, please, mention in the installation guide that developer should have Google Play Services, Google Play Repository and Google Play APK Expansion Library installed in the android SDK.
By the way, may be I should have some other dependencies installed and this is the reason, why the map is not displayed in android in my case?
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Comments: 28 (8 by maintainers)
Got same problem. Fixed by creating new project in Google Developer Console, enabling Google Maps Android API in Developer Console, creating new key (for Android) and rebuilding application with new key