@exterio/react-native-yamap-lite 1.0.1

package/src/Components/ClusteredYamap.tsx

@@ -0,0 +1,194 @@
+import {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  type ForwardedRef,
+} from 'react';
+import { findNodeHandle, Image, type NativeSyntheticEvent } from 'react-native';
+import type {
+  ClusteredYamapProps,
+  Point,
+  ScreenPoint,
+  YaMapRef,
+} from '../@types';
+import { YamapUtils } from '../Utils/YamapUtils';
+import ClusteredYamapLiteView from '../ClusteredYamapLiteViewNativeComponent';
+
+export const ClusteredYamap = forwardRef(
+  (props: ClusteredYamapProps, ref: ForwardedRef<YaMapRef>) => {
+    const nativeRef = useRef(null);
+    const latestProps = useRef(props);
+    latestProps.current = props;
+
+    const {
+      userLocationIcon,
+      interactive = true,
+      zoomGesturesEnabled = true,
+      scrollGesturesEnabled = true,
+      tiltGesturesEnabled = true,
+      rotateGesturesEnabled = true,
+      fastTapEnabled = true,
+      nightMode = false,
+      showUserPosition = false,
+      userLocationAccuracyFillColor = '#00FF00',
+      userLocationAccuracyStrokeColor = '#000000',
+      userLocationAccuracyStrokeWidth = 2,
+      userLocationIconScale = 1,
+      clusteredMarkers = [],
+      renderMarker = () => null,
+      clusterColor = '#FF0000',
+      children: userChildren,
+      onMapPress,
+      onMapLongPress,
+      onCameraPositionReceived: _onCameraPositionReceived,
+      onVisibleRegionReceived: _onVisibleRegionReceived,
+      onWorldToScreenPointsReceived: _onWorldToScreenPointsReceived,
+      onScreenToWorldPointsReceived: _onScreenToWorldPointsReceived,
+      ...otherProps
+    } = props;
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        getCameraPosition: async () => {
+          const result = await YamapUtils.getCameraPosition(
+            findNodeHandle(nativeRef.current)!
+          );
+          latestProps.current.onCameraPositionReceived?.({
+            nativeEvent: result,
+          });
+          return result;
+        },
+        getVisibleRegion: async () => {
+          const result = await YamapUtils.getVisibleRegion(
+            findNodeHandle(nativeRef.current)!
+          );
+          latestProps.current.onVisibleRegionReceived?.({
+            nativeEvent: result,
+          });
+          return result;
+        },
+        getScreenPoints: async (points: Point[]) => {
+          const result = await YamapUtils.getScreenPoints(
+            findNodeHandle(nativeRef.current)!,
+            points
+          );
+          latestProps.current.onWorldToScreenPointsReceived?.({
+            nativeEvent: { points: result.points },
+          });
+          return result.points;
+        },
+        getWorldPoints: async (points: ScreenPoint[]) => {
+          const result = await YamapUtils.getWorldPoints(
+            findNodeHandle(nativeRef.current)!,
+            points
+          );
+          latestProps.current.onScreenToWorldPointsReceived?.({
+            nativeEvent: { points: result.points },
+          });
+          return result.points;
+        },
+        setZoom: async (
+          zoom: number,
+          duration?: number,
+          animation?: 'LINEAR' | 'SMOOTH'
+        ) => {
+          await YamapUtils.setZoom(
+            findNodeHandle(nativeRef.current)!,
+            zoom,
+            duration ?? 500,
+            animation ?? 'SMOOTH'
+          );
+        },
+        setCenter: async (
+          center: Point,
+          zoom?: number,
+          azimuth?: number,
+          tilt?: number,
+          duration?: number,
+          animation?: 'LINEAR' | 'SMOOTH'
+        ) => {
+          await YamapUtils.setCenter(
+            findNodeHandle(nativeRef.current)!,
+            center.lat,
+            center.lon,
+            zoom ?? 10,
+            azimuth ?? 0,
+            tilt ?? 0,
+            duration ?? 500,
+            animation ?? 'SMOOTH'
+          );
+        },
+        fitAllMarkers: async () => {
+          await YamapUtils.fitAllMarkers(findNodeHandle(nativeRef.current)!);
+        },
+        fitMarkers: async (_markers: any[]) => {
+          await YamapUtils.fitAllMarkers(findNodeHandle(nativeRef.current)!);
+        },
+        getMapObjectCount: async () => {
+          return YamapUtils.getMapObjectCount(
+            findNodeHandle(nativeRef.current)!
+          );
+        },
+        setTrafficVisible: (_visible: boolean) => {
+          // Traffic layer is not available in lite SDK
+        },
+      }),
+      []
+    );
+
+    const userLocationIconUri = userLocationIcon
+      ? Image.resolveAssetSource(userLocationIcon).uri
+      : '';
+
+    const clusteredMarkersPoints = clusteredMarkers.map(
+      (marker) => marker.point as Point
+    );
+
+    const handleMapPress = (event: NativeSyntheticEvent<Point>) => {
+      if (onMapPress) {
+        onMapPress({
+          lat: event.nativeEvent.lat,
+          lon: event.nativeEvent.lon,
+        });
+      }
+    };
+
+    const handleMapLongPress = (event: NativeSyntheticEvent<Point>) => {
+      if (onMapLongPress) {
+        onMapLongPress({
+          lat: event.nativeEvent.lat,
+          lon: event.nativeEvent.lon,
+        });
+      }
+    };
+
+    return (
+      <ClusteredYamapLiteView
+        ref={nativeRef}
+        userLocationIcon={userLocationIconUri}
+        zoomGesturesEnabled={interactive ? zoomGesturesEnabled : false}
+        scrollGesturesEnabled={interactive ? scrollGesturesEnabled : false}
+        tiltGesturesEnabled={interactive ? tiltGesturesEnabled : false}
+        rotateGesturesEnabled={interactive ? rotateGesturesEnabled : false}
+        fastTapEnabled={interactive ? fastTapEnabled : false}
+        nightMode={nightMode}
+        showUserPosition={showUserPosition}
+        userLocationAccuracyFillColor={userLocationAccuracyFillColor}
+        userLocationAccuracyStrokeColor={userLocationAccuracyStrokeColor}
+        userLocationAccuracyStrokeWidth={userLocationAccuracyStrokeWidth}
+        userLocationIconScale={userLocationIconScale}
+        clusteredMarkers={clusteredMarkersPoints}
+        clusterColor={clusterColor}
+        onMapPress={handleMapPress}
+        onMapLongPress={handleMapLongPress}
+        {...otherProps}
+      >
+        {clusteredMarkers.map((marker, index) =>
+          renderMarker({ point: marker.point, data: marker.data }, index)
+        )}
+        {userChildren}
+      </ClusteredYamapLiteView>
+    );
+  }
+);

