@poilabs-dev/navigation-sdk-plugin/src/PoiMapView.js

Expo plugin for Poilabs Navigation SDK integration

import React, { useEffect, useRef } from "react";
import {
  requireNativeComponent,
  UIManager,
  findNodeHandle,
  Platform,
  View,
  NativeModules,
} from "react-native";

// Platform-specific module names
const ModuleName =
  Platform.OS === "ios" ? "PoilabsNavigationBridge" : "PoiMapModule";
const NativeModule = NativeModules[ModuleName];

let NativeMap;

// Try to load native components with proper error handling
if (Platform.OS === "android") {
  try {
    NativeMap = requireNativeComponent("PoiMapViewManager");
  } catch (e) {
    NativeMap = View; // Fallback to regular View
  }
} else if (Platform.OS === "ios") {
  try {
    NativeMap = requireNativeComponent("PoilabsNavigationMap");
  } catch (e) {
    NativeMap = View; // Fallback to regular View
  }
} else {
  NativeMap = View;
}

const PoiMapView = ({
  applicationId,
  applicationSecret,
  uniqueId,
  language = "en",
  showOnMap,
  getRouteTo,
  style,
  ...rest
}) => {
  const ref = useRef(null);
  const initializedRef = useRef(false);

  useEffect(() => {
    // Only initialize once when we have all required props
    if (
      applicationId &&
      applicationSecret &&
      uniqueId &&
      !initializedRef.current
    ) {
      initializeSDK();
      initializedRef.current = true;
    }
  }, [applicationId, applicationSecret, uniqueId]);

  useEffect(() => {
    // Handle Android view creation
    if (Platform.OS === "android" && UIManager.getViewManagerConfig) {
      const viewManagerConfig =
        UIManager.getViewManagerConfig("PoiMapViewManager");

      if (viewManagerConfig && ref.current) {
        const id = findNodeHandle(ref.current);
        if (id && viewManagerConfig.Commands?.create) {
          setTimeout(() => {
            UIManager.dispatchViewManagerCommand(
              id,
              viewManagerConfig.Commands.create.toString(),
              [id]
            );
          }, 100);
        }
      }
    }
  }, []);

  const initializeSDK = async () => {
    if (!NativeModule) {
      return;
    }

    try {
      if (Platform.OS === "ios") {
        // iOS initialization
        await NativeModule.initNavigationSDK(
          applicationId,
          applicationSecret,
          uniqueId
        );
      }
    } catch (error) {
      console.error("❌ Failed to initialize SDK:", error);
    }
  };

  // Show a fallback view if native component failed to load
  if (NativeMap === View) {
    return (
      <View
        style={[
          {
            flex: 1,
            backgroundColor: "#f0f0f0",
            justifyContent: "center",
            alignItems: "center",
          },
          style,
        ]}
      >
        <View
          style={{
            padding: 20,
            backgroundColor: "#fff",
            borderRadius: 8,
            margin: 20,
          }}
        >
          <View style={{ marginBottom: 10 }}>
            <View style={{ fontSize: 16, fontWeight: "bold", color: "#333" }}>
              ⚠️ Navigation SDK Not Available
            </View>
          </View>
          <View style={{ fontSize: 14, color: "#666", textAlign: "center" }}>
            The native navigation component could not be loaded. Please ensure
            the SDK is properly installed.
          </View>
        </View>
      </View>
    );
  }

  return (
    <NativeMap
      ref={ref}
      applicationId={applicationId}
      applicationSecret={applicationSecret}
      uniqueId={uniqueId}
      language={language}
      showOnMap={showOnMap}
      getRouteTo={getRouteTo}
      style={[{ flex: 1 }, style]}
      {...rest}
    />
  );
};

export default PoiMapView;