react-native-yandex-maps

React Native библиотека для интеграции Yandex MapKit SDK в ваши приложения.

🚨 Важно для Expo пользователей

Если вы используете Expo и получаете ошибку "View config not found for component YandexMapView", смотрите подробное решение в EXPO_ERROR_FIX.md.

Краткое решение:

1. Установите expo-dev-client: npx expo install expo-dev-client expo-build-properties
2. Выполните npx expo prebuild --clean
3. Добавьте в ios/Podfile: use_frameworks! :linkage => :static
4. Установите pods: cd ios && pod install && cd ..
5. Запустите: npx expo run:ios

Полная инструкция: EXPO_INSTALLATION.md

Установка

npm install react-native-yandex-maps

или

yarn add react-native-yandex-maps

Настройка для Expo

См. подробную инструкцию в EXPO_INSTALLATION.md

Быстрая настройка:

npx expo install expo-dev-client expo-build-properties
npx expo prebuild --clean
cd ios && pod install && cd ..
npx expo run:ios

Android

2. Добавьте зависимость в android/build.gradle вашего проекта:

allprojects {
    repositories {
        maven {
            url 'https://jitpack.io'
        }
    }
}

3. Добавьте разрешения в android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

4. В файле android/app/src/main/java/.../MainApplication.java добавьте пакет:

import com.yandexmapkit.YandexMapKitPackage;

// В методе getPackages():
packages.add(new YandexMapKitPackage());

iOS

2. Перейдите в директорию ios и установите зависимости через CocoaPods:

cd ios
pod install
cd ..

Важно для Expo: После expo prebuild проверьте файл ios/Podfile. Убедитесь, что там есть строка:

pod 'YandexMapKit', :path => '../node_modules/react-native-yandex-maps/ios'

Если её нет, добавьте вручную в секцию target 'YourApp' do: и выполните pod install.

3. Добавьте разрешения в ios/YourApp/Info.plist:

<key>NSLocationWhenInUseUsageDescription</key>
<string>Приложению необходим доступ к геолокации для отображения карты</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>Приложению необходим доступ к геолокации для отображения карты</string>

4. Для эмулятора под M1 (Apple Silicon) убедитесь, что в настройках проекта включена поддержка Vulkan (это делается автоматически в коде).

5. Важно для Expo: После expo prebuild проверьте файл ios/Podfile. Убедитесь, что там есть строка:

pod 'YandexMapKit', :path => '../node_modules/react-native-yandex-maps/ios'

Если её нет, добавьте вручную в секцию target 'YourApp' do: и выполните pod install.

Если возникает ошибка "View config not found for component YandexMapView":

• Убедитесь, что выполнили pod install в директории ios
• Проверьте, что в ios/Podfile есть правильный путь к pod
• Пересоберите проект: npx expo run:ios --clean

Примечание: Библиотека автоматически использует YandexMapsMobile версии 4.26.0-lite через CocoaPods. Если вам нужна полная версия с маршрутизацией, измените версию в ios/YandexMapKit.podspec.

Использование

⚠️ Важно: Исправление ошибки "View config not found" в Expo iOS

Если вы получили ошибку View config not found for component 'YandexMapView', см. EXPO_IOS_FIX.md для быстрого решения.

Кратко:

1. Проверьте, что в ios/Podfile есть: pod 'YandexMapKit', :path => '../node_modules/react-native-yandex-maps/ios'
2. Выполните: cd ios && pod install && cd ..
3. Пересоберите: npx expo run:ios --clean

Установка зависимостей

Для использования React компонентов в качестве иконок маркеров, установите дополнительную зависимость:

npm install react-native-view-shot
# или
yarn add react-native-view-shot

Базовый пример

import React from "react";
import { View, StyleSheet } from "react-native";
import { YandexMap } from "react-native-yandex-maps";

