Imperative code tells the computer how to do something.
Declarative code tells the computer what you want.

This distinction matters a lot when designing or choosing APIs, especially in JavaScript/Typescript, where chainable calls, callbacks, and fluent interfaces are everywhere.

Let’s break it down.

The core idea: how vs what

Imperative (non-declarative)

You control every step of the process:

let result = [];
for (let i = 0; i < users.length; i++) {
  if (users[i].active) {
    result.push(users[i].name.toUpperCase());
  }
}

You explicitly manage:

• loops

• conditions

• intermediate state

• execution order

You’re describing the procedure.

Declarative

You describe the desired result:

const result = users
  .filter(u => u.active)
  .map(u => u.name.toUpperCase());

Now:

• no explicit loop management

• no mutation

• no temporary variables

• no control flow

You express intent, and the runtime figures out execution.

APIs can be declarative too

This idea applies not only to syntax, but to API design.

Imperative API

db.connect();
db.selectTable("users");
db.addFilter("age > 18");
db.sort("name");
const result = db.execute();

You orchestrate every step.

Declarative API

db.query({
  table: "users",
  where: "age > 18",
  orderBy: "name"
});

You describe the outcome. The system decides how to achieve it.

What about chainable APIs?

Chaining does not automatically mean declarative. It depends on what the chain represents.

Declarative chaining

users
  .filter(u => u.active)
  .map(u => u.name)
  .sort();

This builds a transformation pipeline:

• each call describes a rule

• nothing mutates external state

• no side effects

• execution is abstracted

You’re defining what should happen to the data.

Imperative chaining

request
  .open()
  .setHeader("Authorization", token)
  .send()
  .onSuccess(handleSuccess);

Here:

• each call performs an action immediately

• order matters operationally

• side effects occur

• you are commanding steps

It’s still imperative even though it looks fluent.

Callbacks don’t decide “declarativity”

Callbacks themselves are neutral. What matters is who controls execution.

Imperative callback

fs.readFile("file.txt", (err, data) => {
  process(data);
});

You start the action and provide instructions.

Declarative callback registration

router.get("/users", {
  auth: true,
  handler: (req, res) => { ... }
});

You’re declaring behavior, not triggering execution.

Immediate execution vs building a description

A useful mental model:

If method calls execute immediately → more imperative
If method calls build a description to run later → more declarative

Example:

anim.move(10, 0);
anim.rotate(45);
anim.scale(2);
anim.play();

Imperative: actions happen now.

Versus:

anim
  .move(10, 0)
  .rotate(45)
  .scale(2)
  .build();

Declarative: steps are recorded, not executed yet.

Real-world JavaScript examples

Mostly declarative

• React JSX

• SQL query builders (Prisma, Knex)

• CSS

• GraphQL queries

• Array methods (map, filter, reduce)

• RxJS pipelines

• Lodash chaining

Mostly imperative

• DOM manipulation

• Canvas drawing

• Node.js file system APIs

• Fetch with manual control flow

• jQuery classic chaining

A quick checklist

Ask yourself:

Why this matters

Declarative APIs:

• are easier to reason about

• reduce bugs from state management

• compose better

• are easier to optimize internally

• are more readable at scale

Imperative APIs:

• offer fine control

• are sometimes necessary for performance

• fit low-level tasks

Most production systems combine both, but understanding the difference helps you design cleaner APIs and recognize why some code “feels” simpler.

Final takeaway

Declarative: “Here is what I want.”
Imperative: “Here is how to do it.”

Once you start seeing this distinction, you’ll notice it everywhere, from React components to database queries to method chains.

The User Experience

I wanted the app to provide a seamless experience in these ways:

1. Upload PDF: Users can select PDFs from their device

2. Automatic Processing: The app extracts text and creates chunks automatically

3. Study Materials: Generates summaries, quizzes, flashcards, and mind maps

4. AI Chat: Two chat modes - general AI assistant and document-specific tutor

5. Offline Operation: Everything works without internet connectivity

Architecture Overview

The LearnPDF app follows a simple architecture that combines several currently available technologies:

• React Native/Expo for cross-platform mobile development (And why not use JS for everything?)

• React Native ExecuTorch for on-device AI model execution (running Llama 3.2 1B model)

• MMKV for high-performance local storage

• Zustand with Immer for state management

• Web based PDF parsing for text extraction

• RAG (Retrieval-Augmented Generation) for context-aware responses (using All-MiniLM-L6-v2 model for embeddings)

The Journey: From Parsing to Intelligence

1. PDF Processing Pipeline

The foundation of the app lies in its ability to extract and process PDF content locally. I implemented a custom PDF processing system, this in the end turned out to be the most challenging part because I couldn’t use PDF.js or any other tool based on it in a react native environment (no support for web workers) and I initially didn’t want to use web views :

Custom PDF Parser (PDFExtractor.ts)

