Merge pull request #44767 from callstack-internal/fix/mapbox-initiali…

…zation fix: render Mapbox.MapView when access token is correctly set
Expensify · Jul 8, 2024 · 9dccffe · 9dccffe
2 parents 4a3ecb3 + 5b489bd
commit 9dccffe
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx
@@ -37,6 +37,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
         const currentPosition = userLocation ?? initialLocation;
         const [userInteractedWithMap, setUserInteractedWithMap] = useState(false);
         const shouldInitializeCurrentPosition = useRef(true);
+        const [isAccessTokenSet, setIsAccessTokenSet] = useState(false);
 
         // Determines if map can be panned to user's detected
         // location without bothering the user. It will return
@@ -138,7 +139,12 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
         }, [navigation]);
 
         useEffect(() => {
-            setAccessToken(accessToken);
+            setAccessToken(accessToken).then((token) => {
+                if (!token) {
+                    return;
+                }
+                setIsAccessTokenSet(true);
+            });
         }, [accessToken]);
 
         const setMapIdle = (e: MapState) => {
@@ -198,7 +204,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
         const initCenterCoordinate = useMemo(() => (interactive ? centerCoordinate : undefined), [interactive, centerCoordinate]);
         const initBounds = useMemo(() => (interactive ? undefined : waypointsBounds), [interactive, waypointsBounds]);
 
-        return !isOffline && !!accessToken && !!defaultSettings ? (
+        return !isOffline && isAccessTokenSet && !!defaultSettings ? (
             <View style={[style, !interactive ? styles.pointerEventsNone : {}]}>
                 <Mapbox.MapView
                     style={{flex: 1}}