Real-Time Indoor Navigation App using React Native (Wi-Fi + UWB)

Nov 19, 2025 |

14 minutes read

IndoorNav: Real-Time Indoor Navigation App

This project develops a React Native mobile application that offers real-time indoor navigation for complex structures, including malls, airports, hospitals, and office buildings. The app uses Wi-Fi-based positioning (RSSI fingerprinting and, where supported, Wi-Fi RTT / IEEE 802.11mc) and optionally UWB (Ultra-Wideband) for higher precision. The app provides floor selection, turn-by-turn navigation, live pathfinding, and notifications.

Problem Statement
GPS signals are weak or unavailable indoors. This app fills that gap by using Wi-Fi access points and UWB anchors (if available) to calculate accurate indoor positions and deliver robust navigation experiences.

Feature	Description
Live User Location	Real-time positioning using Wi-Fi fingerprinting / RTT, optionally fused with UWB.
Floor Selection	Switch between floors for multi-level navigation.
Pathfinding	Shortest/optimal route calculation using graph algorithms
Turn-by-Turn Directions	Step-by-step guidance with visual cues and optional voice prompts
Indoor Map Display	Interactive map showing layout, stairs, elevators, and POIs
Notifications	Alerts when approaching the destination or deviating off-route.

Technology Stack

Layer / Technology

Frontend: React Native
State Management: Redux / Context API
Wi-Fi Positioning:
- RSSI fingerprinting (custom implementation)
- Wi-Fi RTT (IEEE 802.11mc) where device & AP support it
- Libraries: native Android APIs (and a React Native bridge); react-native-wifi-reborn (for scanning metadata) as a helper (Android/iOS restrictions apply).

UWB Integration (optional): Native bridge for UWB measurements / Android UWB APIs or vendor SDKs
Indoor Map: SVG (react-native-svg) or Mapbox / custom canvas overlay
Pathfinding Algorithm: A* or Dijkstra’s algorithm
Backend: Node.js + Express (optional — for fingerprint DB management, analytics)
Database: Firebase / MongoDB (for fingerprint maps, floor plans, anchor configs)

Real-Time Indoor Navigation App using React Native

System Architecture 5. Implementation Steps

Step 1 — Project Setup

Initialize: npx react-native init IndoorNavigationApp.
Install react-navigation and preferred state manager (Redux or Context).
Add TypeScript if desired for stronger typing.

Step 2 — Wi-Fi Positioning Strategy

Choose one or combine multiple strategies depending on precision needs:

RSSI Fingerprinting

Perform a site survey: record Wi-Fi scans at known coordinates and build a fingerprint database (AP BSSID → RSSI vector per coordinate).
On device: perform scan, compute similarity (k-NN, weighted Euclidean) to find best match and estimate coordinates.
Maintain a map of floor plans aligned to fingerprint coordinates.

Wi-Fi RTT (IEEE 802.11mc) — if available

Use RTT to measure round-trip time to compatible APs and compute distances.
Trilateration across 3+ APs yields meter-level accuracy.
RTT requires device & AP support and platform-specific native APIs (Android has RTT APIs).

Sensor Fusion

Fuse Wi-Fi position with IMU (accelerometer/gyroscope) dead-reckoning to smooth movement and handle scan gaps.
Optionally fuse UWB measurements (if available) using a Kalman filter.

Implementation notes

On Android, scanning & RTT require runtime permissions and background restrictions awareness.
On iOS, Wi-Fi scanning is limited; consider custom enterprise approaches or rely on UWB / other sensors.

Step 3 — Indoor Mapping

Convert floor plans into SVG or JSON tile maps.
Define anchor nodes (rooms, intersections) and map coordinates to fingerprint positions.
Implement a coordinate transform between the fingerprint coordinate system and SVG/map pixels.

Step 4 — Build Graph & Pathfinding

Model floors as graphs: nodes = POIs/corners, edges = walkable segments with weights.
Use A* for efficient pathfinding; heuristics can be Euclidean distance.
Keep separate graphs per floor and add elevator/stair edges connecting floors.

Step 5 — UI & Navigation

