Issues w/ above/belowLayerId

[bradherman]

I'm currently rendering a MapView with a PointAnnotation showing the users avatar and a line showing the path traveled.

When not specifying any above/below layer ids, the line always renders on top of the avatar. If I specify aboveLayerId="route-line" or aboveLayerId="route-source" on the PointAnnotation, it doesn't change anything. If I specify belowLayerId="current-location" on the LineLayer, then no line renders at all. What am I doing wrong?

<MapboxGL.MapView
	ref={mapRef}
	style={styles.map}
	styleURL={"mapbox://styles/ruckusapp/cm8urb2dp00zr01sr7g2bbit2"}
	// styleURL={Mapbox.StyleURL.Dark}
	onDidFinishLoadingMap={() => {
		mapRef.current?.setNativeProps({});
		setMapReady(true);
	}}
>
	<MapboxGL.Camera
		ref={cameraRef}
		zoomLevel={15}
		centerCoordinate={[location.longitude, location.latitude]}
		animationMode="flyTo"
		animationDuration={500}
	/>

	{/* User location marker */}
	{location && (
		<MapboxGL.PointAnnotation
			ref={markerRef}
			id="current-location"
			coordinate={[location.longitude, location.latitude]}
		>
			<View
				collapsable={false}
				style={tw`justify-center items-center relative`}
			>
				<View
					style={tw`w-10 h-10 bg-[#f28230] opacity-70 top-0 left-0 rounded-full`}
				/>
				<View
					style={tw`w-10 h-10 rounded-full overflow-hidden absolute left-0 top-0 flex justify-center items-center`}
				>
					<Image
						style={tw`w-8 h-8 bg-red-500 rounded-full top-0 left-0 overflow-hidden`}
						source={{ uri: "https://i.pravatar.cc/300" }}
						onLoad={() => {
							markerRef.current?.refresh();
						}}
					/>
				</View>
			</View>
		</MapboxGL.PointAnnotation>
	)}

	{/* Route line */}
	{routeCoordinates.length > 1 && (
		<MapboxGL.ShapeSource
			id="route-source"
			shape={{
				type: "Feature",
				properties: {},
				geometry: {
					type: "LineString",
					coordinates: mapboxRouteCoordinates,
				},
			}}
		>
			<MapboxGL.LineLayer
				id="route-line"
				style={{
					lineColor: "#f28230",
					lineWidth: 8,
					lineCap: "round",
					lineJoin: "round",
				}}
			/>
		</MapboxGL.ShapeSource>
	)}
</MapboxGL.MapView>