IA en React Native: De APIs en la nube a modelos en el dispositivo

React Native te da un codebase para iOS y Android. Agregar funciones de IA deberia seguir el mismo principio. Pero el camino de "llamar una API" a "ejecutar inferencia en el dispositivo" es diferente en React Native que en Swift o Kotlin nativo. El puente JavaScript, el sistema de modulos nativos y la entrega de modelos multiplataforma requieren patrones especificos.

Esta guia cubre ambos enfoques y la migracion practica entre ellos.

Integracion con API en la nube

La forma mas rapida de agregar IA a una app React Native es llamar a una API en la nube. La API fetch de React Native funciona directamente con OpenAI, Anthropic, Google Gemini y otros proveedores.

Patron basico

async function generateResponse(prompt: string): Promise<string> {
  const response = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${API_KEY}`,
    },
    body: JSON.stringify({
      model: "gpt-4o-mini",
      messages: [{ role: "user", content: prompt }],
    }),
  });

  const data = await response.json();
  return data.choices[0].message.content;
}

Esto funciona en iOS y Android con cero codigo especifico de plataforma. Para respuestas en streaming, usa el patron EventSource o una libreria como react-native-sse.

Streaming para UIs de chat

import EventSource from "react-native-sse";

function streamResponse(prompt: string, onToken: (token: string) => void) {
  const es = new EventSource("https://api.openai.com/v1/chat/completions", {
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${API_KEY}`,
    },
    method: "POST",
    body: JSON.stringify({
      model: "gpt-4o-mini",
      messages: [{ role: "user", content: prompt }],
      stream: true,
    }),
  });

  es.addEventListener("message", (event) => {
    if (event.data === "[DONE]") return es.close();
    const parsed = JSON.parse(event.data);
    const token = parsed.choices[0]?.delta?.content;
    if (token) onToken(token);
  });
}

El techo de las APIs en la nube

Las APIs en la nube funcionan bien para prototipos y apps de bajo volumen. Los problemas son los mismos que en apps nativas pero ligeramente peores en React Native:

• Dependencia de red: Las apps React Native frecuentemente se construyen para alcance multiplataforma, incluyendo mercados con conectividad poco confiable
• Latencia: El puente JS agrega ~5-10ms sobre los 500-3,000ms del viaje de red ida y vuelta
• Escalado de costos: Cada usuario, cada solicitud, cada token cuesta dinero
• Privacidad: Los datos del usuario cruzan la red en cada llamada a la API

IA en el dispositivo en React Native

Ejecutar un modelo localmente en React Native significa usar un modulo nativo que envuelve llama.cpp. El lado JavaScript envia prompts y recibe tokens. El lado nativo maneja la inferencia real en la CPU y GPU del dispositivo.

llama.rn

El paquete llama.rn proporciona bindings de React Native para llama.cpp. Expone una API JavaScript que carga modelos GGUF y ejecuta inferencia nativamente en iOS (Metal) y Android (CPU/Vulkan).

import { initLlama } from "llama.rn";

// Cargar el modelo
const context = await initLlama({
  model: modelPath, // Ruta al archivo .gguf en el dispositivo
  n_ctx: 2048,
  n_threads: 4,
  n_gpu_layers: 32,
});

// Generar una respuesta
const result = await context.completion({
  prompt: "Resume esta nota: ...",
  n_predict: 256,
  temperature: 0.7,
});

console.log(result.text);

Streaming de tokens

const result = await context.completion(
  {
    prompt: userPrompt,
    n_predict: 512,
  },
  (token) => {
    // Se llama por cada token generado
    setResponseText((prev) => prev + token.token);
  }
);

Esto te da la misma experiencia de streaming token por token que una API en la nube, pero con 50-200ms de tiempo hasta el primer token en lugar de 500-3,000ms.

Entrega del modelo

Llevar el archivo GGUF del modelo al dispositivo es el principal desafio de ingenieria en React Native.

Incluido en la app: Incluye el modelo en los assets de la app. Para iOS, agregalo al proyecto Xcode. Para Android, colocalo en el directorio de assets o usa Android Asset Delivery para archivos de mas de 150MB. El sistema de assets de React Native puede referenciar la ruta del archivo en tiempo de ejecucion.

Descarga post-instalacion: Descarga el modelo en el primer inicio. Usa react-native-blob-util o expo-file-system para descargas en segundo plano con seguimiento de progreso:

import * as FileSystem from "expo-file-system";

const modelUri = FileSystem.documentDirectory + "model.gguf";

const download = FileSystem.createDownloadResumable(
  MODEL_CDN_URL,
  modelUri,
  {},
  (progress) => {
    const pct = progress.totalBytesWritten / progress.totalBytesExpectedToWrite;
    setDownloadProgress(pct);
  }
);

const result = await download.downloadAsync();

Expectativas de rendimiento

El rendimiento en el dispositivo en React Native es casi identico al de apps nativas. La inferencia de llama.cpp se ejecuta en codigo nativo, no a traves del puente JS. El puente solo se usa para enviar prompts y recibir tokens.

La sobrecarga del puente JS para entrega de tokens es insignificante (menos de 1ms por token).

Arquitectura: Abstrayendo la capa de IA

La mejor arquitectura React Native abstrae el proveedor de IA detras de una interfaz comun. Esto te permite intercambiar entre nube y dispositivo sin cambiar tu codigo de UI.

interface AiProvider {
  generate(prompt: string, onToken?: (token: string) => void): Promise<string>;
  isReady(): boolean;
}

class CloudProvider implements AiProvider {
  async generate(prompt: string, onToken?: (token: string) => void) {
    // Llamada a API en la nube
  }
  isReady() { return true; } // Siempre listo si hay conexion
}

class OnDeviceProvider implements AiProvider {
  async generate(prompt: string, onToken?: (token: string) => void) {
    // Inferencia llama.rn
  }
  isReady() { return this.modelLoaded; }
}

Este patron soporta una migracion gradual. Comienza con CloudProvider para validacion. Agrega OnDeviceProvider cuando estes listo. Haz pruebas A/B. Eventualmente haz que el dispositivo sea el predeterminado con la nube como respaldo.

La ventaja multiplataforma

El modelo multiplataforma de React Native funciona a tu favor para IA en el dispositivo. Fine-tuneas un modelo, exportas un archivo GGUF y lo despliegas en iOS y Android. La libreria de inferencia maneja las diferencias de plataforma (Metal en iOS, CPU/Vulkan en Android).

Compara esto con APIs en la nube donde pagas por token en cada plataforma. En el dispositivo, pagas una vez por fine-tuning y distribucion del modelo. El costo no se multiplica con las plataformas.

Ruta de migracion

1. Comienza con API en la nube via fetch. Valida la funcion, recopila datos de uso.
2. Agrega la capa de abstraccion (interfaz AiProvider) temprano. No cuesta nada y vale la pena despues.
3. Recopila datos de entrenamiento de tus logs de API. Cada llamada a la API en la nube es un potencial ejemplo de entrenamiento.
4. Fine-tunea un modelo pequeno con tus datos de dominio. Plataformas como Ertas proporcionan un pipeline visual: sube datos, entrena con LoRA, exporta GGUF.
5. Integra llama.rn y agrega el proveedor en el dispositivo detras de la misma interfaz.
6. Haz pruebas A/B de nube vs dispositivo con usuarios reales.
7. Envia el dispositivo como predeterminado con respaldo en la nube para dispositivos no soportados.

El resultado final: un codebase, dos plataformas, IA que funciona sin conexion, cero costo por inferencia.