package/src/Components/Marker.tsx

@@ -0,0 +1,50 @@
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import type { MarkerProps, MarkerRef, Point } from '../@types';
+import { Image, type NativeSyntheticEvent } from 'react-native';
+import YamapLiteMarkerView from '../YamapMarkerViewNativeComponent';
+
+export const Marker = forwardRef<MarkerRef, MarkerProps>(
+  ({ onPress, source, zIndex, point: pointProp, ...props }, ref) => {
+    const [point, setPoint] = useState<Point>(pointProp);
+    const prevPointPropRef = useRef(pointProp);
+
+    useEffect(() => {
+      if (
+        pointProp.lat !== prevPointPropRef.current.lat ||
+        pointProp.lon !== prevPointPropRef.current.lon
+      ) {
+        prevPointPropRef.current = pointProp;
+        setPoint(pointProp);
+      }
+    }, [pointProp]);
+
+    useImperativeHandle(ref, () => ({
+      animatedMoveTo: (newPoint: Point, _duration: number) => {
+        setPoint(newPoint);
+      },
+      animatedRotateTo: (_angle: number, _duration: number) => {},
+    }));
+
+    const handleMarkerPress = (event: NativeSyntheticEvent<Point>) => {
+      onPress?.(event.nativeEvent);
+    };
+
+    const markerIconUri = source ? Image.resolveAssetSource(source).uri : '';
+
+    return (
+      <YamapLiteMarkerView
+        {...props}
+        point={point}
+        zInd={zIndex ?? 1}
+        source={markerIconUri}
+        onMarkerPress={handleMarkerPress}
+      />
+    );
+  }
+);

