SymbolLayer is not updating with useState variables

[masonkieth]

I have the following code where I'm pulling a list of features out of a Supabase project. The map won't load the features in unless I load the map WITHOUT the ShapeSource component, then if I paste the ShapeSource component in and save, THEN the project will hot reload and the features will show up. This leads me to believe that I've got a State issue and I'm lost as to what I'm doing wrong.

Currently using iOS only, have not tested on Android.

import React, { useState, useEffect, useRef } from "react";
import { StyleSheet, View } from "react-native";
import Shell from "@/components/Shell";
import { IconButton, AddIcon, Center } from "native-base";
import Mapbox, { SymbolLayer, Location, Camera, Images } from "@rnmapbox/maps";
import MarkMarker from "@/components/MarkMarker";
import { getMarkerLocations } from "@/lib/supabase";

Mapbox.setAccessToken(process.env.EXPO_PUBLIC_MAPBOXTOKEN);

const MapView = () => {
  const [showModal, setShowModal] = useState(false);
  const camera = useRef<Camera>(null);
  const [userLocation, setUserLocation] = useState<Location | null>(null);
  const [locations, setLocations] = useState();

  async function getLocations() {
    const res = await getMarkerLocations();
    setLocations(res);
    console.log("Get Locations: ", res);
  }

  useEffect(() => {
    getLocations();
  }, []);

  useEffect(() => {
    if (userLocation != null) {
      const lat = userLocation.coords.latitude;
      const lon = userLocation.coords.longitude;
      // camera.current?.setCamera({
      //   centerCoordinate: [lon, lat],
      //   zoomLevel: 15,
      // });
    }
  }, [userLocation]);

  return (
    <Shell camera={camera.current}>
      <View style={styles.page}>
        <View style={styles.container}>
          <Mapbox.MapView
            attributionPosition={{ bottom: 24, left: 12 }}
            scaleBarEnabled={false}
            logoEnabled={false}
            styleJSON={
              "mapbox://styles/carbondesignsystem/ck7c8cfpp08h61irrudv7f1xg"
            }
            style={styles.map}
          >
            <Camera ref={camera} />
            <Mapbox.UserLocation visible onUpdate={(l) => setUserLocation(l)} />
            <Mapbox.ShapeSource id="Marker" shape={locations}>
              <Mapbox.SymbolLayer
                id="MarkerLocations"
                style={{
                  iconImage:
                    "http://localhost:54321/storage/v1/object/public/map-assets/icons/location--filled.png",
                  iconSize: 0.5,
                  textField: "M",
                }}
              />
            </Mapbox.ShapeSource>
          </Mapbox.MapView>
        </View>
      </View>
    </Shell>
  );
};

export default MapView;

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  container: {
    height: "100%",
    width: "100%",
  },
  map: {
    flex: 1,
  },
});

[mfazekas]

I think it's because you try to render a shapeSource with shape=undefined.
Don't you see Redbox error about it?

[masonkieth]

Thank you for you response! I'm not getting any errors in the UI and I'm not seeing any logged errors in the console. Typescript has a handful of warnings, but I actually don't recall one for the locations variable.

When I can get back on this project later today I will try initializing locations with an Object, and features, and see if adjusts the behavior.

[masonkieth]

I guess I've got a misunderstanding of what useState() is doing. I was under the impression that even though I was passing undefined variables they were still getting a reference that would be updated when setState() was called. I don't make a habit of doing so, but I also never considered it as the source of a bug... 😅

That said, I updated:

  const [locations, setLocations] = useState({});

And now when it's updating as expected. And follow up on my last response, it was failing silently... Not even a linter error. 🤔