export default function App() {
  return (
    <View style={styles.container}>
      <YandexMap
        apiKey="YOUR_API_KEY"
        style={styles.map}
        initialCameraPosition={{
          target: {
            latitude: 55.7558,
            longitude: 37.6173,
          },
          zoom: 10,
        }}
        markers={[
          {
            id: "1",
            point: {
              latitude: 55.7558,
              longitude: 37.6173,
            },
            title: "Москва",
            icon: "https://example.com/marker-icon.png", // Кастомная иконка
          },
        ]}
        onMapTap={(point) => {
          console.log("Карта нажата:", point);
        }}
        onCameraPositionChanged={(cameraPosition) => {
          console.log("Позиция камеры изменена:", cameraPosition);
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
});

Использование с ref для управления картой

import React, { useRef } from "react";
import { View, StyleSheet, Button } from "react-native";
import { YandexMap, YandexMapRef } from "react-native-yandex-maps";

export default function App() {
  const mapRef = useRef<YandexMapRef>(null);

  const handleZoomIn = () => {
    mapRef.current?.zoomIn();
  };

  const handleZoomOut = () => {
    mapRef.current?.zoomOut();
  };

  const handleSetZoom = () => {
    mapRef.current?.setZoom(15);
  };

  const handleSetLocale = () => {
    mapRef.current?.setLocale("ru_RU");
  };

  const handleMoveCamera = () => {
    mapRef.current?.moveCamera({
      target: {
        latitude: 59.9343,
        longitude: 30.3351,
      },
      zoom: 12,
    });
  };

  const handleGetPosition = async () => {
    const position = await mapRef.current?.getCameraPosition();
    console.log("Current position:", position);
  };

  return (
    <View style={styles.container}>
      <YandexMap
        ref={mapRef}
        apiKey="YOUR_API_KEY"
        style={styles.map}
        initialCameraPosition={{
          target: {
            latitude: 55.7558,
            longitude: 37.6173,
          },
          zoom: 10,
        }}
      />
      <View style={styles.controls}>
        <Button title="Zoom In" onPress={handleZoomIn} />
        <Button title="Zoom Out" onPress={handleZoomOut} />
        <Button title="Set Zoom" onPress={handleSetZoom} />
        <Button title="Set Locale" onPress={handleSetLocale} />
        <Button title="Move Camera" onPress={handleMoveCamera} />
        <Button title="Get Position" onPress={handleGetPosition} />
      </View>
    </View>
  );
}

Использование React компонентов в качестве иконок маркеров

Вы можете использовать React компоненты в качестве иконок для маркеров:

import React from "react";
import { View, Text, StyleSheet } from "react-native";
import { YandexMap, Marker } from "react-native-yandex-maps";

const MyCustomIcon = () => (
  <View style={styles.icon}>
    <Text style={styles.iconText}>📍</Text>
  </View>
);

export default function App() {
  return (
    <YandexMap
      apiKey="YOUR_API_KEY"
      initialCameraPosition={{
        target: { latitude: 55.7558, longitude: 37.6173 },
        zoom: 10,
      }}
    >
      <Marker
        id="1"
        point={{ latitude: 55.7558, longitude: 37.6173 }}
        title="Москва"
      >
        <MyCustomIcon />
      </Marker>
      <Marker
        id="2"
        point={{ latitude: 59.9343, longitude: 30.3351 }}
        title="Санкт-Петербург"
      >
        <View style={styles.customMarker}>
          <Text style={styles.markerText}>SPB</Text>
        </View>
      </Marker>
    </YandexMap>
  );
}

const styles = StyleSheet.create({
  icon: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: "#FF6B6B",
    alignItems: "center",
    justifyContent: "center",
  },
  iconText: {
    fontSize: 20,
  },
  customMarker: {
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: "#4ECDC4",
    alignItems: "center",
    justifyContent: "center",
    borderWidth: 2,
    borderColor: "#FFFFFF",
  },
  markerText: {
    color: "#FFFFFF",
    fontWeight: "bold",
  },
});

Важно:

• Компонент Marker должен быть дочерним элементом YandexMap
• Иконка автоматически конвертируется в изображение при рендеринге
• Для работы требуется установить react-native-view-shot
• Можно комбинировать маркеры из props (markers) и React компоненты (<Marker>)

Инициализация MapKit

import { YandexMapKit } from "react-native-yandex-maps";

// Инициализация с API ключом
YandexMapKit.init("YOUR_API_KEY");

// Установка языка
YandexMapKit.setLocale("ru_RU");

API

YandexMapRef

Компонент поддерживает ref для программного управления картой:

interface YandexMapRef {
  moveCamera: (
    cameraPosition: CameraPosition,
    animationDuration?: number
  ) => void;
  zoomIn: () => void;
  zoomOut: () => void;
  setZoom: (zoom: number, animationDuration?: number) => void;
  addMarker: (marker: Marker) => void;
  removeMarker: (markerId: string) => void;
  setLocale: (locale: string) => void;
  getCameraPosition: () => Promise<CameraPosition>;
}

YandexMap Props

| Prop | Type | Default | Description | | ------------------------- | ------------------------------------------ | ------------- | ----------------------------------------- | | apiKey | string | required | API ключ от Yandex | | style | ViewStyle | { flex: 1 } | Стили для компонента карты | | initialCameraPosition | CameraPosition | - | Начальная позиция камеры | | markers | Marker[] | [] | Массив маркеров для отображения | | showUserLocation | boolean | false | Показывать ли местоположение пользователя | | nightMode | boolean | false | Ночной режим карты | | mapType | 'map' \| 'satellite' \| 'hybrid' | 'map' | Тип карты | | onCameraPositionChanged | (cameraPosition: CameraPosition) => void | - | Callback при изменении позиции камеры | | onMapTap | (point: Point) => void | - | Callback при нажатии на карту | | onMapLongTap | (point: Point) => void | - | Callback при долгом нажатии на карту | | onMarkerTap | (markerId: string) => void | - | Callback при нажатии на маркер |

Типы

interface Point {
  latitude: number;
  longitude: number;
}

interface Marker {
  id: string;
  point: Point;
  title?: string;
  subtitle?: string;
  /**
   * Путь к иконке маркера. Поддерживаются следующие форматы:
   * - URL: "https://example.com/icon.png"
   * - Локальный файл: "file:///path/to/icon.png"
   * - Ресурс из assets (Android): "asset://icon_name.png"
   * - Ресурс из bundle (iOS): "asset://icon_name" или "icon_name"
   * - Ресурс из drawable (Android): "icon_name" (без расширения)
   */
  icon?: string;
  color?: string;
}

interface CameraPosition {
  target: Point;
  zoom?: number;
  azimuth?: number;
  tilt?: number;
}

Кастомные иконки маркеров

Вы можете использовать свои иконки для маркеров, указав путь к изображению в свойстве icon:

<YandexMap
  markers={[
    {
      id: "1",
      point: { latitude: 55.7558, longitude: 37.6173 },
      title: "Москва",
      // URL иконки
      icon: "https://example.com/marker-icon.png",
    },
    {
      id: "2",
      point: { latitude: 59.9343, longitude: 30.3351 },
      title: "СПб",
      // Ресурс из bundle (iOS) или drawable (Android)
      icon: "custom_marker_icon",
    },
    {
      id: "3",
      point: { latitude: 56.3269, longitude: 44.0075 },
      title: "Нижний Новгород",
      // Локальный файл
      icon: "file:///path/to/local/icon.png",
    },
  ]}
/>

Поддерживаемые форматы:

• URL: "https://example.com/icon.png" или "http://example.com/icon.png" - загружает иконку из интернета
• Локальный файл: "file:///path/to/icon.png" - использует файл с устройства
• Ресурс из assets (Android): "asset://icon_name.png" - файл из папки android/app/src/main/assets/
• Ресурс из bundle (iOS): "asset://icon_name" или просто "icon_name" - файл из Assets.xcassets или bundle
• Ресурс из drawable (Android): "icon_name" (без расширения) - файл из android/app/src/main/res/drawable/
• SVG файлы:
  • Android: Поддерживается автоматически (конвертация в Bitmap). Используйте "icon.svg" или "asset://icon.svg"
  • iOS: Для полноценной поддержки SVG рекомендуется конвертировать SVG в PNG на стороне JavaScript (используя react-native-svg) или установить SVGKit

Пример для Android:

1. Поместите иконку в android/app/src/main/res/drawable/marker_icon.png
2. Используйте: icon: "marker_icon"

Пример для iOS:

1. Добавьте иконку в Assets.xcassets или в bundle
2. Используйте: icon: "marker_icon" или icon: "asset://marker_icon"

Пример использования SVG иконок:

// Android - SVG поддерживается автоматически
<YandexMap
  markers={[
    {
      id: "1",
      point: { latitude: 55.7558, longitude: 37.6173 },
      title: "Москва",
      icon: "asset://marker.svg", // SVG файл из assets
    },
    {
      id: "2",
      point: { latitude: 59.9343, longitude: 30.3351 },
      title: "СПб",
      icon: "https://example.com/marker.svg", // SVG из URL
    },
  ]}
/>

// Для iOS рекомендуется конвертировать SVG в PNG
// или использовать react-native-svg для рендеринга в Bitmap

События карты

Библиотека поддерживает следующие события:

• onCameraPositionChanged - вызывается при изменении позиции камеры (зум, панорамирование)
• onMapTap - вызывается при нажатии на карту
• onMapLongTap - вызывается при долгом нажатии на карту
• onMarkerTap - вызывается при нажатии на маркер

Настройка для Expo с EAS Build

Для подробной инструкции по настройке Expo с EAS Build см. EXPO_SETUP.md

Краткая инструкция:

1. Установите зависимости:

npm install react-native-yandex-maps expo-build-properties

2. Настройте app.config.js (пример в файле app.config.js в корне пакета)

3. Выполните prebuild:

npx expo prebuild --clean

4. Соберите через EAS:

eas build --platform android --profile production

Получение API ключа

1. Перейдите на developer.tech.yandex.ru
2. Создайте приложение
3. Получите API ключ для MapKit
4. Используйте его в компоненте YandexMap

Требования

• React Native >= 0.60.0
• Android:
  • Android API Level 21+
  • Yandex MapKit SDK 4.5.1+
• iOS:
  • iOS 13.0+
  • YandexMapsMobile 4.26.0-lite (или full версия)
  • CocoaPods

Лицензия

MIT