React Native Compass

A React Native compass component with drag and rotation functionality, similar to the web version. This component provides a visual compass that can be positioned and rotated interactively.

Features

• 🧭 Interactive compass with 8-direction labels (N, NE, E, SE, S, SW, W, NW)
• 🎯 Draggable compass position
• 🔄 Rotatable arrow for compass orientation
• 🌍 Multi-language support (English, Hindi, Marathi)
• 📱 Fully responsive and customizable

Installation

npm install react-native-svg
npm install k-react-native-compass

Usage

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Compass } from 'k-react-native-compass';

const App = () => {
  const [position, setPosition] = useState({ x: 0.5, y: 0.5 });
  const [rotation, setRotation] = useState(0);

  return (
    <View style={styles.container}>
      <Compass
        position={position}
        rotation={rotation}
        onPositionChange={setPosition}
        onRotationChange={setRotation}
        size={250}
        language="en"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | position | { x: number; y: number } | { x: 0.5, y: 0.5 } | Position of the compass (0-1 normalized coordinates) | | rotation | number | 0 | Rotation angle of the compass in degrees | | compassRotation | number | 0 | Additional compass rotation offset | | onPositionChange | (position: { x: number; y: number }) => void | undefined | Callback when compass position changes | | onRotationChange | (rotation: number) => void | undefined | Callback when compass rotation changes | | imageWidth | number | undefined | Original image width for accurate positioning | | imageHeight | number | undefined | Original image height for accurate positioning | | size | number | 250 | Size of the compass in pixels | | language | string | 'en' | Language for direction labels ('en', 'hi', 'mr') | | containerWidth | number | undefined | Container width (defaults to screen width) | | containerHeight | number | undefined | Container height (defaults to screen height) |

Features

Drag to Move

• Touch and drag the compass body to move it around the screen
• Position is normalized (0-1) for easy integration with different screen sizes

Rotate Arrow

• Touch and drag the red arrow above the compass to rotate it
• Rotation is reported in degrees (0-359)

Multi-language Support

• English (en): N, NE, E, SE, S, SW, W, NW
• Hindi (hi): उत्तर, ईशान्य, पूर्व, आग्नेय, दक्षिण, नैऋत्य, पश्चिम, वायव्य
• Marathi (mr): उत्तर, ईशान्य, पूर्व, आग्नेय, दक्षिण, नैऋत्य, पश्चिम, वायव्य

Example

import React, { useState } from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { Compass } from 'k-react-native-compass';

const { width, height } = Dimensions.get('window');

const CompassExample = () => {
  const [position, setPosition] = useState({ x: 0.5, y: 0.5 });
  const [rotation, setRotation] = useState(0);

  return (
    <View style={styles.container}>
      <Compass
        position={position}
        rotation={rotation}
        onPositionChange={setPosition}
        onRotationChange={setRotation}
        size={250}
        language="en"
        containerWidth={width}
        containerHeight={height}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
  },
});

export default CompassExample;

License

MIT