Beyond the Menu: Engineering Predictive Navigation

I’ve spent a significant portion of my career obsessing over "click depth." We’ve all been there—trying to figure out if a feature is buried too deep in a nested navigation stack. But recently, I’ve realized we’re solving the wrong problem. We shouldn't just be making maps easier to read; we should be building apps that know where the user wants to go before they do.

With the release of Expo Router and the increasing feasibility of Local LLMs (running directly on the device), we finally have the toolkit to move from static, reactive UIs to proactive, intent-based experiences.

The Architecture of Intent

Traditional navigation is a finite state machine. You are at /home, you click a button, you go to /settings/profile. Predictive navigation adds an inference layer between the user's current context and the router.

My approach involves three core pillars:

1. Context Tracking: Collecting non-PII signals (time, previous screens, search queries, active features).
2. On-Device Inference: Using a quantized local LLM (like Llama 3 or Mistral via react-native-wllama) to map that context to a route.
3. Typed Routing: Leveraging Expo Router’s file-based system to dynamically navigate with full type safety.

Why Local LLMs?

I’m a big advocate for local-first AI for two reasons: Latency and Privacy. If I have to wait 2 seconds for an API call to OpenAI just to suggest a navigation path, the UX is dead on arrival. By running a 3B parameter model on-device, I can get inference in milliseconds without the user's navigation history ever leaving the silicon.

The Implementation: usePredictiveRouter

Here is a simplified version of a hook I’ve been prototyping. It watches the app state and prepares the "Next Best Action."

import { useRouter, useSegments } from 'expo-router';
import { useEffect, useState } from 'react';
import { LocalInferenceEngine } from './ai/LocalEngine'; // Hypothetical wrapper

export function usePredictiveRouter() {
  const router = useRouter();
  const segments = useSegments();
  const [suggestion, setSuggestion] = useState<string | null>(null);

  useEffect(() => {
    const predictNextMove = async () => {
      const context = {
        currentPath: segments.join('/'),
        timeOfDay: new Date().getHours(),
        recentActions: GlobalStore.getRecentActions(),
      };

      // The model returns a predicted route based on our app's sitemap
      const prediction = await LocalInferenceEngine.predictRoute(context);
      
      if (prediction.confidence > 0.85) {
        setSuggestion(prediction.route);
      }
    };

    predictNextMove();
  }, [segments]);

  const navigateToSuggested = () => {
    if (suggestion) router.push(suggestion as any);
  };

  return { suggestion, navigateToSuggested };
}

Connecting the Dots with Expo Router

The beauty of Expo Router is that it treats URLs as the source of truth. Because it's built on top of React Navigation but managed via the file system, my LLM doesn't need to understand complex object structures—it just needs to output a string path.

In my testing, I found that providing the LLM with a "Sitemap" context—a simple JSON representation of the app/ directory—allowed it to map natural language intents to routes with surprising accuracy.

Example Prompt Segment:

"The user is in the 'Analytics' tab. They have spent 5 minutes looking at 'Revenue.' They just clicked the 'Help' icon. Available routes: /docs/revenue-metrics, /support/ticket, /settings/billing."

Local LLM Output: /docs/revenue-metrics

Challenges: The "Magic" Problem

Predictive UI can be frustrating if it's wrong. During my first iterations, I tried to make the app auto-navigate. Don't do that. It’s jarring.

The "Senior Engineer" way to handle this is via Soft Navigation:

• Highlight the predicted button.
• Surface a "Quick Link" in a bottom sheet.
• Pre-fetch the data for the predicted route using react-query so that when the user does click it, the transition is instantaneous.

Performance Considerations

Running an LLM alongside a React Native app is heavy. I’ve found that offloading inference to a Web Worker (if on web) or a separate background thread via a JSI (JavaScript Interface) module is non-negotiable. You cannot block the UI thread while the model is calculating the next path.

Final Thoughts

We are moving toward a future where the "Hamburger Menu" is a fallback, not the primary driver. By combining Expo Router's robust routing with the privacy and speed of local LLMs, we can build apps that feel like they are thinking with the user.

If you're still building static navigation trees, it's time to start thinking about the intent layer. The tools are here; we just need to stitch them together.