Soluciones/Mobile/React Native
Mobile — React Native

Un puenteentre JavaScripty el sistema operativo.

Cuando una sola base de código tiene sentido, usamos React Native. Cuando hace falta tocar el metal, escribimos módulos nativos. En ambos casos, la app comparte backend, tipos y lógica con el resto del sistema.

When we use it

Cuándo tiene sentido React Native.

No es una elección por moda. Es una decisión de ingeniería que se toma según el producto, el equipo y el tiempo.

01

Apps multiplataforma

Una sola base de código TypeScript produce apps para iOS y Android con apariencia nativa en cada plataforma.

  • React Native
  • Expo
  • TypeScript
02

Productos con iteración rápida

Equipos que necesitan publicar cambios semanales sin esperar revisiones de tienda. OTA hace que los cambios lleguen sin re-envío.

  • EAS Update
  • CodePush
  • CI/CD
03

Apps con lógica compartida

Cuando la app móvil y la web comparten modelos, validaciones y llamadas API, React Native permite reutilizar esa lógica.

  • Shared types
  • Zod
  • TanStack Query
04

Prototipos a producción

Desde un MVP hasta una app en App Store y Play Store con la misma base. Sin reescritura intermedia.

  • Expo Go
  • Dev builds
  • Stores
05

Integración con nativo

Cuando hace falta, escribimos módulos nativos en Swift y Kotlin accesibles desde JavaScript a través del bridge.

  • TurboModules
  • JSI
  • Swift
  • Kotlin
06

Arquitecturas compartidas

Monorepos con la app web y la móvil consumiendo los mismos paquetes de lógica, tipos y cliente API.

  • pnpm
  • Turborepo
  • Workspaces
Bridge

Cómo JS habla con el sistema.

React Native moderno reemplazó el bridge asíncrono por JSI. Hoy las llamadas pueden ser síncronas, rápidas y tipadas. Fabric renderiza la UI en su propio hilo.

  1. 01
    JavaScript
    Lógica de negocio · Estado · UI declarativa
  2. 02
    JSI
    JavaScript Interface · llamadas síncronas
    sync
  3. 03
    TurboModules
    Módulos nativos tipados
    sync
  4. 04
    Fabric
    Nuevo renderer · UI thread independiente
    sync
  5. 05
    Native runtime
    Swift · Kotlin · Platform APIs
Engineering

Lo que aporta React Native al sistema.

Seis razones técnicas por las que elegimos React Native en determinados productos.

Arquitectura compartida

Una sola base de código TypeScript produce binarios nativos para ambas plataformas sin comprometer la experiencia.

Nuevo motor

React Native moderno con Fabric, TurboModules y JSI. El bridge ya no es un cuello de botella.

Módulos nativos

Cuando una API del sistema no está disponible, escribimos el módulo nativo y lo exponemos a JS.

Over-the-air updates

Cambios de lógica y UI sin re-envío a las tiendas. Correcciones en horas, no en días.

Performance monitoreado

Medimos frames, memoria y latencia del bridge en builds de release sobre dispositivos reales.

Pipeline unificado

Un solo CI/CD construye y publica tanto iOS como Android con la misma configuración.

Comparison

React Native vs. nativo.

Una comparación honesta. Cada enfoque tiene su lugar. Elegimos según el producto, no por preferencia.

Aspect
React Native
Native (Swift · Kotlin)
  • Base de código
    Una sola, en TypeScript
    Dos, Swift y Kotlin
  • Iteración
    OTA sin re-envío
    Requiere nueva versión
  • Rendimiento
    Cercano a nativo con Fabric
    Máximo posible
  • Acceso a sistema
    Vía módulos nativos
    Completo y directo
  • Equipo
    Un equipo multiplataforma
    Un equipo por plataforma
  • Cuándo usarlo
    Productos con iteración rápida
    Apps que requieren hardware específico
Cycle

Cómo se construye una app React Native.

Cinco fases desde la configuración inicial hasta la evolución en producción con OTA.

  1. 01

    Setup

    Expo o bare React Native. Elegimos según el nivel de acceso nativo requerido.

  2. 02

    Design

    Sistema de diseño que respeta las diferencias entre iOS y Android.

  3. 03

    Build

    Componentes, navegación, estado, networking y lógica compartida.

  4. 04

    Ship

    Builds firmadas, publicación a App Store y Play Store, OTA activa.

  5. 05

    Evolve

    Telemetría, iteración y actualizaciones sin re-envío.

Stack

El stack React Native.

Core

  • React Native
  • Expo
  • Hermes
  • Metro

Fabric · JSI

  • TurboModules
  • JSI
  • Codegen
  • Reanimated

State & data

  • Zustand
  • TanStack Query
  • MMKV
  • AsyncStorage

Delivery

  • EAS Build
  • EAS Update
  • CodePush
  • Sentry

Un código.
Dos plataformas.

React Native es un camino. Cuando no es el correcto, también construimos nativo. La decisión siempre es técnica.