Maybe it's a thing about the useEffects? Have you tried passing mapRegion to useEffect that is responsible for getting user's permission?
I have a similliar functionality, but i just pass the params of a Region I want to show to a user on the map. Here's the code, maybe You can get something out of it for Yourself.
Map.tsx
import React from 'react';
import { View, Text } from 'react-native';
import MapView, { Marker, Region } from 'react-native-maps';
import pinIcon from '../assets/icons/pinicon.png';
// Define the expected type for postLocation prop
type PostLocation = {
latitude: number;
longitude: number;
};
const Map = ({ postLocation }: { postLocation: PostLocation }) => {
const { latitude, longitude } = postLocation;
if (!latitude || !longitude) {
return (
<View style={{ justifyContent: 'center', alignItems: 'center', width: '100%', height: '100%' }}>
<Text>Location data not available.</Text>
</View>
);
}
const region: Region = {
latitude: latitude,
longitude: longitude,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
};
return (
<MapView
style={{ width: '100%', height: '100%' }}
region={region} // Use region to dynamically update the map
showsUserLocation={false}
>
<Marker
coordinate={{ latitude, longitude }}
title="Animal Location"
image={pinIcon}
/>
</MapView>
);
};
export default Map;
MapViewScreen.js
const { postData } = useLocalSearchParams();
const post = JSON.parse(postData); // Parse post data from string
// Define post location with latitude and longitude parsed as numbers
const postLocation = {
latitude: parseFloat(post.latitude),
longitude: parseFloat(post.longitude),
};
<Map postLocation={postLocation} />
Also, just thinking out loud, untill you find a proper solution, if moving a map slightly makes it refresh, maybe you can make it move slightly for example 0,0001 lat after it should render, so its unseeable for the user, but it refreshes the markers? Goodluck