package/src/Components/Polygon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { Point, PolygonProps } from '../@types';
+import { type NativeSyntheticEvent } from 'react-native';
+import YamapLitePolygonView from '../YamapPolygonViewNativeComponent';
+
+export const Polygon: React.FC<PolygonProps> = ({
+  onPress,
+  zIndex,
+  ...props
+}) => {
+  const handlePolygonPress = (event: NativeSyntheticEvent<Point>) => {
+    if (onPress) {
+      onPress({
+        lat: event.nativeEvent.lat,
+        lon: event.nativeEvent.lon,
+      });
+    }
+  };
+
+  return (
+    <YamapLitePolygonView
+      {...props}
+      onPolygonPress={handlePolygonPress}
+      zInd={zIndex}
+    />
+  );
+};

package/src/Components/Polyline.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { Point, PolylineProps } from '../@types';
+import { type NativeSyntheticEvent } from 'react-native';
+import YamapLitePolylineView from '../YamapPolylineViewNativeComponent';
+
+export const Polyline: React.FC<PolylineProps> = ({
+  onPress,
+  zIndex,
+  ...props
+}) => {
+  const handlePolylinePress = (event: NativeSyntheticEvent<Point>) => {
+    if (onPress) {
+      onPress({
+        lat: event.nativeEvent.lat,
+        lon: event.nativeEvent.lon,
+      });
+    }
+  };
+
+  return (
+    <YamapLitePolylineView
+      {...props}
+      onPolylinePress={handlePolylinePress}
+      zInd={zIndex}
+    />
+  );
+};

package/src/Components/Yamap.tsx

