CODEWITHSUNDEEP
androidgoogle-mapsreact-native
Joey Yi Zhao
Joey Yi Zhao

Reputation: 42464

Map doesn't shown on android simulator when using react-native-maps

I am using react-native-maps for android development. I followed the instruction from this link: https://github.com/lelandrichardson/react-native-maps/blob/master/docs/installation.md. After launch the app, the UI doesn't show the map. Instead, it shows an empty page. Below is the code I used. The similar code works fine on iOS simulator. I don't know why not working on android.

import React, {


AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Image,
  ListView,
  TextInput,
  TouchableHighlight,
  Dimensions,
  MaterialButtonFixed,
 //MapView,
} from 'react-native';

import MapView from 'react-native-maps';


class MapPage extends Component{

    constructor(props){
        super(props);
        this.state = {
            region:{
                latitude: 4.21048,
                longitude: 101.97577,
                latitudeDelta: 1,
                longitudeDelta: 10,
            }
        }
    }

    onRegionChange(region){
        console.log('region changed ', region);
        this.setState({region});

    }

    render() {
        return(
            <View style={styles.container}>
                <MapView 
                      ref="map"
                   style={ styles.map }
                   mapType={"standard"}
                   region={this.state.region}
                   zoomEnabled={true}
                   scrollEnabled={true}
                   showsScale={true}
                   onRegionChange={this.onRegionChange.bind(this)}
                 >

                 </MapView>
            </View>
            )
    }
}

const styles = StyleSheet.create({
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 30,
    marginTop: 65,
    flex:1,
    padding: 30,
    alignItems: 'center',
    // flexDirection: 'row',
    alignSelf: 'stretch',
    backgroundColor: 'red',
  },
  inputText: {

    height: 36,
      padding: 4,
      marginRight: 5,
      flex: 4,
      fontSize: 18,
      borderWidth: 1,
      borderColor: '#48BBEC',
      borderRadius: 8,
      color: '#48BBEC'
  }
});


module.exports = MapPage;

Upvotes: 0

Views: 1594

Answers (2)

Florin Dobre
Florin Dobre

Reputation: 10232

I had a similar issue. I used adb logcat to trace it.

I discovered I had an issue with the package link (Fixed it with react-native link) and the simulator device.

I added a detailed description of my solution here: Android Warning: Native component for "AIRMap" does not exist

Upvotes: 0

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19049

This is known problem, especially on Android 4.x. There may be several issues causing that, but first thing to do is to add Google Apps (and Play Services) to your simulator: How to install Google Play Services in a Genymotion VM (with no drag and drop support)?

Also read Issues section from react-native-maps repo, there may be helpful leads to fix your problem.

Upvotes: 2

Related Questions