export class PDFTextExtractor {
  private buffer: Uint8Array;
  private objects: Map<number, PDFObject> = new Map();
  private pages: PDFPage[] = [];

  async extractText(): Promise<string> {
    // the would find cross-reference table to know the address of each object
    this.parseObjects();
    this.findPages();
    return await this.extractTextFromPages();
  }
}

So I set out to learn how to parse pdf and extract texts from it manually.
This first custom parser handles:

• PDF object parsing and decompression using fflate

• Stream extraction and text command parsing

• Page-by-page text extraction

• React Native-compatible string conversion

This method worked for simple PDFs with support for limited encodings, but performed poorly on most of my PDFs, so I had to accept that the goal is not to rewrite PDF.js to run on react native without web views but to extract text and such I painfully forced myself to integrate a web view in the project.

WebView-Based Processing (PDFWebView.tsx)

So I set up the web view (using react-native-webview) in which I could run PDF.js and it worked amazingly well even for more complex PDFs:

const PDFWebView: React.FC<PDFWebViewProps> = ({
  fileUri,
  fileName,
  onTextExtracted,
}) => {
  const loadPDFInWebView = useCallback(async () => {
    const base64Data = await FileSystem.readAsStringAsync(fileUri, {
      encoding: FileSystem.EncodingType.Base64,
    });

    const message = JSON.stringify({
      type: 'load-pdf',
      pdfData: `data:application/pdf;base64,${base64Data}`,
    });

    webViewRef.current.postMessage(message);
  }, [fileUri]);
};

2. Text Chunking and RAG Implementation

Once text is extracted, it needs to be intelligently chunked for RAG:

const chunkText = (text: string, documentId: string): TextChunk[] => {
// a simple mechanism to split text (can be improved, eg. split by paragraphs,...)
  const sentences = text.split(/[.!?]+/).filter((s) => s.trim().length > 0);
  const chunks: TextChunk[] = [];
  const chunkSize = 400;

  let currentChunk = '';
  let chunkIndex = 0;

  for (const sentence of sentences) {
    if (currentChunk.length + sentence.length + 1 > chunkSize && currentChunk.length > 0) {
      chunks.push({
        id: `${documentId}_chunk_${chunkIndex}`,
        documentId,
        content: currentChunk.trim(),
        metadata: {
          pageNumber: 1,
          section: 'main',
          wordCount: currentChunk.split(/\s+/).length,
        },
      });
      currentChunk = sentence + '. ';
      chunkIndex++;
    } else {
      currentChunk += sentence + '. ';
    }
  }
  return chunks;
};

3. On-Device AI with ExecuTorch

The heart of the offline chat capability is ExecuTorch, which allows running AI models directly on the device:

export const useLLM = ({ preventLoad = false }): CustomLLMType => {
  const controllerInstance = useMemo(
    () => new LLMModule({
      tokenCallback: (newToken: string) => {
        setToken(newToken);
        setResponse((prevResponse) => prevResponse + newToken);
      },
      messageHistoryCallback: setMessageHistory,
    }),
    [tokenCallback]
  );

  useEffect(() => {
    if (preventLoad) return;

    (async () => {
      try {
        await controllerInstance.load(LLAMA3_2_1B, setDownloadProgress);
        setIsReady(true);
      } catch (e) {
        setError(e);
      }
    })();
  }, [controllerInstance, preventLoad]);
};

4. State Management with Zustand

The app uses Zustand with Immer for predictable state management, and persisted to device storage using MMKV:

export const useAppStore = create<AppState>()(
  zustandPersist(
    immer((set, get) => ({
      documents: {
        items: [] as PDFDocument[],
        selectedId: null,
        searchQuery: '',
        sortBy: 'date',
        sortOrder: 'desc',
      },
      // ... other state slices
      actions: createActions(set, get),
    })),
    {
      name: 'learnpdf-store',
      storage: createMMKVStorage(),
    }
  )
);

5.The Chat Experience

General AI Chat (LLMChatScreen.tsx)

The general chat interface provides a clean, WhatsApp-like experience:

import { useLLM, LLAMA3_2_1B } from 'react-native-executorch';

// in a the component
const llm = useLLM({ model: LLAMA3_2_1B });

const handleSendMessage = async () => {
  if (!inputText.trim() || !llm?.isReady || llm?.isGenerating) return;

  try {
    Keyboard.dismiss();
    await llm?.sendMessage(inputText.trim());
    setInputText('');
  } catch (error) {
    Alert.alert('Error', 'Failed to send message. Please try again.');
  }
};

Context-Aware Tutor Chat (TutorChatScreen.tsx)

The tutor chat provides document-specific assistance:

