Map and Marker not Showing in React Native-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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