react-native-yamap

Linking requirements depend on which part of the library you are using:

1. Yandex MapKit: Linking is required. The library supports autolinking for React Native versions > 0.60.
2. Geocoder API only: Linking is optional. If you only need the geocoder, you can disable autolinking for React Native versions > 0.60 to avoid including the full MapKit dependency.

For legacy React Native projects (version < 0.60), you must manually link the library using the React Native CLI.

react-native link react-native-yamap

You can install the library using either yarn or npm.

yarn add react-native-yamap
# or
npm i react-native-yamap --save

The react-native-yamap library provides a set of components for rendering maps and drawing shapes, along with geocoding and search capabilities. You can import the main YaMap component (as the default export), as well as specialized components like Marker, Polygon, Polyline, Circle, and ClusteredYamap. Additionally, the library exports Suggest and Search for location-based queries and geocoding services.

import YaMap, {
  Marker,
  Polygon,
  Polyline,
  Circle,
  ClusteredYamap,
  Suggest,
  Search
} from 'react-native-yamap';

Use the Polyline component to draw lines between points.

Props:

• points (Point[]): Array of points defining the line.
• strokeColor (string): Line color.
• strokeWidth (number): Line thickness.
• outlineColor (string): Outline color.
• outlineWidth (number): Outline thickness.
• dashLength (number): Dash length.
• dashOffset (number): Offset of the first dash from the start.
• gapLength (number): Gap length between dashes.
• onPress (function): Callback for click/press events.
• zIndex (number): Z-axis display order.
• handled (boolean): Whether to enable/disable event bubbling to the parent (default: true).

import { Polyline } from 'react-native-yamap';

<YaMap>
  <Polyline
    points={[
      { lat: 50, lon: 50 },
      { lat: 50, lon: 20 },
      { lat: 20, lon: 20 },
    ]}
  />
</YaMap>

You can request routes using the findRoutes method on the YaMap component via a ref.

Method Signature: findRoutes(points: Point[], vehicles: Vehicles[], callback: (event: RoutesFoundEvent) => void)

Router Selection Logic:

• Pedestrian Router: Pass an empty array [] as vehicles.
• Driving Router: Pass ['car'] as vehicles.
• Masstransit Router (Public Transport): Pass any other non-empty array (e.g., for other vehicle types).

Specific Router Methods: Alternatively, you can call specific methods directly:

• findMasstransitRoutes(points, callback)
• findPedestrianRoutes(points, callback)
• findDrivingRoutes(points, callback)

// Example of finding driving routes
this.map.current.findRoutes(points, ['car'], (event) => {
  console.log(event);
});

Use the Circle component to draw a circle on the map.

Props:

• center (Point): Center coordinates.
• radius (number): Radius in meters.
• fillColor (string): Fill color.
• strokeColor (string): Border color.
• strokeWidth (number): Border thickness.
• onPress (function): Callback for click/press events.
• zIndex (number): Z-axis display order.
• handled (boolean): Whether to enable/disable event bubbling to the parent (default: true).

import { Circle } from 'react-native-yamap';

<YaMap>
  <Circle center={{ lat: 50, lon: 50 }} radius={300} />
</YaMap>

Use the Polygon component to draw closed shapes.

Props:

• points (Point[]): Array of points defining the polygon boundary.
• fillColor (string): Fill color.
• strokeColor (string): Border color.
• strokeWidth (number): Border thickness.
• innerRings ((Point[])[]): Array of polylines that create holes inside the polygon.
• onPress (function): Callback for click/press events.
• zIndex (number): Z-axis display order.
• handled (boolean): Whether to enable/disable event bubbling to the parent (default: true).

import { Polygon } from 'react-native-yamap';

<YaMap>
  <Polygon
    points={[
      { lat: 50, lon: 50 },
      { lat: 50, lon: 20 },
      { lat: 20, lon: 20 },
    ]}
  />
</YaMap>

When calling search methods, you can pass a SearchOptions object to refine the request:

• disableSpellingCorrection: (boolean) If true, disables automatic spelling correction.
• geometry: (boolean) If true, includes geometric data in the results.
• snippets: (SearchTypesSnippets) Specifies which types of snippets to return.
• searchTypes: (SearchTypes) Specifies the types of objects to search for (e.g., Geo or Biz).