const handleSendMessage = async () => {
  const systemPrompt = `You are a helpful AI tutor assistant. Your role is to help students understand and learn from their PDF document content.`;

  const contextMessages = chatState.messages.slice(-5);
  const messages = [
    { role: 'system' as const, content: systemPrompt },
    { role: 'system' as const, content: `Document content for reference:\n\n${document.extractedText?.slice(0, 2000) || 'No document content available'}` },
    ...contextMessages.map((msg) => ({
      role: msg.role === 'user' ? ('user' as const) : ('assistant' as const),
      content: msg.content,
    })),
    { role: 'user' as const, content: userMessage.content },
  ];

  const response = await llm.generate(messages);
};

6. AI-Powered Content Generation

Beyond chat capabilities, the app generates various study materials using AI. The content generation system follows a consistent pattern across different tools while maintaining type safety and a simple error handling.

Summary Generation (SummaryScreen.tsx)

The summary generation provides concise document overviews:

const handleGenerateSummary = async (): Promise<void> => {
  if (!document || !llm?.isReady) return;

  setIsGeneratingSummary(true);
  setSummaryError(null);

  try {
    const systemPrompt = `You are a helpful assistant that generates concise summaries of documents. 
    Summarize the key points, main concepts, and important information from the provided text. Keep the summary focused and relevant.`;

    const messages: Message[] = [
      {
        role: 'system' as const,
        content: systemPrompt,
      },
      {
        role: 'user' as const,
        content: `Please summarize the following document:
        \n\n${document.extractedText || ''}`,
      },
    ];

    const summary: string = await llm.generate(messages);
    const updatedDocument: PDFDocument = { ...document, summary };

    setDocument(updatedDocument);
    StorageService.getInstance().updateDocument(updatedDocument);
  } catch (error) {
    console.error('Error generating summary:', error);
    setSummaryError('Failed to generate summary. Please try again.');
  } finally {
    setIsGeneratingSummary(false);
  }
};

Quiz Generation (QuizScreen.tsx)

The quiz system generates interactive questions with multiple formats, this is a perfect example of structured output being used:

interface QuizState {
  questions: Question[];
  currentQuestionIndex: number;
  selectedAnswers: (number | string | null)[];
  showResults: boolean;
  score: number;
}

const handleGenerateQuiz = async (): Promise<void> => {
  if (!document || !llm?.isReady) return;

  setIsGeneratingQuiz(true);
  setQuizError(null);

  try {
    const systemPrompt = `You are a helpful assistant that generates educational quiz questions. 
    Generate diverse, challenging questions based on the provided text using ONLY these question types:
    - multiple-choice (with 4 options)
    - true-false (with correctAnswer: 0 for true, 1 for false)
    - short-answer (with correctAnswer as a string)

    IMPORTANT: 
    - Return ONLY a valid JSON array
    - Use ONLY the exact type names: "multiple-choice", "true-false", "short-answer"
    - Do not include any explanatory text, markdown formatting, or additional commentary
    - Just the raw JSON array`;

    const messages: Message[] = [
      {
        role: 'system' as const,
        content: systemPrompt,
      },
      {
        role: 'user' as const,
        content: `Generate 5 quiz questions based on this document text:
        \n\n${document.extractedText || ''}

        Return ONLY a JSON array using ONLY these three question types:
        [{
          "id": "unique_id",
          "type": "multiple-choice",
          "question": "Question text?",
          "options": ["Option A", "Option B", "Option C", "Option D"],
          "correctAnswer": 0,
          "explanation": "Explanation of correct answer",
          "difficulty": "medium"
        }]`,
      },
    ];

    const response: string = await llm.generate(messages);
    const questions: Question[] = parseQuizResponse(response);

    // Save quiz to store
    const quiz: Quiz = {
      documentId: document.id,
      title: `Quiz for ${document.name}`,
      questions,
    };
    saveQuiz(quiz);

    setQuizState({
      questions,
      currentQuestionIndex: 0,
      selectedAnswers: new Array(questions.length).fill(null),
      showResults: false,
      score: 0,
    });
  } catch (error) {
    console.error('Error generating quiz:', error);
    setQuizError('Failed to generate quiz. Please try again.');
  } finally {
    setIsGeneratingQuiz(false);
  }
};

Quiz Response Parsing:

const parseQuizResponse = (response: string): Question[] => {
  let jsonStr: string = response.trim();

  // Handle markdown code blocks
  if (jsonStr.includes('```json')) {
    const jsonMatch = jsonStr.match(/```json\s*([\s\S]*?)\s*```/);
    if (jsonMatch) {
      jsonStr = jsonMatch[1].trim();
    }
  } else if (jsonStr.includes('```')) {
    const codeMatch = jsonStr.match(/```\s*([\s\S]*?)\s*```/);
    if (codeMatch) {
      jsonStr = codeMatch[1].trim();
    }
  }

  // Extract JSON array if not at start
  if (!jsonStr.startsWith('[')) {
    const arrayMatch = jsonStr.match(/\[[\s\S]*\]/);
    if (arrayMatch) {
      jsonStr = arrayMatch[0];
    }
  }

  const questionsData: RawQuestion[] = JSON.parse(jsonStr);
  return questionsData.map((q, index): Question => ({
    id: q.id || `q_${Date.now()}_${index}`,
    type: q.type === 'true/false' ? 'true-false' : q.type || 'multiple-choice',
    question: q.question || `Question ${index + 1} about the document content?`,
    options: q.options || ['Option A', 'Option B', 'Option C', 'Option D'],
    correctAnswer: q.correctAnswer || 0,
    explanation: q.explanation || 'This question was generated based on the document content.',
    difficulty: q.difficulty || 'medium',
  }));
};

