3D Foot Scanning in Mobile Apps: Building a React Native Experience with ARKit/ARCore

Hook: Ship reliable foot-scanning in your React Native app — fast

If you build apps that generate custom insoles, slow development cycles and unreliable scans are your top blockers. Developers struggle with noisy point clouds, inconsistent guidance flows, and regulatory headwinds that turn promising features into liability. This guide shows how to build a robust 3D foot scanning experience in React Native using ARKit (iOS) and ARCore (Android): capture, preprocess, guide users, export meshes, and lock down privacy — production-ready, TypeScript-first, and Expo-compatible paths included.

The 2026 context: why now

By 2026 mobile depth sensors and on-device ML are ubiquitous across flagship and many mid-range phones. Late-2025 improvements in mobile depth APIs, broader LiDAR availability on iPhones, and ARCore Depth enhancements make reliable RGB-D capture practical on-device. At the same time, regulators (EU AI Act, privacy frameworks) and consumer expectations force teams to adopt strong privacy defaults. That combination — better hardware + higher legal bar — means teams can ship accurate, private insole scanning, but only if you design for it.

High-level architecture

Build your scanner with three layers:

1. Capture — RGB + depth frames, IMU, and clip metadata from ARKit / ARCore.
2. Preprocessing & fusion — denoise, fuse frames into a TSDF or point cloud, extract mesh, simplify and align.
3. UX & export — real-time feedback, health checks, GLB/GLTF export, and privacy-preserving storage.

Quick implementation plan (what you'll build)

• A React Native TypeScript UI for a guided scan flow.
• Native bridging to ARKit (iOS) and ARCore (Android) to capture frames and depth.
• On-device preprocessing pipeline (WASM or native GPU) to create a clean mesh and export GLB. Read about modern approaches to image and binary storage and efficient on-device encoding in Perceptual AI and Image Storage.
• Privacy-first storage and consent UI — prefer EU sovereign or compliant controls when handling biometric-like data (see guidance on cloud controls: AWS European Sovereign Cloud).

1) Capture: best practices for ARKit and ARCore

Accurate foot geometry needs synchronized RGB and depth. Aim for 30–60 frames across an arc around the foot (60–120 degrees) and at least one top-down pass. Use the device’s IMU for pose and timestamp each frame.

iOS (ARKit) tips

• Prefer devices with LiDAR for dense depth (iPhone Pro series and many modern iPads). Use ARMeshAnchors if available for direct mesh capture.
• Use ARFrame’s capturedImage and capturedDepthData (or scene reconstruction outputs) to get synchronized RGB-D.
• Add required privacy keys: NSCameraUsageDescription and explain depth usage in your UI.

Android (ARCore) tips

• Use the ARCore Depth API to obtain depth images or point clouds. Devices without depth sensors can still use depth-from-motion, but expect lower fidelity.
• Use timestamps and getCameraPose() to fuse frames reliably.
• Declare camera permission and verify Play Services for AR availability at runtime.

React Native integration options

You have three practical paths depending on your stack:

• Bare React Native with native modules — highest fidelity and most control (recommended for production insole apps).
• Expo dev-client / prebuild — fast iteration and still supports native AR modules when you prebuild and install the AR native code into the dev-client.
• Hybrid with Frame Processors — use react-native-vision-camera + frame processors to do real-time checks and forward frames to native modules for depth fusion.

Minimal native bridge example (TypeScript + event emitter)

// js/ts: arBridge.ts
import { NativeEventEmitter, NativeModules } from 'react-native';
const { ARBridge } = NativeModules;
export const arEmitter = new NativeEventEmitter(ARBridge);
export function startScan(options: any) {
  return ARBridge.startScan(options);
}
export function stopScan() {
  return ARBridge.stopScan();
}

Native side emits events like frameCaptured, scanProgress, and meshReady. Use TypeScript typings to ensure payload shapes.

2) Preprocessing & fusion: making raw depth production-ready

Mobile depth is noisy. Preprocessing steps you should implement (ideally on-device):

1. Temporal filtering — bilateral or temporal median filters to remove jitter.
2. Depth completion — inpaint small holes using local interpolation or a tiny on-device ML model.
3. Pose-based fusion — integrate frames into a TSDF (Truncated Signed Distance Function) to build a volumetric grid.
4. Surface extraction — run marching cubes on the TSDF to get a watertight mesh.
5. Simplification & smoothing — decimate triangles with quadric edge collapse; apply Laplacian smoothing while preserving features like the arch.
6. Landmark detection & alignment — detect heel and metatarsal landmarks (simple geometric heuristics or small ML model) and align scans to a canonical insole coordinate frame.

Practical choices: do heavy fusion natively (C++/Metal/Vulkan) for performance or compile Open3D / meshoptimizer to WASM when you prefer a JS pipeline. In 2026, Metal compute shaders and NN accelerators are commonly used to offload TSDF fusion for real-time responsiveness.

On-device vs. cloud tradeoffs

