Question 33671 in React native Question posted in
The official React Native documentation can be found here.

Map and Marker not Showing in React Native

I have been working on a problem for 2 days now, with react-native-maps.
This is my whole component

Show Static Map on Screen:

I am unable to properly show the map and marker on the screen

What I have done

Here. is my code to replicate the issue

import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';
import React, {useEffect, useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';

const AirlineScreen = () => {
  return (
    <View style={styles.screenContainer}>
      <MapView
        provider={PROVIDER_GOOGLE}
        initialRegion={{
          latitude: -30.559483,
          longitude: 22.937506,
          latitudeDelta: 0.09,
          longitudeDelta: 0.04,
        }}
        zoomControlEnabled={true}
        mapType={'standard'}
        style={styles.mapStyle}>
        <Marker
          coordinate={{
            latitude: -26.1392,
            longitude: 28.246,
          }}
        />
      </MapView>
    </View>
  );
};

const styles = StyleSheet.create({
  screenContainer: {
    flex: 1,
    padding: 16,
  },
  mapStyle: {
    width: '100%',
    height: 300,
    marginTop: 10,
  },
});

export default AirlineScreen;

Emulator Screen

This is the whole component but the map and Marker is not showing. What did I miss.

Please Help

Tags:

2

Answers


  1. 0

    Will you take another look at your styles object? you have that being created outside of the component. I made a stackblitz of your application, It would not load. If it does I’ll check this myself.

    you could try making styles a property of the component, and use this.styles

    Login or Signup to reply.
  2. 0

    Adjust map size to device full dimensions:

    import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';
import React, {useEffect, useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';

const AirlineScreen = () => {
  return (
    <View style={styles.screenContainer}>
      <MapView
        provider={PROVIDER_GOOGLE}
        initialRegion={{
          latitude: -30.559483,
          longitude: 22.937506,
          latitudeDelta: 0.09,
          longitudeDelta: 0.04,
        }}
        zoomControlEnabled={true}
        mapType={'standard'}
        style={styles.mapStyle}>
        <Marker
          coordinate={{
          latitude: -30.559483,
          longitude: 22.937506,
          }}
        />
      </MapView>
    </View>
  );
};

const styles = StyleSheet.create({
  screenContainer: {
    flex: 1,
    padding: 16,
  },
  mapStyle: {
  ...StyleSheet.absoluteFillObject
  },
});

export default AirlineScreen;

    Live Demo – https://snack.expo.dev/@emmbyiringiro/map-with-marker?platform=ios

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search