Mind Map Generation (MindMapScreen.tsx)

The mind map system creates hierarchical visual representations:

interface MindMapState {
  nodes: MindMapNode[];
  expandedNodes: Set<string>;
}

const handleGenerateMindMap = async (): Promise<void> => {
  if (!document || !llm?.isReady) return;

  setIsGeneratingMindMap(true);
  setMindMapError(null);

  try {
    const systemPrompt = `You are a helpful assistant that creates hierarchical mind maps. 
    Extract key concepts and organize them into a logical hierarchy to help visualize the structure of information.
    Always create at least one root node with children to make the mind map interactive.`;

    const messages: Message[] = [
      {
        role: 'system' as const,
        content: systemPrompt,
      },
      {
        role: 'user' as const,
        content: `Create an interactive mind map structure from this document text:
        \n\n${document.extractedText || ''}

        REQUIREMENTS:
        1. Create a hierarchical structure with at least 3 levels
        2. Include a main root node (level 0) with meaningful children
        3. Each parent node should have 2-4 child nodes
        4. Use meaningful, concise labels (max 3-4 words)

        Return ONLY a JSON array with this EXACT structure:
        [
          {
            "id": "root",
            "label": "Main Topic",
            "children": ["topic1", "topic2"],
            "parent": null,
            "level": 0
          }
        ]`,
      },
    ];

    const response: string = await llm.generate(messages);
    const processedNodes: MindMapNode[] = parseMindMapResponse(response);

    // Find root nodes and set up initial expansion
    const rootNodeIds: string[] = processedNodes
      .filter((node: MindMapNode) => !node.parent || node.parent === null)
      .map((node: MindMapNode) => node.id);

    setMindMapState({
      nodes: processedNodes,
      expandedNodes: new Set(rootNodeIds), // Expand all root nodes by default
    });
  } catch (error) {
    console.error('Error generating mind map:', error);
    setMindMapError('Failed to generate mind map. Please try again.');
  } finally {
    setIsGeneratingMindMap(false);
  }
};

Performance Optimizations

1. Lazy Loading: AI models are only loaded when needed

2. Chunked Processing: Large PDFs are processed in chunks to prevent UI blocking

3. Efficient Storage: MMKV provides faster read/write operations than AsyncStorage

4. Memoization: Used React.memo and useMemo for expensive computations

Lessons Learned

What Worked Well

1. React Native ExecuTorch Integration: Provided excellent offline AI capabilities

2. MMKV Storage: Significantly improved performance over AsyncStorage

3. Webview PDF Parsing: Ensured compatibility with various PDF formats

4. Zustand State Management: Simplified state management with great performance

Future Enhancements

1. Vector Embeddings: Implement proper vector embeddings for better RAG

2. Model Optimization: Quantize newer models for better performance

3. Multi-Document Support: Allow chat across multiple documents

4. Fix Cross-Platform Issues: Some native features behave differently on iOS vs Android

5. Model Size & Memory Constraints: AI models are large and require careful download management, and device capabilities need to be checked in advance to select the appropriate model. Right now the model might make the app crash if there’s not enough available memory on the device.

Conclusion

Building an offline AI chat tool required solving a few challenges in PDF processing, AI model management, and mobile performance optimization. The result is a working study assistant that works entirely offline while providing intelligent, context-aware responses.

React Native Executorch doesn’t currently leverage native GPU acceleration available on the latest iPhones and Android devices, but provides good quality for testing ground and proof of concept. Next step would be to integrate with Apple’s CoreML backend and see how it compares.

The LearnPDF app is available on both iOS App Store and Google Play Store (testers needed). If you want to try it out, but keep in mind that it has not been tested on multiple devices.

Prerequisites

• A Raspberry Pi Pico W

• A macOS computer with Xcode installed

• Basic knowledge of C++ and Swift

• An iOS device for testing

Setting Up the Raspberry Pi Pico W

First, let's set up the Raspberry Pi Pico W to act as a BLE peripheral, sending data to a SwiftUI app.

