0

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;
Samuli Hakoniemi
  • 18,740
  • 1
  • 61
  • 74
Joey Yi Zhao
  • 37,514
  • 71
  • 268
  • 523

2 Answers2

2

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.

Community
  • 1
  • 1
Samuli Hakoniemi
  • 18,740
  • 1
  • 61
  • 74
0

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

Community
  • 1
  • 1
Florin Dobre
  • 9,872
  • 3
  • 59
  • 93