• On-device — best for privacy and latency, recommended when possible. Use Metal / NNAPI / CoreML for compute-heavy ops.
• Cloud — can produce higher-quality meshes and leverage larger models. Only consider with explicit consent and secure transport; always provide an on-device fallback. If you need sovereign or compliant cloud controls for biometric-like data, review options such as AWS European Sovereign Cloud.

3) Mesh export: formats, fidelity, and example code

For custom insoles you want a compact, widely supported format — use GLB (binary glTF 2.0) or a lightweight OBJ if your pipeline expects it. GLB preserves binary buffers, vertex attributes, and is efficient for downstream CAD and 3D-printing tooling. Learn more about perceptual and efficient storage patterns that apply to GLB and related formats in Perceptual AI and Image Storage.

Essential export steps

• Quantize positions (float32 -> float16 if possible) to save size.
• Include per-vertex normals and optional curvature maps to preserve arch detail.
• Embed metadata: UUID, anonymized user id, scan timestamp, and quality metrics. For tagging strategies and evolving metadata architectures, consider modern tag architectures.

Example: building a minimal GLB in TypeScript

// pseudocode: build a simple glb from vertex/indices buffers
function buildGLB(vertices: Float32Array, normals: Float32Array, indices: Uint32Array) {
  // Use a small helper to compose glTF JSON + binary chunk (GLB)
  // For production use a tested library or native exporter.
  const gltf = { asset: { version: '2.0' }, meshes: [/*...*/], buffers: [/*...*/] };
  // write buffers, compute accessors, then concat JSON + BIN with GLB header
  return glbArrayBuffer;
}

In practice, use a battle-tested library (or native exporter) on iOS/Android for speed and correctness. Consider producing both GLB (for apps and storage) and an STL/OBJ variant for tooling that expects that format.

4) UX: guide users to a successful scan

A good UX dramatically increases usable-scan rate. Treat the scan flow as the product feature — not a developer detail.

UX patterns and microcopy

• Onboarding & consent — show why you need depth, what you’ll store, and let users pick on-device vs. cloud processing. For secure onboarding and edge-aware device provisioning flows, see secure remote onboarding patterns.
• Step-by-step choreography — split into: Place foot, Sweep arc, Top-down pass, Confirm. Use short animations and haptics for progress ticks.
• Live coverage heatmap — show scanned vs. unscanned regions; color code confidence (green/red).
• Quality checks — auto-flag low lighting, excessive motion blur, or incomplete coverage and show corrective prompts.
• Recovery flows — let users resume mid-scan or re-scan a small region rather than starting over.
• Feedback — show an estimated accuracy score and a thumbnail 3D preview before export.

Example React Native scanning UI (TypeScript)

// ScanScreen.tsx (simplified)
import React, { useEffect, useState } from 'react';
import { View, Text, Button } from 'react-native';
import { startScan, stopScan, arEmitter } from './arBridge';

export default function ScanScreen(){
  const [progress, setProgress] = useState(0);
  useEffect(()=>{
    const sub = arEmitter.addListener('scanProgress', (p) => setProgress(p));
    return () => sub.remove();
  },[]);
  return (
    
      Move your phone around the foot — {Math.round(progress*100)}%
       startScan({mode:'foot'})} />
       stopScan()} />
    
  );
}

5) Privacy, consent, and compliance

Foot geometry can be sensitive: it can identify a person when combined with other data, and it can be classified as biometric or health-adjacent data in some jurisdictions. In 2026 make privacy a first-class engineering requirement.

Core privacy controls

• Edge-first processing — do fusion and export on-device by default; only upload with explicit user opt-in.
• Granular consent — separate consents for capture, cloud processing, and sharing with third parties.
• Minimal retention — store the mesh only as long as needed; offer one-tap deletion and retention logs.
• Encryption — AES-256 at rest and TLS 1.2+/mTLS in transit; keys managed by Secure Enclave when available.
• Anonymization — strip metadata and use one-way salted hashes if storing identifiers; keep raw RGB frames encrypted and limited-access.
• Privacy-preserving ML — consider federated learning or differential privacy when aggregating model updates.

Regulatory notes (2026)

Laws and frameworks have matured: the EU AI Act, GDPR, and CCPA (and local health-data laws) matter. If you claim medical/therapeutic benefits (e.g., corrective orthotics), consult regulatory counsel — your app could be considered a medical device requiring certification. For telehealth and patient-facing device guidance, review telehealth equipment playbooks such as Telehealth Equipment & Patient‑Facing Tech.

6) Production considerations & performance optimization

Scanning pipelines are resource intensive. Keep these engineering rules of thumb in mind:

• Limit capture resolution for real-time preview; upsample when running a final offline fusion pass.
• Stream frames in small batches to native modules to avoid JS bridge bottlenecks — use binary events.
• Use GPU compute (Metal/Vulkan) for TSDF updates; fallback to CPU when not available. Edge ML accelerators will continue to shift where inference runs — see architectures for edge-first trust and orchestration: Edge-Oriented Oracle Architectures.
• Design for battery & thermals: cap continuous scan time (e.g., 30–60s) and provide visual cooldown warnings. For device battery strategies and portable power options when fielding kiosks or demos, consider portable power station comparisons like portable power station showdowns.
• Measure and log quality metrics (coverage %, hole area, noise) and surface them to your analytics for continuous improvement.

