The space at around of map issue

[sunshinelancer828]

Hi, there. how are you today.

import React, {useCallback, useEffect, useState} from 'react'; import {StyleSheet, Text, View} from 'react-native'; import { ZoomableMap, Geographies, Geography, Marker, Markers, } from 'react-native-simple-maps'; import {Path} from 'react-native-svg'; const geoFile = require('./json/world-50m.json');

const MAP_WIDTH = 500; const MAP_HEIGHT = 280;

const PortMapCard = ({portsData, selectedPort, setSelectedPort}) => { const [markers, setMarkers] = useState([]);

const projectionConfig = { yOffset: 50, precision: 0.01, scale: 100, rotation: [0, 0, 0], };

const handleClick = useCallback(marker => { setSelectedPort({id: marker.portID, name: marker.portName}); }, []);

const renderGeographies = (geographies, projection) => { const style = { fill: '#95d5f2', stroke: '#fff', strokeWidth: 0.3, fillRule: 'evenodd', }; return geographies.map((geography, index) => ( <Geography key={index} geography={geography} projection={projection} style={{ default: style, pressed: style, }} /> )); };

const renderMarker = (marker, i) => { return ( <Marker key={i} marker={marker} style={{ default: { opacity: selectedPort?.id === marker.portID ? 1 : 0.6, }, pressed: { opacity: 0.8, }, }} onLongPress={() => handleClick(marker)}> <Path d="M 10, 20 a 10,10 0 1,1 20,0 a 10,10 0 1,1 -20,0" fill="#0326b6" /> ); };

useEffect(() => { const markersData = portsData.reduce((markerData, port) => { return [ ...markerData, { coordinates: [port.lon, port.lat], portName: port.name, portID: port.id, }, ]; }, []); setMarkers(markersData); }, [portsData]);

return (

{(geographies, projection) => renderGeographies(geographies, projection) } {markers.map(renderMarker)}

); };

const styles = StyleSheet.create({ container: { width: '100%', height: 300, alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden', zIndex: -100, backgroundColor: '#bbefff2e', }, });

export default PortMapCard;

I developed simple map by using this modul. all are great. but I am not sure, why there is some space around of map.

when I push this map, it can move any where. but I don't want it. it should be not moved.