panelui-native 0.78.0 → 0.79.0

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;