New Page

How Qibla Calculation & Compass Work

1. Qibla Direction Calculation

Library Used

adhan — JavaScript library for Islamic calculations

How It Works

const coordinates = new Coordinates(latitude, longitude);
const qiblaAngle = Qibla(coordinates); // Returns angle in degrees (0-360)

2. Device Heading (Compass)

Library Used

expo-location — Expo’s location services

How It Works

Location.watchHeadingAsync((heading) => {
  const headingValue = heading.trueHeading > 0 
    ? heading.trueHeading    // True North (GPS-based)
    : heading.magHeading;    // Magnetic North (compass-based)
  
  setDeviceHeading(headingValue); // 0-360 degrees
});

Listens to the device’s magnetometer/compass

Returns the device’s heading (0–360°)

trueHeading: GPS-based (more accurate, requires GPS)

magHeading: magnetic compass (works without GPS)

3. Compass Rotation Formula

targetRotation = -deviceHeading

Why negative?

When device points North (0°), compass should show North at top (0° rotation) When device rotates 90° East, compass rotates -90° to keep North at top

4. Visual Display

Compass Circle

Rotates with device movement

Formula: rotate(-deviceHeading)

Keeps North at the top visually

Qibla Arrow

Stays fixed, pointing to qibla direction

Formula: rotation = qiblaDirection (e.g., 58°)

Shows the direction to Mecca relative to the compass