1. Install the Pico SDK and Toolchain:

   Follow the official Raspberry Pi Pico C/C++ SDK documentation to set up your development environment. This includes installing the Pico SDK and necessary toolchains on your development machine. You can follow this awesome guide, but overall you should install the Raspberry Pi Pico SDK if not already and make sure you have Xcode installed on your computer (as we'll write an App for iOS).

2. Create a BLE Peripheral Project:

   Start by creating a new C++ project for the Raspberry Pi Pico W. Here’s an example of how you can set up a simple BLE peripheral which sets up a BLE GATT server on the Pico W to send data.

    #include "pico/stdlib.h"
    #include "pico/cyw43_arch.h"
    #include "hardware/gpio.h"
    #include "btstack.h"
   
    static btstack_packet_callback_registration_t hci_event_callback_registration;
   
    static const uint16_t gatt_service_uuid = 0x181D;
    static const uint16_t gatt_characteristic_uuid = 0x2A19;
   
    static uint8_t adv_data[] = {
        0x02, 0x01, 0x06, // Flags: LE General Discoverable Mode, BR/EDR Not Supported
        0x0B, 0x09, 'P', 'i', 'c', 'o', 'W', '-', 'B', 'L', 'E', // Complete Local Name
        0x03, 0x03, 0x1D, 0x18  // Complete List of 16-bit Service Class UUIDs
    };
   
    static uint8_t value = 42; // Example data to send
   
    static int att_read_callback(hci_con_handle_t connection_handle, uint16_t attribute_handle,
                                 uint16_t offset, uint8_t * buffer, uint16_t buffer_size) {
        if (buffer) {
            buffer[0] = value;
        }
        return sizeof(value);
    }
   
    static int att_write_callback(hci_con_handle_t connection_handle, uint16_t attribute_handle,
                                  uint16_t transaction_mode, uint16_t offset, const uint8_t * buffer, uint16_t buffer_size) {
        if (buffer_size == 1) {
            value = buffer[0];
        }
        return 0;
    }
   
    void setup_gatt_server() {
        // GATT Service
        static const uint8_t gatt_service[] = {
            0x09, 0x00, 0x00, 0x00, 0xFF, 0xFF, 0x04, 0x00,
            0x00, 0x00, 0x00, 0x18, 0x1D, 0x00
        };
   
        // GATT Characteristic
        static const uint8_t gatt_characteristic[] = {
            0x08, 0x00, 0x00, 0x02, 0x00, 0x19, 0x2A, 0x02,
            0x00, 0x01, 0x00, 0x19, 0x2A, 0x08, 0x00
        };
   
        static uint16_t att_handle = 0x0001;
   
        att_server_init(att_read_callback, att_write_callback);
        att_db_util_add_service_uuid16(gatt_service_uuid);
        att_db_util_add_characteristic_uuid16(gatt_characteristic_uuid, ATT_PROPERTY_READ | ATT_PROPERTY_WRITE, ATT_SECURITY_NONE, &att_handle, sizeof(value), &value);
    }
   
    void packet_handler(uint8_t packet_type, uint16_t channel, uint8_t *packet, uint16_t size) {
        if (packet_type == HCI_EVENT_PACKET && hci_event_packet_get_type(packet) == HCI_EVENT_LE_META) {
            if (hci_event_le_meta_get_subevent_code(packet) == HCI_SUBEVENT_LE_CONNECTION_COMPLETE) {
                printf("Connected\n");
            }
        }
    }
   
    int main() {
        stdio_init_all();
        if (cyw43_arch_init()) {
            printf("Failed to initialize\n");
            return -1;
        }
   
        l2cap_init();
        sm_init();
        setup_gatt_server();
        hci_event_callback_registration.callback = &packet_handler;
        hci_add_event_handler(&hci_event_callback_registration);
        hci_power_control(HCI_POWER_ON);
   
        gap_advertisements_set_params(0x0800, 0x0800, 0x00, 0x00, 0x00, 0x00, 0x07);
        gap_advertisements_set_data(sizeof(adv_data), adv_data);
        gap_advertisements_enable(1);
   
        while (true) {
            cyw43_arch_gpio_put(CYW43_WL_GPIO_LED_PIN, 1);
            sleep_ms(1000);
            cyw43_arch_gpio_put(CYW43_WL_GPIO_LED_PIN, 0);
            sleep_ms(1000);
        }
   
        return 0;
    }
   

   This C++ code initializes the Pico W, sets up BLE advertising, and sends a simple "Hello from Pico W" message whenever a device connects.

3. Build and Flash the Code:

   Compile the code using CMake and flash it to the Raspberry Pi Pico W. You can use the following commands in your terminal:

    mkdir build
    cd build
    cmake ..
    make
    sudo picotool load <your_program.uf2>
   

Building the SwiftUI App

Next, we’ll create a SwiftUI app to connect to the Raspberry Pi Pico W and receive data over BLE.

1. Create a New SwiftUI Project:

   Open Xcode and create a new SwiftUI project named "PicoWGATT".

2. Add Bluetooth Permissions:

   In the Info.plist file, add the following key to request Bluetooth permissions:

    <key>NSBluetoothAlwaysUsageDescription</key>
    <string>We need Bluetooth to connect to your Raspberry Pi Pico W</string>
   

3. Set Up CoreBluetooth in SwiftUI:

   Now, implement the SwiftUI app to scan for the Raspberry Pi Pico W, connect to it, and display the received data.

    import SwiftUI
    import CoreBluetooth
   
    class BLEManager: NSObject, ObservableObject, CBCentralManagerDelegate, CBPeripheralDelegate {
        var centralManager: CBCentralManager!
        var picoWPeripheral: CBPeripheral?
        @Published var receivedData: String = "No Data"
   
        override init() {
            super.init()
            centralManager = CBCentralManager(delegate: self, queue: nil)
        }
   
        func centralManagerDidUpdateState(_ central: CBCentralManager) {
            if central.state == .poweredOn {
                centralManager.scanForPeripherals(withServices: [CBUUID(string: "181D")])
            }
        }
   
        func centralManager(_ central: CBCentralManager, didDiscover peripheral: CBPeripheral, advertisementData: [String: Any], rssi RSSI: NSNumber) {
            picoWPeripheral = peripheral
            picoWPeripheral?.delegate = self
            centralManager.stopScan()
            centralManager.connect(peripheral, options: nil)
        }
   
        func centralManager(_ central: CBCentralManager, didConnect peripheral: CBPeripheral) {
            peripheral.discoverServices([CBUUID(string: "181D")])
        }
   
        func peripheral(_ peripheral: CBPeripheral, didDiscoverServices error: Error?) {
            guard let services = peripheral.services else { return }
            for service in services {
                peripheral.discoverCharacteristics([CBUUID(string: "2A19")], for: service)
            }
        }
   
        func peripheral(_ peripheral: CBPeripheral, didDiscoverCharacteristicsFor service: CBService, error: Error?) {
            guard let characteristics = service.characteristics else { return }
            for characteristic in characteristics {
                if characteristic.uuid == CBUUID(string: "2A19") {
                    peripheral.readValue(for: characteristic)
                }
            }
        }
   
        func peripheral(_ peripheral: CBPeripheral, didUpdateValueFor characteristic: CBCharacteristic, error: Error?) {
            if let data = characteristic.value {
                let receivedValue = data[0]  // Assuming data is a single byte
                DispatchQueue.main.async {
                    self.receivedData = "Received: \(receivedValue)"
                }
            }
        }
    }
   
    struct ContentView: View {
        @ObservedObject var bleManager = BLEManager()
   
        var body: some View {
            VStack {
                Text("PicoW GATT Data")
                    .font(.title)
                    .padding()
                Text(bleManager.receivedData)
                    .font(.largeTitle)
                    .padding()
            }
            .onAppear {
                bleManager.centralManagerDidUpdateState(bleManager.centralManager)
            }
        }
    }
   
    @main
    struct PicoWGATTApp: App {
        var body: some Scene {
            WindowGroup {
                ContentView()
            }
        }
    }
   

   This code uses CoreBluetooth to scan for BLE peripherals, connect to the Raspberry Pi Pico W, and display the received data in the SwiftUI app.

Running the App

1. Run the C++ Program: Upload and run the C++ program on your Raspberry Pi Pico W. Just drag and drop the .uf2 file to the Pico and it'll reboot.

2. Build and Run the SwiftUI App: Build and run the SwiftUI app on your iOS device. It should detect the Raspberry Pi Pico W, connect to it, and display the data it receives.

Conclusion

There you go, a quick view on how to use C++ on a Raspberry Pi Pico W to send data via Bluetooth Low Energy (BLE) to a SwiftUI app. This setup provides a simple way to communicate wirelessly between your Raspberry Pi Pico W and mobile devices, opening up a wide range of possibilities for IoT projects and real-time data communication.

Whether you're working on a sensor network, smart home automation, or educational projects, this combination of Raspberry Pi Pico W and SwiftUI allows for flexible and powerful development. If you code in React Native you can use the package react-native-ble-manager to achieve the same functionality.

If you already have a React Native project set up, you can skip this section.

Setting up the project

Start by creating a react native project
Add react-native-maps to your project
Run yarn add react-native-maps and please follow these instructions to get it to properly work in your project.

Implementation

Create a file named useAnimatedRegion.tsx and place in this content

import { useEffect, useState, useMemo } from 'react';
import { Animated, Dimensions } from 'react-native';
import { AnimatedRegion, Region } from 'react-native-maps';

const screen = Dimensions.get('window');

const ASPECT_RATIO = screen.width / screen.height;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

const ITEM_SPACING = 10;
const ITEM_PREVIEW = 10;
const ITEM_WIDTH = screen.width - 2 * ITEM_SPACING - 2 * ITEM_PREVIEW;
const SNAP_WIDTH = ITEM_WIDTH + ITEM_SPACING;
const BREAKPOINT1 = 246;

export interface MarkerItem {
  id: number;
  amount: number;
  coordinate: {
    latitude: number;
    longitude: number;
  };
}

export interface AnimatedMapState {
  panX: Animated.Value;
  panY: Animated.Value;
  index: number;
  canMoveHorizontal: boolean;
  scrollY: Animated.AnimatedInterpolation;
  scrollX: Animated.AnimatedInterpolation;
  scale: Animated.AnimatedInterpolation;
  translateY: Animated.AnimatedInterpolation;
  markers: MarkerItem[];
  region: AnimatedRegion;
}

export const useAnimatedRegion = (
  initialRegion: Region,
  displayedMarkers: any,
) => {
  const initialState = useMemo(() => {
    const panX = new Animated.Value(0);
    const panY = new Animated.Value(0);

    const scrollY = panY.interpolate({
      inputRange: [-1, 1],
      outputRange: [1, -1],
    });

    const scrollX = panX.interpolate({
      inputRange: [-1, 1],
      outputRange: [1, -1],
    });

    const scale = scrollY.interpolate({
      inputRange: [0, BREAKPOINT1],
      outputRange: [1, 1.6],
      extrapolate: 'clamp',
    });

    const translateY = scrollY.interpolate({
      inputRange: [0, BREAKPOINT1],
      outputRange: [0, -100],
      extrapolate: 'clamp',
    });

    return {
      panX,
      panY,
      index: 0,
      canMoveHorizontal: true,
      scrollY,
      scrollX,
      scale,
      translateY,
      markers: displayedMarkers,
      region: new AnimatedRegion(initialRegion),
    };
  }, []);

  const [state, setState] = useState<AnimatedMapState>(initialState);

  const setListeners = () => {
    const { region, panX, panY, scrollX, markers } = state;

    panX.addListener(onPanXChange);
    panY.addListener(onPanYChange);

    region.stopAnimation(() => {});
    region
      .timing({
        latitude: scrollX.interpolate({
          inputRange: markers.map((_m: any, i: any) => i * SNAP_WIDTH),
          outputRange: markers.map((m: any) => m.coordinate.latitude),
        }) as unknown as number,
        longitude: scrollX.interpolate({
          inputRange: markers.map((_m: any, i: any) => i * SNAP_WIDTH),
          outputRange: markers.map((m: any) => m.coordinate.longitude),
        }) as unknown as number,
        useNativeDriver: false,
        duration: 0,
        toValue: 0,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
      })
      .start();
  };

  const onPanXChange = ({ value }: any) => {
    const { index } = state;
    const newIndex = Math.floor((-1 * value + SNAP_WIDTH / 2) / SNAP_WIDTH);
    if (index !== newIndex) {
      setState({ ...state, index: newIndex });
    }
  };

  const onPanYChange = ({ value }: any) => {
    const { canMoveHorizontal, region, scrollY, scrollX, markers, index } =
      state;
    const shouldBeMovable = Math.abs(value) < 2;
    if (shouldBeMovable !== canMoveHorizontal) {
      setState({ ...state, canMoveHorizontal: shouldBeMovable });
      if (!shouldBeMovable) {
        const { coordinate } = markers[index];
        region.stopAnimation(() => {});
        region
          .timing({
            latitude: scrollY.interpolate({
              inputRange: [0, BREAKPOINT1],
              outputRange: [
                coordinate.latitude,
                coordinate.latitude - LATITUDE_DELTA * 0.5 * 0.375,
              ],
              extrapolate: 'clamp',
            }) as unknown as number,
            latitudeDelta: scrollY.interpolate({
              inputRange: [0, BREAKPOINT1],
              outputRange: [LATITUDE_DELTA, LATITUDE_DELTA * 0.5],
              extrapolate: 'clamp',
            }) as unknown as number,
            longitudeDelta: scrollY.interpolate({
              inputRange: [0, BREAKPOINT1],
              outputRange: [LONGITUDE_DELTA, LONGITUDE_DELTA * 0.5],
              extrapolate: 'clamp',
            }) as unknown as number,
            useNativeDriver: false,
            duration: 0,
            toValue: 0,
            longitude: coordinate.longitude,
          })
          .start();
      } else {
        region.stopAnimation(() => {});
        region
          .timing({
            latitude: scrollX.interpolate({
              inputRange: markers.map((_m: any, i: any) => i * SNAP_WIDTH),
              outputRange: markers.map((m: any) => m.coordinate.latitude),
            }) as unknown as number,
            longitude: scrollX.interpolate({
              inputRange: markers.map((_m: any, i: any) => i * SNAP_WIDTH),
              outputRange: markers.map((m: any) => m.coordinate.longitude),
            }) as unknown as number,
            useNativeDriver: false,
            duration: 0,
            toValue: 0,
            latitudeDelta: region.latitudeDelta,
            longitudeDelta: region.longitudeDelta,
          })
          .start();
      }
    }
  };
  useEffect(() => {
    setListeners();
  }, []);

  return state;
};

This hook helps handle all the region update business. The whole feature is happening in the onPanYChange function. This adjusts the latitude and deltas with the panY is changing (when the user is scrolling up). Those adjustments give the feeling that the map is zooming in. The interaction is smooth because internally the AnimatedRegion applies a timing of 1 millisecond.

Create a file named AnimatedViews.tsx file with this content

// AnimatedViews.tsx
import React, { useMemo, useRef, useState } from 'react';
import {
  StyleSheet,
  Dimensions,
  Animated,
  Text,
  PanResponder,
  View,
} from 'react-native';

import {
  Animated as AnimatedMap,
  Marker,
  PROVIDER_GOOGLE,
  Region,
} from 'react-native-maps';

import { useAnimatedRegion } from './useAnimatedRegion';

const screen = Dimensions.get('window');

const ASPECT_RATIO = screen.width / screen.height;
const LATITUDE = 37.78825;
const LONGITUDE = -122.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

const ITEM_SPACING = 10;
const ITEM_PREVIEW = 10;
const ITEM_WIDTH = screen.width - 2 * ITEM_SPACING - 2 * ITEM_PREVIEW;
const ITEM_PREVIEW_HEIGHT = 150;

const markersData = [
  {
    id: 0,
    amount: 99,
    coordinate: {
      latitude: LATITUDE,
      longitude: LONGITUDE,
    },
  },
  {
    id: 1,
    amount: 199,
    coordinate: {
      latitude: LATITUDE + 0.004,
      longitude: LONGITUDE - 0.004,
    },
  },
  {
    id: 2,
    amount: 285,
    coordinate: {
      latitude: LATITUDE - 0.004,
      longitude: LONGITUDE - 0.004,
    },
  },
];

const AnimatedViews = () => {
  const state = useAnimatedRegion(
    {
      latitude: LATITUDE,
      longitude: LONGITUDE,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
    },
    markersData,
  );

  const { markers, region, panY } = state;

  const onRegionChange = (_region: any) => {
    region.setValue(_region);
  };

  return (
    <>
      <AnimatedMap
        provider={PROVIDER_GOOGLE}
        style={styles.map}
        region={region as unknown as Animated.WithAnimatedObject<Region>}
        onRegionChange={onRegionChange}
      >
        {markers.map((marker) => {
          return (
            <Marker key={marker.id} coordinate={marker.coordinate}>
              <>
                <Text style={styles.dollar}>$</Text>
                <Text style={styles.amount}>{marker.amount}</Text>
              </>
            </Marker>
          );
        })}
      </AnimatedMap>
      <View style={styles.itemContainer}>
        {markers.map((marker) => (
          <PanItem marker={marker} panY={panY} />
        ))}
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
  },
  itemContainer: {
    flexDirection: 'row',
    paddingHorizontal: ITEM_SPACING / 2 + ITEM_PREVIEW,
    position: 'absolute',
    top: screen.height - ITEM_PREVIEW_HEIGHT - 64,
  },
  map: {
    backgroundColor: 'transparent',
    ...StyleSheet.absoluteFillObject,
  },
  item: {
    width: ITEM_WIDTH,
    height: screen.height + 2 * ITEM_PREVIEW_HEIGHT,
    backgroundColor: 'red',
    marginHorizontal: ITEM_SPACING / 2,
    overflow: 'hidden',
    borderRadius: 3,
    borderColor: '#000',
  },

  dollar: {
    color: '#fff',
    fontSize: 10,
  },
  amount: {
    color: '#fff',
    fontSize: 13,
  },
});

