LineLayer not visible if conditionally rendered

[bryanvanwijk]

Steps to Trigger Behavior

1. Render MapView without a LineLayer
2. After a timeout update state which triggers rendering a LineLayer (simulating a network request)
3. ShapeSource and LineLayer are rendered but not visible on the map
4. After calling setCamera the LineLayer actually becomes visible.

export default function MapScreen() {
  const [shape, setShape] = useState<GeoJSON.Feature | null>(null);
  const cameraRef = React.useRef<CameraRef>(null);

  useEffect(() => {
    // Simulate network request
    setTimeout(() => {
      setShape(getShape());
    }, 1000);
  }, []);

  return (
    <View style={styles.page}>
      <MapView style={styles.map} styleJSON={mapStyle}>
        <Camera
          ref={cameraRef}
          defaultSettings={{
            bounds: { ne: [5.25986, 52.43567], sw: [5.1223, 52.3294] },
          }}
        />
        {!!shape && (
          <ShapeSource id="line-source" shape={shape}>
            <LineLayer
              id="polyline"
              style={{ lineColor: "#37BDEF", lineWidth: 4 }}
            />
          </ShapeSource>
        )}
      </MapView>
      <Button
        title={"Zoom to shape"}
        onPress={() =>
          cameraRef.current?.setCamera({
            bounds: { ne: [5.25986, 52.43567], sw: [5.1223, 52.3294] },
          })
        }
      />
    </View>
  );
}

Link to Minimal Reproducible Example

https://github.com/bryanvanwijk/maplibre-test/blob/main/app/map.tsx

Expected Behavior

LineLayer is visible on the map when rendered

Actual Behavior

LineLayer is not visible

Screenshots (if applicable)

recording.mp4

Environment

• Platform: iOS
• OS version: iOS 18
• Device type: iPhone 16
• Emulator or Simulator: yes
• Development OS: macOS 15.1.1
• @maplibre/maplibre-react-native Version: 10.0.0-beta.18
• react-native Version: 0.76.5
• expo Version: 52.0.18

Additional context

There is no issue without the new architecture enabled.

[KiwiKilian]

Thanks for the report, does this also happen with the latest beta?

[bryanvanwijk]

@KiwiKilian yes, I see the same behaviour with 10.0.0-beta.18

[KiwiKilian]

Can confirm on iOS and new architecture. Here is a minimal reproduction without other deps, press the back button to make the line visible:

import {
  LineLayer,
  MapView,
  ShapeSource,
} from "@maplibre/maplibre-react-native";
import type { Geometry } from "geojson";
import { useEffect, useState } from "react";

export function BugReport() {
  const [shape, setShape] = useState<Geometry>();

  useEffect(() => {
    // Simulate network request
    setTimeout(() => {
      setShape({
        type: "LineString",
        coordinates: [
          [0, 0],
          [50, 50],
        ],
      });
    }, 500);
  }, []);

  return (
    <>
      <MapView style={{ flex: 1 }}>
        {shape && (
          <ShapeSource key="shape-source" id="line-source" shape={shape}>
            <LineLayer
              key="line-layer"
              id="polyline"
              style={{ lineColor: "#37BDEF", lineWidth: 4 }}
            />
          </ShapeSource>
        )}
      </MapView>
    </>
  );
}

Here is a workaround. It seems like there is a problem, when the source and layer get added at the same time:

import {
  LineLayer,
  MapView,
  ShapeSource,
} from "@maplibre/maplibre-react-native";
import type { Geometry } from "geojson";
import { useEffect, useState } from "react";

export function BugReport() {
  const [shape, setShape] = useState<Geometry>();

  useEffect(() => {
    // Simulate network request
    setTimeout(() => {
      setShape({
        type: "LineString",
        coordinates: [
          [0, 0],
          [50, 50],
        ],
      });
    }, 500);
  }, []);

  return (
    <>
      <MapView style={{ flex: 1 }}>
        <ShapeSource
          key="shape-source"
          id="line-source"
          shape={shape || { type: "GeometryCollection", geometries: [] }}
        >
          <LineLayer
            key="line-layer"
            id="polyline"
            style={{ lineColor: "#37BDEF", lineWidth: 4 }}
          />
        </ShapeSource>
      </MapView>
    </>
  );
}