7) Testing, QA, and real-world validation

Good scans in the lab can still fail in the wild. Test across lighting conditions, shoe shapes, and skin tones. Key steps:

• Build a suite of synthetic test scans and a small on-device validator to compute accuracy against ground truth (3D scans from a structured-light scanner). For hardware capture guidance and phone-camera test kits, see our reviewer kit.
• Run A/B tests of UX microcopy and guidance animations — small changes can increase usable-scan yield by 20–30%.
• Monitor failures and add quick re-scan flows for common failure modes (e.g., poor lighting, occluded toes).

8) Example project setup & commands

Recommended: start with a bare React Native app or an Expo prebuilt dev-client if you prioritize fast iteration.

Bare RN (recommended)

npx react-native init InsoleScanner --template react-native-template-typescript
cd InsoleScanner
# iOS: add ARKit native module, then
npx pod-install

Expo (prebuild or dev-client)

npx create-expo-app InsoleScanner
# then prebuild to add native AR modules
expo prebuild
# install your native AR modules then rebuild dev-client
eas build --profile development --platform ios

Whatever path you choose, keep native code in a separate module so you can iterate on UI and UX quickly while locking down the native scanner. If you want starter templates and reusable project patterns, check a micro-app template pack for quick scaffolding.

9) Future-proofing & 2026 trends you should watch

• Edge ML accelerators — expect more dedicated NPU power across devices; move inference to the edge. See architectures for edge orchestration and trust: Edge-Oriented Oracle Architectures.
• Unified AR APIs — ongoing convergence between ARKit and ARCore features reduces platform divergence, but keep platform-specific fallbacks.
• Standardized biometric rules — governments are clarifying whether geometric scans are biometric; design for consent-first defaults.
• WASM + GPU — WebAssembly + GPU compute on mobile will make JS-level fusion even more feasible. For efficient storage and perceptual approaches to binary assets consider Perceptual AI and Image Storage.

"Design your scan pipeline to fail gracefully: prefer giving a usable product to locking users out with perfection requirements."

Actionable checklist (ship-ready)

• Implement native RGB-D capture and timestamping for ARKit and ARCore.
• Build a TSDF fusion pipeline with marching cubes and a mesh simplifier (native/GPU recommended).
• Create step-by-step UX with coverage heatmap, haptic feedback, and one-touch re-scan for failed regions.
• Export GLB with metadata and quantization; provide a compact OBJ fallback. Consider perceptual storage and tagging strategies (perceptual AI, tag architectures).
• Default to on-device processing; require explicit opt-in for cloud processing and log consent. Use sovereign cloud options when storing sensitive meshes (AWS European Sovereign Cloud).
• Test on a matrix of devices, lighting, and foot geometries; instrument quality telemetry and back up artifacts with offline-capable tooling (offline-first tools).

Further reading and tools

• Apple ARKit docs (developer.apple.com) — for depth, ARMeshAnchor, and scene reconstruction APIs.
• Google ARCore docs (developers.google.com/ar) — for Depth API and camera pose fusion.
• Open3D, meshoptimizer, and WASM libraries — for fusion, simplification, and export.
• EU AI Act & GDPR guidance — consult legal counsel for biometric/health use cases.

Closing: start small, optimize fast

Building reliable insole scanning requires attention to hardware nuances, UX choreography, and privacy-first design. Start with an on-device pipeline that produces a low-latency preview and a compact GLB export. Iterate on coverage guidance and automatic quality checks — those are the features that turn casual scans into production-ready geometry. With the hardware and APIs maturing in 2026, teams that prioritize robust preprocessing, clear user guidance, and strong privacy will win the insole market.

Call to action

Ready to implement this in your app? Get our production-ready starter kit: a React Native TypeScript template with native AR bridges for iOS/Android, a WASM fusion pipeline, and a GLB exporter that’s been optimized for insole workflows. Download the starter kit or schedule a technical walkthrough with our team to validate your scanning pipeline and compliance checklist.

Related Reading

• Perceptual AI and the Future of Image Storage on the Web (2026)
• AWS European Sovereign Cloud: Technical Controls & Isolation Patterns
• Telehealth Equipment & Patient‑Facing Tech — Practical Review and Deployment Playbook (2026)
• Edge-Oriented Oracle Architectures: Reducing Tail Latency and Improving Trust in 2026
• Reviewer Kit: Phone Cameras, PocketDoc Scanners and Timelapse Tools for Console Creators (2026)
• Dog-Friendly Home Features That Add Value — and Where to Find Them for Less
• From ClickHouse to Qubits: Designing Observability for Quantum Data Pipelines
• From Postcard to Millions: Case Study of a Small Work’s Journey to Auction
• Build a Friendlier Beauty Forum: Lessons from Digg’s Paywall-Free Beta for Community-First Platforms
• Patch Rhythm: Why Roguelikes Like Nightreign Need Rapid Balancing