const PanItem = ({ marker, panY }) => {
  const localScroll = useMemo(() => {
    const localPanY = new Animated.Value(0);

    const scrollY = localPanY.interpolate({
      inputRange: [-1, 1],
      outputRange: [1, -1],
    });

    const translateY = scrollY.interpolate({
      inputRange: [0, 300],
      outputRange: [0, -100],
      extrapolate: 'clamp',
    });

    return {
      localPanY,
      scrollY,
      translateY,
    };
  }, []);

  const [state] = useState(localScroll);

  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderMove: (...args) =>
        [
          Animated.event([null, { dy: panY }], {
            useNativeDriver: false,
          }),
          Animated.event([null, { dy: state.localPanY }], {
            useNativeDriver: false,
          }),
        ].map((el) => el?.(...args)),
      onPanResponderRelease: () => {
        //panY.extractOffset();
      },
    }),
  ).current;

  return (
    <Animated.View
      key={marker.id}
      style={[
        styles.item,
        {
          transform: [{ translateY: state.translateY }],
        },
      ]}
      {...panResponder.panHandlers}
    />
  );
};

export default AnimatedViews;

Notice how to run multiple animated events with a onPanResponderMove or any event callback. The panX is not yet handled but a ScrollView might do the trick.

You can now import the component <AnimatedViews /> into your App.tsx file and play with it.