panelui-native 0.77.0 → 0.79.0

package/src/components/map/index.tsx

@@ -43,7 +43,7 @@ import {
   useState,
   type ReactNode,
 } from 'react';
-import { Pressable, View, type PressableProps, type ViewProps } from 'react-native';
+import { Pressable, StyleSheet, View, type PressableProps, type ViewProps } from 'react-native';
 import { useCSSVariable } from 'uniwind';
 import { tv } from 'tailwind-variants';
 import { CompassIcon, CrosshairIcon, MinusIcon, PlusIcon } from '../../icons';
@@ -62,6 +62,7 @@ import {
   type LngLat,
   type LngLatBounds,
   type MapRef,
+  type PixelPoint,
   type StyleSpecification,
   type ViewState,
 } from './maplibre';
@@ -70,9 +71,10 @@ import {
   type MapFeatureAccessibility,
   type MapFeatureAccessibilityDescription,
 } from './map-accessibility';
+import { asMapLayer, partitionMapChildren } from './map-children';
 
 export { hasMapLibre, CARTO_SOURCE };
-export type { BasemapSource, BasemapTokens, LngLat, LngLatBounds, ViewState };
+export type { BasemapSource, BasemapTokens, LngLat, LngLatBounds, PixelPoint, ViewState };
 export type { MapFeatureAccessibility } from './map-accessibility';
 
 const mapVariants = tv({
@@ -251,8 +253,12 @@ export interface MapProps extends Omit<ViewProps, 'children'> {
   interactive?: boolean;
   /** Fires continuously while the map moves. */
   onViewStateChange?: (state: ViewState) => void;
-  /** Fires when the map is pressed somewhere that is not a feature. */
-  onPress?: (lngLat: LngLat) => void;
+  /**
+   * Fires when the map is pressed somewhere that is not a feature. The second
+   * argument is the same press in screen coordinates, for anchoring something
+   * of your own to where the finger landed.
+   */
+  onPress?: (lngLat: LngLat, point: PixelPoint) => void;
   /** Fires once the style has loaded and the first frame is drawn. */
   onReady?: () => void;
 }
@@ -386,9 +392,17 @@ const MapRoot = forwardRef<MapHandle, MapProps>(function MapRoot(
 
   const { Map: MapLibreMap, Camera } = MapLibre;
 
+  /*
+   * Only what the renderer understands is handed to it. Controls and any other
+   * chrome are drawn as a sibling above the map instead, because the native map
+   * view lays its own children out and would stretch an ordinary view over the
+   * whole surface — see `map-children.ts`.
+   */
+  const { layers, overlay } = partitionMapChildren(children);
+
   return (
-    <View className={slots.root({ className })} {...props}>
-      <MapContext.Provider value={context}>
+    <MapContext.Provider value={context}>
+      <View className={slots.root({ className })} {...props}>
         <MapLibreMap
           ref={mapRef}
           mapStyle={style}
@@ -417,7 +431,7 @@ const MapRoot = forwardRef<MapHandle, MapProps>(function MapRoot(
           }
           onPress={
             onPress
-              ? (event) => onPress(event.nativeEvent.coordinates)
+              ? (event) => onPress(event.nativeEvent.lngLat, event.nativeEvent.point)
               : undefined
           }
         >
@@ -433,38 +447,43 @@ const MapRoot = forwardRef<MapHandle, MapProps>(function MapRoot(
                 : { center: center ?? [0, 20], zoom, bearing, pitch }
             }
           />
-          {textChildren(children)}
+          {layers}
         </MapLibreMap>
-      </MapContext.Provider>
-      <View
-        accessibilityRole="list"
-        style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden' }}
-      >
-        {[...accessibleFeatureGroups].flatMap(([groupId, group]) =>
-          group.features.map(({ feature, label, hint, state }, index) =>
-            group.onPress ? (
-              <Pressable
-                key={`${groupId}-${index}`}
-                accessibilityRole="button"
-                accessibilityLabel={label}
-                accessibilityHint={hint}
-                accessibilityState={state}
-                onPress={() => group.onPress?.(feature)}
-              />
-            ) : (
-              <View
-                key={`${groupId}-${index}`}
-                accessible
-                accessibilityRole="text"
-                accessibilityLabel={label}
-                accessibilityHint={hint}
-                accessibilityState={state}
-              />
+        {overlay.length > 0 ? (
+          <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+            {textChildren(overlay)}
+          </View>
+        ) : null}
+        <View
+          accessibilityRole="list"
+          style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden' }}
+        >
+          {[...accessibleFeatureGroups].flatMap(([groupId, group]) =>
+            group.features.map(({ feature, label, hint, state }, index) =>
+              group.onPress ? (
+                <Pressable
+                  key={`${groupId}-${index}`}
+                  accessibilityRole="button"
+                  accessibilityLabel={label}
+                  accessibilityHint={hint}
+                  accessibilityState={state}
+                  onPress={() => group.onPress?.(feature)}
+                />
+              ) : (
+                <View
+                  key={`${groupId}-${index}`}
+                  accessible
+                  accessibilityRole="text"
+                  accessibilityLabel={label}
+                  accessibilityHint={hint}
+                  accessibilityState={state}
+                />
+              )
             )
-          )
-        )}
+          )}
+        </View>
       </View>
-    </View>
+    </MapContext.Provider>
   );
 });
 MapRoot.displayName = 'Map';
@@ -578,6 +597,7 @@ function MapMarker({
   );
 }
 MapMarker.displayName = 'Map.Marker';
+asMapLayer(MapMarker);
 
 export interface MapLabelProps {
   children?: ReactNode;
@@ -691,6 +711,7 @@ function MapPopup({ children, className, title, lngLat }: MapPopupProps) {
   );
 }
 MapPopup.displayName = 'Map.Popup';
+asMapLayer(MapPopup);
 
 export interface MapControlsProps {
   /** Which corner the stack sits in. */
@@ -889,6 +910,7 @@ function MapRoute({
   );
 }
 MapRoute.displayName = 'Map.Route';
+asMapLayer(MapRoute);
 
 export interface MapArcProps {
   /** Where the arc starts. */
@@ -968,6 +990,7 @@ function MapArc({
   );
 }
 MapArc.displayName = 'Map.Arc';
+asMapLayer(MapArc);
 
 export interface MapGeoJSONProps {
   /** A Feature, FeatureCollection, or the URL of one. */
@@ -1042,6 +1065,7 @@ function MapGeoJSON({
   );
 }
 MapGeoJSON.displayName = 'Map.GeoJSON';
+asMapLayer(MapGeoJSON);
 
 export interface MapClusterProps {
   /** Point features to cluster. */
@@ -1140,6 +1164,7 @@ function MapCluster({
   );
 }
 MapCluster.displayName = 'Map.Cluster';
+asMapLayer(MapCluster);
 
 function useAccessibleMapFeatures(
   id: string,
@@ -1379,6 +1404,7 @@ function MapHeatmap({
   );
 }
 MapHeatmap.displayName = 'Map.Heatmap';
+asMapLayer(MapHeatmap);
 
 export interface MapUserLocationProps {
   /** Show which way the device is facing, not just where it is. */
@@ -1397,6 +1423,7 @@ function MapUserLocation({
   return <UserLocation heading={heading} accuracy={accuracy} />;
 }
 MapUserLocation.displayName = 'Map.UserLocation';
+asMapLayer(MapUserLocation);
 
 export const Map = Object.assign(MapRoot, {
   Marker: MapMarker,

package/src/components/map/map-children.ts

@@ -0,0 +1,66 @@
+/**
+ * Which of a map's children belong to the renderer, and which belong to us.
+ *
+ * The native map view is not a React Native container. On Android it is a real
+ * `FrameLayout`, and it lays its children out itself — so an ordinary view
+ * handed to it loses the frame the layout engine computed, arrives stretched
+ * to the full size of the map, and covers the surface the map is drawn on. A
+ * control group written to sit in a corner ends up in the top-left, full
+ * bleed, with the map invisible behind it.
+ *
+ * So the children are split before they are mounted. Anything the renderer
+ * understands — a marker, a route, a layer — goes inside it. Everything else,
+ * including `Map.Controls` and any chrome written at the call site, is drawn
+ * as a sibling above the map, where the layout engine still owns it.
+ *
+ * Parts opt in by carrying `MAP_LAYER`, so the rule is a property of the part
+ * rather than a list kept somewhere else that a new part could be left out of.
+ */
+import { Children, isValidElement, type ReactNode } from 'react';
+
+/** Marks a component that has to be mounted inside the native map view. */
+export const MAP_LAYER = Symbol.for('panelui.map.layer');
+
+type Layer = { [MAP_LAYER]?: true };
+
+/** Tags a part as belonging inside the renderer, and hands it back. */
+export function asMapLayer<T>(part: T): T {
+  (part as T & Layer)[MAP_LAYER] = true;
+  return part;
+}
+
+/** Whether an element type has been tagged with {@link asMapLayer}. */
+export function isMapLayer(type: unknown): boolean {
+  return (
+    (typeof type === 'function' || typeof type === 'object') &&
+    type !== null &&
+    (type as Layer)[MAP_LAYER] === true
+  );
+}
+
+export interface PartitionedMapChildren {
+  /** Mounted inside the native map view. */
+  layers: ReactNode[];
+  /** Drawn as a sibling above it, where React Native's layout still applies. */
+  overlay: ReactNode[];
+}
+
+/**
+ * Splits a map's children into the two halves above.
+ *
+ * A child that is not an element at all — a string, a number, a nullish branch
+ * — goes to the overlay. The renderer drops what it does not recognise, and
+ * drops it *silently*, which also puts its own child bookkeeping out of step
+ * with React's.
+ */
+export function partitionMapChildren(children: ReactNode): PartitionedMapChildren {
+  const layers: ReactNode[] = [];
+  const overlay: ReactNode[] = [];
+
+  Children.forEach(children, (child) => {
+    if (isValidElement(child) && isMapLayer(child.type)) layers.push(child);
+    else if (child !== null && child !== undefined && child !== false) overlay.push(child);
+  });
+
+  return { layers, overlay };
+}

package/src/components/map/maplibre.ts

@@ -27,6 +27,7 @@
  * below against the package rather than assuming they survived.
  */
 import type { ComponentType, ReactElement, ReactNode, Ref } from 'react';
+import { TurboModuleRegistry } from 'react-native';
 
 /** `[longitude, latitude]` — the order the style spec uses, not the spoken one. */
 export type LngLat = [number, number];
@@ -34,6 +35,9 @@ export type LngLat = [number, number];
 /** `[west, south, east, north]`. */
 export type LngLatBounds = [number, number, number, number];
 
+/** `[x, y]` in points, measured from the map's own top-left corner. */
+export type PixelPoint = [number, number];
+
 /**
  * A MapLibre style document. Left loose on purpose: the spec is large, it is
  * versioned separately from this library, and the parts of it callers pass
@@ -121,7 +125,7 @@ interface MapLibreModule {
     touchPitch?: boolean;
     accessible?: boolean;
     importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants';
-    onPress?: (event: NativeEvent<{ coordinates: LngLat }>) => void;
+    onPress?: (event: NativeEvent<{ lngLat: LngLat; point: PixelPoint }>) => void;
     onDidFinishLoadingMap?: () => void;
     onRegionDidChange?: (event: NativeEvent<ViewState>) => void;
     children?: ReactNode;
@@ -172,12 +176,35 @@ interface MapLibreModule {
   }>;
 }
 
+/**
+ * Whether the renderer's native half is actually in this binary.
+ *
+ * The JavaScript resolving is not the question. A project that installed the
+ * package and then ran in a client built without it — Expo Go being the one
+ * everybody meets — has the JavaScript and none of the native views, and a
+ * `require` that succeeds there is a `require` that lies. The component would
+ * then try to mount a view nothing has registered, which is a crash in native
+ * code where a `try` in JavaScript has nothing to catch.
+ *
+ * `TurboModuleRegistry.get` answers the real question and returns null instead
+ * of throwing, so the graceful fallback the component already draws is reached
+ * rather than skipped.
+ */
+function nativeRendererPresent(): boolean {
+  try {
+    return TurboModuleRegistry.get('MLRNMapViewModule') !== null;
+  } catch {
+    return false;
+  }
+}
+
 /**
  * The renderer, or null when it is not installed. Resolved once at module
  * load — the require is cheap, and caching it keeps a try/catch out of render.
  */
 const maplibre: MapLibreModule | null = (() => {
   try {
+    if (!nativeRendererPresent()) return null;
     // eslint-disable-next-line @typescript-eslint/no-require-imports
     return require('@maplibre/maplibre-react-native') as MapLibreModule;
   } catch {
@@ -188,9 +215,10 @@ const maplibre: MapLibreModule | null = (() => {
 /**
  * True when a map can actually be drawn.
  *
- * False in any client that cannot load native modules, and in any project that
- * has not installed the renderer. Worth checking before routing somewhere whose
- * whole content is a map.
+ * False in any client that cannot load native modules — Expo Go included, even
+ * with the package installed — and in any project that has not installed the
+ * renderer. Worth checking before routing somewhere whose whole content is a
+ * map.
  */
 export const hasMapLibre = maplibre !== null;