react-native-dgis

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