Show user dot overlay and route polyline on the map.
Implement a floor switcher for multi-level buildings.
Generate turn-by-turn instructions by converting path edges into human-readable steps.
Add voice guidance (Text-to-Speech) for accessibility.

Step 6 — Real-Time Updates

Continuously scan Wi-Fi at controlled intervals (trade-off accuracy vs battery).
Update position and animate user movement on the map.
Detect deviations and recompute the route when off-path.

Step 7 — Optimization & Scale

Reduce scanning frequency when stationary.
Cache fingerprint results and map tiles locally.
Use a backend to manage the fingerprint DB and to push updates if APs change.

Challenges & Solutions

Challenge	Solution Approach
Wi-Fi variability (RSSI noise)	Use fingerprinting with many samples, smoothing filters, and sensor fusion.
Device / AP compatibility (RTT)	Detect RTT support, fallback to fingerprinting when unavailable.
Battery drain from frequent scanning	Adaptive scanning (more frequent while moving), batching scans, and lower power modes.
Mapping & alignment	Calibrate coordinate transforms during site survey; use anchor points (beacons/UWB) for alignment.
Multi-floor transitions	Maintain a graph per floor; treat stairs/elevators as special edges and handle floor changes smoothly.

Future Enhancements

AR overlay (ARKit/ARCore) for visual wayfinding.
Indoor positioning calibration tools to make fingerprint collection faster.
Integration with shopping/advertising platforms for location-based offers.
Historical analytics and heatmaps of footfall.
A hybrid approach that automatically chooses Wi-Fi, UWB, or IMU based on availability.

Example Code Snippets (conceptual)

React Native — perform Wi-Fi scan (conceptual):

Note: many devices/platforms restrict Wi-Fi scan access; implement native modules and request permissions.


// Pseudocode (conceptual)
import { NativeModules } from 'react-native';
const { WifiScanner } = NativeModules;

// returns array of { bssid, ssid, rssi }
const performScan = async () => {
  const result = await WifiScanner.scan();
  return result; 
};

Simple fingerprint matching (conceptual):


function matchFingerprint(scanVector, fingerprintDB) {
  // scanVector: {bssid: rssi, ...}
  // fingerprintDB: [{x,y,vector: {bssid: rssi}}, ...]
  // use weighted Euclidean or cosine similarity
  let best = null;
  let bestScore = Infinity;
  for (const fp of fingerprintDB) {
    let score = 0;
    // compare common BSSIDs
    for (const b of Object.keys(fp.vector)) {
      const a = scanVector[b] ?? -100;
      const diff = (a - fp.vector[b]);
      score += diff * diff;
    }
    if (score < bestScore) { bestScore = score; best = fp; }
  }
  return best; // best.x, best.y estimate
}

9. Indoor Navigation Flow (revised)

Next Steps I can help with

Produce a mock architecture diagram (SVG / PNG) and an example SVG floor map with anchor points.
Generate a sample fingerprinting CSV schema and a small tool script to capture survey data.
Create a small React Native example (with a native module stub) showing Wi-Fi scan → fingerprint match → map update.

React Native Indoor Navigation with Wi-Fi & UWB Tech

The Way Forward

Building a React Native real-time indoor navigation app that leverages Wi-Fi indoor positioning, Wi-Fi RTT, and optional UWB technology provides a practical solution to the limitations of GPS indoors. By combining precise positioning, interactive indoor maps, and turn-by-turn guidance, such an app enhances user experience in complex environments like malls, airports, and offices. With careful implementation of fingerprinting, sensor fusion, and multi-floor pathfinding, businesses can offer reliable mobile indoor navigation apps that are both accurate and scalable.

Free Consultation

Lopa Das

Nov 19 2025

With over 13 years of experience, Lopa Das is a seasoned professional at iFlair Web Technologies Pvt Ltd, specializing in web and mobile app development. Her technical expertise spans across Laravel, PHP, CodeIgniter, CakePHP, React, Vue.js, Nuxt.js, iOS, Android, Flutter, and React Native. Known for her exceptional skills in team handling, client communication, presales, and risk analysis, Lopa ensures seamless project execution from start to finish. Her proficiency in Laravel CRM, Next.js, and mobile app development makes her a valuable asset in delivering robust, scalable solutions.