Blank map when using MapView in react-native

Issue

I am attempting to implement MapView component in my react-native app, but when I run the app, all I get is a blank square where the map should be (surrounded by a red border.

I am using genymotion and I have google play services installed.

This is what my component looks like...

class MainMap extends Component {
    constructor() {
    super();
  }
    render(){
        return (
            <View style={styles.container}>
            <MapView
        style={ styles.map }
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
  </View>
        )
    }
}


const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

function mapStateToProps(state) {
    return {
        users: state.users
    };
}

export default connect(mapStateToProps)(MainMap);

Why will this not work? Do I have to configure something more in my emulator? I've noticed this is a re-occurring issue for android, but I cannot find a clear solution.

Solution

MapView is only supported on iOS as of now.
https://facebook.github.io/react-native/docs/mapview.html

Use react-native-maps for cross-platform support.

Answered By - vinayr