# React Native 2GIS

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

## Installation

```sh
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](https://dev.2gis.com).

### 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:

```gradle
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:

```tsx
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](https://docs.2gis.com/en/android/sdk/overview).

---

## 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

```typescript
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

```typescript
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

```tsx
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](CONTRIBUTING.md#development-workflow)
- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
- [Code of conduct](CODE_OF_CONDUCT.md)

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)