React Native 2GIS

A React Native library for integrating 2GIS Android/iOS SDK maps into your applications.

Installation

npm install react-native-dgis
# or
yarn add react-native-dgis

Setup

1. Obtain API Key

First, you need to obtain a dgissdk.key file from 2GIS Developer Portal.

2. Configure API Key

Android

Place the dgissdk.key file in your Android project's assets folder:

android/app/src/main/assets/dgissdk.key

iOS

Add the dgissdk.key file to your iOS project via Xcode

3. Configure build.gradle (Android)

In your app's android/app/build.gradle file, add the 2GIS Maven repository before the dependencies block:

repositories {
  google()
  mavenCentral()
  maven {
    url "https://artifactory.2gis.dev/sdk-maven-release"
  }
}

dependencies {
  // ... your dependencies
}

4. Initialize the SDK

Call DgisModule.init at the start of your app before using any map components:

import { DgisModule } from 'react-native-dgis';

// In your App component or entry point
useEffect(() => {
  const initSdk = async () => {
    try {
      await DgisModule.init();
      console.log('2GIS SDK initialized successfully');
    } catch (error) {
      console.error('Failed to initialize 2GIS SDK:', error);
    }
  };
  initSdk();
}, []);

For more details on setup and troubleshooting, refer to the official 2GIS SDK documentation.

Components

DgisMapView

The main map component that displays the 2GIS map.

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | style | StyleProp<ViewStyle> | No | Style object for the map container | | center | InitialRegion | No | Initial center position of the map | | onTap | (point: Point) => void | No | Callback fired when the map is tapped | | onLongTouch | (point: Point) => void | No | Callback fired when the map is long-pressed | | onMapLoaded | () => void | No | Callback fired when the map is fully loaded | | children | React.ReactNode | No | Child components (e.g., MarkerView) |

Types

interface InitialRegion {
  latitude: number;   // Latitude coordinate
  longitude: number;  // Longitude coordinate
  zoom?: number;      // Zoom level (optional)
}

interface Point {
  latitude: number;   // Latitude coordinate
  longitude: number;  // Longitude coordinate
}

Ref Commands

| Command | Parameters | Description | |---------|------------|-------------| | fitAllMarkers | options?: { duration?: number } | Adjusts the map viewport to fit all markers. duration is animation time in ms. | | setZoom | zoom: number, duration?: number | Sets the map zoom level. duration defaults to 500ms. | | zoomIn | - | Increases the zoom level by one step | | zoomOut | - | Decreases the zoom level by one step |

MarkerView

A marker component to display pins/icons on the map.

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | point | MarkerPoint | Yes | Geographic coordinates of the marker | | iconSource | ImageSourcePropType | No | Marker icon image | | anchor | MarkerAnchor | No | Anchor point of the icon (0-1 range for x and y) | | iconOpacity | number | No | Opacity of the marker icon (0-1) | | iconWidth | number | No | Width of the marker icon in pixels | | onPress | () => void | No | Callback fired when the marker is pressed |

Types

interface MarkerPoint {
  latitude: number;   // Latitude coordinate
  longitude: number;  // Longitude coordinate
}

interface MarkerAnchor {
  x: number;  // Horizontal anchor (0 = left, 0.5 = center, 1 = right)
  y: number;  // Vertical anchor (0 = top, 0.5 = center, 1 = bottom)
}

Ref Commands

| Command | Parameters | Description | |---------|------------|-------------| | animatedMoveTo | coords: MarkerPoint, duration?: number | Animates the marker to new coordinates. duration defaults to 500ms. |

Usage Examples

Basic Map

import React from 'react';
import { View, StyleSheet, Alert } from 'react-native';
import { DgisMapView, MarkerView, DgisModule } from 'react-native-dgis';

DgisModule.init();

const MARKER = { id: '1', title: 'Red Square', point: { latitude: 55.7539, longitude: 37.6208 } };

export function BasicMap() {
  return (
    <View style={styles.container}>
      <DgisMapView
        style={styles.map}
        center={{
          latitude: 55.7558,
          longitude: 37.6173,
          zoom: 12,
        }}
        onMapLoaded={() => console.log('Map loaded!')}
      >
          <MarkerView
            key={MARKER.id}
            point={MARKER.point}
            iconSource={require('./assets/marker.png')}
            anchor={{ x: 0.5, y: 1.0 }}
            iconOpacity={1}
            onPress={() => {
              Alert.alert(
                'Marker tap',
                `Marker: ${MARKER.title}`
              )
            }}
          />
      </DgisMapView>
    </View>
  );
}

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

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT

Made with create-react-native-library