@@ -0,0 +1,176 @@
+import {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  type ForwardedRef,
+} from 'react';
+import { findNodeHandle, Image, type NativeSyntheticEvent } from 'react-native';
+import type { Point, ScreenPoint, YaMapProps, YaMapRef } from '../@types';
+import YamapLiteView from '../YamapLiteViewNativeComponent';
+import { YamapUtils } from '../Utils/YamapUtils';
+
+export const YaMap = forwardRef(
+  (props: YaMapProps, ref: ForwardedRef<YaMapRef>) => {
+    const nativeRef = useRef(null);
+    // Always holds the latest props without closing over stale values in imperative handle
+    const latestProps = useRef(props);
+    latestProps.current = props;
+
+    const {
+      userLocationIcon,
+      interactive = true,
+      zoomGesturesEnabled = true,
+      scrollGesturesEnabled = true,
+      tiltGesturesEnabled = true,
+      rotateGesturesEnabled = true,
+      fastTapEnabled = true,
+      nightMode = false,
+      showUserPosition = false,
+      userLocationAccuracyFillColor = '#00FF00',
+      userLocationAccuracyStrokeColor = '#000000',
+      userLocationAccuracyStrokeWidth = 2,
+      userLocationIconScale = 1,
+      onMapPress,
+      onMapLongPress,
+      // Destructure backward-compat callbacks so they don't leak into otherProps
+      onCameraPositionReceived: _onCameraPositionReceived,
+      onVisibleRegionReceived: _onVisibleRegionReceived,
+      onWorldToScreenPointsReceived: _onWorldToScreenPointsReceived,
+      onScreenToWorldPointsReceived: _onScreenToWorldPointsReceived,
+      ...otherProps
+    } = props;
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        getCameraPosition: async () => {
+          const result = await YamapUtils.getCameraPosition(
+            findNodeHandle(nativeRef.current)!
+          );
+          latestProps.current.onCameraPositionReceived?.({
+            nativeEvent: result,
+          });
+          return result;
+        },
+        getVisibleRegion: async () => {
+          const result = await YamapUtils.getVisibleRegion(
+            findNodeHandle(nativeRef.current)!
+          );
+          latestProps.current.onVisibleRegionReceived?.({
+            nativeEvent: result,
+          });
+          return result;
+        },
+        getScreenPoints: async (points: Point[]) => {
+          const result = await YamapUtils.getScreenPoints(
+            findNodeHandle(nativeRef.current)!,
+            points
+          );
+          latestProps.current.onWorldToScreenPointsReceived?.({
+            nativeEvent: { points: result.points },
+          });
+          return result.points;
+        },
+        getWorldPoints: async (points: ScreenPoint[]) => {
+          const result = await YamapUtils.getWorldPoints(
+            findNodeHandle(nativeRef.current)!,
+            points
+          );
+          latestProps.current.onScreenToWorldPointsReceived?.({
+            nativeEvent: { points: result.points },
+          });
+          return result.points;
+        },
+        setZoom: async (
+          zoom: number,
+          duration?: number,
+          animation?: 'LINEAR' | 'SMOOTH'
+        ) => {
+          await YamapUtils.setZoom(
+            findNodeHandle(nativeRef.current)!,
+            zoom,
+            duration ?? 500,
+            animation ?? 'SMOOTH'
+          );
+        },
+        setCenter: async (
+          center: Point,
+          zoom?: number,
+          azimuth?: number,
+          tilt?: number,
+          duration?: number,
+          animation?: 'LINEAR' | 'SMOOTH'
+        ) => {
+          await YamapUtils.setCenter(
+            findNodeHandle(nativeRef.current)!,
+            center.lat,
+            center.lon,
+            zoom ?? 10,
+            azimuth ?? 0,
+            tilt ?? 0,
+            duration ?? 500,
+            animation ?? 'SMOOTH'
+          );
+        },
+        fitAllMarkers: async () => {
+          await YamapUtils.fitAllMarkers(findNodeHandle(nativeRef.current)!);
+        },
+        fitMarkers: async (_markers: any[]) => {
+          await YamapUtils.fitAllMarkers(findNodeHandle(nativeRef.current)!);
+        },
+        getMapObjectCount: async () => {
+          return YamapUtils.getMapObjectCount(
+            findNodeHandle(nativeRef.current)!
+          );
+        },
+        setTrafficVisible: (_visible: boolean) => {
+          // Traffic layer is not available in lite SDK
+        },
+      }),
+      []
+    );
+
+    const userLocationIconUri = userLocationIcon
+      ? Image.resolveAssetSource(userLocationIcon).uri
+      : '';
+
+    const handleMapPress = (event: NativeSyntheticEvent<Point>) => {
+      if (onMapPress) {
+        onMapPress({
+          lat: event.nativeEvent.lat,
+          lon: event.nativeEvent.lon,
+        });
+      }
+    };
+
+    const handleMapLongPress = (event: NativeSyntheticEvent<Point>) => {
+      if (onMapLongPress) {
+        onMapLongPress({
+          lat: event.nativeEvent.lat,
+          lon: event.nativeEvent.lon,
+        });
+      }
+    };
+
+    return (
+      <YamapLiteView
+        ref={nativeRef}
+        userLocationIcon={userLocationIconUri}
+        zoomGesturesEnabled={interactive ? zoomGesturesEnabled : false}
+        scrollGesturesEnabled={interactive ? scrollGesturesEnabled : false}
+        tiltGesturesEnabled={interactive ? tiltGesturesEnabled : false}
+        rotateGesturesEnabled={interactive ? rotateGesturesEnabled : false}
+        fastTapEnabled={interactive ? fastTapEnabled : false}
+        nightMode={nightMode}
+        showUserPosition={showUserPosition}
+        userLocationAccuracyFillColor={userLocationAccuracyFillColor}
+        userLocationAccuracyStrokeColor={userLocationAccuracyStrokeColor}
+        userLocationAccuracyStrokeWidth={userLocationAccuracyStrokeWidth}
+        userLocationIconScale={userLocationIconScale}
+        onMapPress={handleMapPress}
+        onMapLongPress={handleMapLongPress}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Components/index.ts

@@ -0,0 +1,6 @@
+export * from './Marker';
+export * from './Circle';
+export * from './Polygon';
+export * from './Polyline';
+export * from './Yamap';
+export * from './ClusteredYamap';

package/src/NativeYamapUtils.ts

@@ -0,0 +1,47 @@
+import { type TurboModule, TurboModuleRegistry } from 'react-native';
+import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
+import type { Point, ScreenPoint, VisibleRegion } from './@types';
+
+export interface Spec extends TurboModule {
+  getCameraPosition(viewId: Double): Promise<{
+    lat: Double;
+    lon: Double;
+    zoom: Double;
+    azimuth: Double;
+    tilt: Double;
+  }>;
+  getScreenPoints(
+    viewId: Double,
+    points: Point[]
+  ): Promise<{ points: ScreenPoint[] }>;
+  getVisibleRegion(viewId: Double): Promise<VisibleRegion>;
+  getWorldPoints(
+    viewId: Double,
+    points: ScreenPoint[]
+  ): Promise<{ points: Point[] }>;
+  fitAllMarkers(viewId: Double): Promise<void>;
+  getMapObjectCount(viewId: Double): Promise<Double>;
+  setZoom(
+    viewId: Double,
+    zoom: Double,
+    duration: Double,
+    animation: string
+  ): Promise<void>;
+  setCenter(
+    viewId: Double,
+    latitude: Double,
+    longitude: Double,
+    zoom: Double,
+    azimuth: Double,
+    tilt: Double,
+    duration: Double,
+    animation: string
+  ): Promise<void>;
+
+  init(apiKey: string): Promise<void>;
+  getLocale(): Promise<string>;
+  setLocale(locale: string): Promise<void>;
+  resetLocale(): Promise<void>;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('YamapUtils');

package/src/Utils/YamapUtils.ts

@@ -0,0 +1,63 @@
+import { Platform, NativeModules } from 'react-native';
+
+const LINKING_ERROR =
+  `The package '@exterio/react-native-yamap-lite' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo managed workflow\n';
+
+interface IYamapUtilsModule {
+  getCameraPosition(viewId: number): Promise<{
+    lat: number;
+    lon: number;
+    zoom: number;
+    azimuth: number;
+    tilt: number;
+  }>;
+  getVisibleRegion(viewId: number): Promise<import('../@types').VisibleRegion>;
+  getScreenPoints(
+    viewId: number,
+    points: import('../@types').Point[]
+  ): Promise<{ points: import('../@types').ScreenPoint[] }>;
+  getWorldPoints(
+    viewId: number,
+    points: import('../@types').ScreenPoint[]
+  ): Promise<{ points: import('../@types').Point[] }>;
+  init(apiKey: string): Promise<void>;
+  getLocale(): Promise<string>;
+  setLocale(locale: string): Promise<void>;
+  resetLocale(): Promise<void>;
+  setZoom(
+    viewId: number,
+    zoom: number,
+    duration: number,
+    animation: 'LINEAR' | 'SMOOTH'
+  ): Promise<void>;
+  setCenter(
+    viewId: number,
+    latitude: number,
+    longitude: number,
+    zoom: number,
+    azimuth: number,
+    tilt: number,
+    duration: number,
+    animation: 'LINEAR' | 'SMOOTH'
+  ): Promise<void>;
+  fitAllMarkers(viewId: number): Promise<void>;
+  getMapObjectCount(viewId: number): Promise<number>;
+}
+
+const YamapUtilsModule = true
+  ? require('../NativeYamapUtils').default
+  : NativeModules.TurboExample;
+
+export const YamapUtils: IYamapUtilsModule = YamapUtilsModule
+  ? YamapUtilsModule
+  : new Proxy(
+      {},
+      {
+        get() {
+          throw new Error(LINKING_ERROR);
+        },
+      }
+    );

package/src/YamapCircleViewNativeComponent.ts

@@ -0,0 +1,28 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { HostComponent, ViewProps, ColorValue } from 'react-native';
+import type {
+  DirectEventHandler,
+  Double,
+  Float,
+  Int32,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+interface Point {
+  lat: Double;
+  lon: Double;
+}
+
+export interface NativeProps extends ViewProps {
+  fillColor?: ColorValue;
+  strokeColor?: ColorValue;
+  strokeWidth?: Float;
+  zInd?: Int32;
+  onCirclePress?: DirectEventHandler<Readonly<Point>>;
+  center: Point;
+  radius: Float;
+  handled?: boolean;
+}
+
+export type YamapLiteCircleViewComponent = HostComponent<NativeProps>;
+
+export default codegenNativeComponent<NativeProps>('YamapLiteCircleView');