Issues with Google Maps / Mapbox etc inside a stack

[adamiprinciples]

I've got a very simple setup using parts of the example code to get me going. However I'm having issues using libraries like Google Maps or Mapbox where the code has to inject the map into the DOM. Mapbox gives me errors that the container isn't valid and Google just fails silently.

Both work when I'm not using a stack but as soon as I do things behave strangely.

I'm using code from the example folder and I've created what I think is the simplest possible approach

index.tsx

import { SplashScreen } from "@capacitor/splash-screen";
import React from "react";
import ReactDOM from "react-dom/client";

import "./app.css";
import Base from "./base";

/* Render root UI */
const root = document.getElementById("root");

if (root) {
  ReactDOM.createRoot(root).render(<Base />);
}

SplashScreen.hide({
  fadeOutDuration: 100,
});

base.tsx

import { NativeNavigationProvider } from "capacitor-native-navigation-react";
import {
  nativeNavigationNavigatorOptions,
  nativeNavigationReact,
} from "./init";

import React from "react";
import {
  NativeNavigation,
  StackSpec,
  ViewSpec,
} from "capacitor-native-navigation";
import { Routes, Route } from "react-router-dom";
import { NativeNavigationRouter } from "capacitor-native-navigation-react-router";
import Root from "./root";

export default function Base(): React.ReactElement {
  React.useEffect(() => {
    void setupStack({
      path: "/root",
      title: "Root",
      options: {
        bar: {
          background: {
            color: "#336699",
          },
          title: {
            color: "#DFEFEF",
            font: {
              name: "Solway",
              size: 26,
            },
          },
          buttons: {
            color: "#DDEEFF",
            font: {
              name: "Solway",
            },
          },
        },
      },
    });
  }, []);

  return (
    <NativeNavigationProvider value={nativeNavigationReact}>
      <div>
        <NativeNavigationRouter navigation={nativeNavigationNavigatorOptions}>
          <Routes>
            <Route path="root" element={<Root />} />
          </Routes>
        </NativeNavigationRouter>
      </div>
    </NativeNavigationProvider>
  );
}

async function setupStack(options: {
  path: string;
  title: string;
  options?: Partial<StackSpec>;
  viewOptions?: Partial<ViewSpec>;
}) {
  const stackRoot = await NativeNavigation.present({
    component: {
      alias: "rootStack",
      type: "stack",
      components: [
        {
          type: "view",
          path: options?.path,
          title: options?.title,
          ...options.viewOptions,
        },
      ],
      state: {
        fromRootStack: true,
      },
      ...options.options,
    },
    animated: true,
  });
  console.log("INIT: created", stackRoot.id);
}

root.tsx

import React from "react";
import { APIProvider, Map } from "@vis.gl/react-google-maps";

export default function Root(): React.ReactElement {
  return (
    <div>
      MAP
      <APIProvider apiKey={"REDACTED"}>
        <Map
          style={{ width: "100vw", height: "100vh" }}
          defaultCenter={{ lat: 22.54992, lng: 0 }}
          defaultZoom={3}
          gestureHandling={"greedy"}
          disableDefaultUI={true}
        />
      </APIProvider>
    </div>
  );
}

[adamiprinciples]

So i'm pretty sure it's related to portals. When I present my stack and inspect in the safari debugger, I see two webviews as expected. However, the code that should be executing in the new stack webview is actually executing in the one that created it

[adamiprinciples]

So I managed to find a workaround, it's pretty gross but it get's the job done for now.... Let me know if there's a better way!

import React from "react";
import { useNativeNavigationViewContext } from "capacitor-native-navigation-react";
import "mapbox-gl/dist/mapbox-gl.css";
import mapboxgl from "mapbox-gl";
import { Link } from "react-router-dom";

export default function Root(): React.ReactElement {
  const { viewWindow } = useNativeNavigationViewContext();
  const [map, setMap] = React.useState<mapboxgl.Map | null>(null);

  const createMap = () => {
    const script = viewWindow.document.createElement("script");
    script.src = "https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js";
    window.addEventListener("message", (event) => {
      console.log("Message received from viewWindow", event);
      setMap(window.map);
    });

    script.onload = () => {
      (viewWindow as Window & typeof globalThis).eval(`
      // Initialise Mapbox map
      mapboxgl.accessToken = 'REDACTED';
      const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [0, 0],
        zoom: 2
      });
      window.opener.map = map; // Expose map to the opener window
      window.opener.postMessage('Map created successfully');
    `);
    };
    viewWindow.document.head.appendChild(script);
  };

  React.useEffect(() => {
    createMap();
  }, []);

  React.useEffect(() => {
    if (map) {
      alert("Map ready!");
    }
  }, [map]);

  return (
    <>
      <div id="map" style={{ width: "100%", height: "100%" }} />
    </>
  );
}