Funciones de la app

Widget Quick Tools (iOS + Android)

Resumen listo para web y configuración base del widget Quick Tools. Desde el widget se abre Notes (Summarize), Scan y PDF Tools en iOS y Android con deep links.

Plataformas compatibles

iOS: construido con `expo-widgets` + `@expo/ui/swift-ui`.
Android: construido con `react-native-android-widget`.

Qué puede hacer la persona usuaria

Desde la pantalla de inicio, un toque abre estas rutas en la app:

Notes (Summarize)
Scan
PDF Tools

Resumen de diseño

Sección de título de marca: `Quick Tools`.
Chips de acción compactos para taps rápidos y claros.
Renderizado adaptado a tema claro/oscuro.

Captura de ejemplo

Vista de referencia del widget Quick Tools en la pantalla de inicio de iPhone.

Widget Quick Tools en la pantalla de inicio de iPhone con acciones Notes, Scan y PDF. — Ejemplo del widget Quick Tools en inicio de iOS.

Copy para listado web

Copy corto

Añade este widget a tu pantalla de inicio para abrir Notes, Scan y PDF con un solo toque. Disponible en iOS y Android con diseño limpio, rápido y adaptado al tema.

Copy largo

Lleva acciones rápidas a tu pantalla de inicio con el widget Quick Tools.

Entra directo a Notes (Summarize), Scan y PDF Tools sin abrir la app primero.

El widget está optimizado para velocidad, soporta temas modernos claro/oscuro y está disponible en iOS y Android.

Detalles del widget iOS

Definición del widget: `src/widgets/QuickToolsWidget.tsx`.
Registrado con el plugin `expo-widgets` en `app.json`.
Soporta familias `systemMedium` y `systemLarge`.
Deep links: `yourapp://?widgetTarget=summarize`, `yourapp://?widgetTarget=scan`, `yourapp://?widgetTarget=pdf`.

Detalles del widget Android

UI del widget: `src/widgets/android/QuickToolsAndroidWidget.tsx`.
Task handler: `src/widgets/android/widgetTaskHandler.tsx`.
Entrypoint de registro: `index.ts`.
Plugin Android: `react-native-android-widget` en `app.json`.
Tamaño por defecto: `minWidth 260dp`, `minHeight 140dp`, `targetCellWidth 4`, `targetCellHeight 2`.

Pasos de implementación (con código)

Elige tu estilo de widget

Opción A - Widget simple: UI mínima, rápido de lanzar y fácil de mantener.
Opción B - Widget detallado: diseño más rico (badges, chips, bordes, variantes de tema).

Si solo quieres un widget limpio y simple, sigue únicamente la Opción A.

Opción A - Widget iOS (Simple)

iOS Paso 1: Añade config del plugin en `app.json`

[
  "expo-widgets",
  {
    "bundleIdentifier": "com.app.YourApp.ExpoWidgetsTarget",
    "groupIdentifier": "group.com.app.YourApp",
    "widgets": [
      {
        "name": "QuickToolsWidget",
        "displayName": "Quick Tools",
        "description": "Open Summarize, Scan, and PDF quickly.",
        "supportedFamilies": ["systemMedium", "systemLarge"]
      }
    ]
  }
]

iOS Paso 2: Crea `src/widgets/QuickToolsWidget.tsx`

import { HStack, Link, Text, VStack } from "@expo/ui/swift-ui";
import { createWidget, type WidgetEnvironment } from "expo-widgets";

type QuickToolsWidgetProps = {
  heading?: string;
};

const QuickToolsWidgetView = (
  props: QuickToolsWidgetProps,
  _environment: WidgetEnvironment
) => {
  "widget";

  return (
    <VStack spacing={10}>
      <Text>{props.heading ?? "Quick Tools"}</Text>
      <HStack spacing={6}>
        <Link label="Notes" destination="yourapp://?widgetTarget=summarize" />
        <Link label="Scan" destination="yourapp://?widgetTarget=scan" />
        <Link label="PDF" destination="yourapp://?widgetTarget=pdf" />
      </HStack>
    </VStack>
  );
};

export default createWidget("QuickToolsWidget", QuickToolsWidgetView);

iOS Paso 3: Registra el manejo del widget en `src/app/_layout.tsx`

if (Platform.OS === "ios") {
  const quickToolsWidgetModule = await import("../widgets/QuickToolsWidget");
  const expoWidgetsModule = await import("expo-widgets");
  const QuickToolsWidget = quickToolsWidgetModule.default;
  QuickToolsWidget.updateSnapshot({ heading: "Quick Tools" });

  expoWidgetsModule.addUserInteractionListener((event) => {
    // Handle widget button targets
  });
}

Opción A - Widget Android (Simple)

Android Paso 1: Instala el paquete

yarn add react-native-android-widget

Android Paso 2: Añade config del plugin en `app.json`

[
  "react-native-android-widget",
  {
    "widgets": [
      {
        "name": "QuickToolsAndroid",
        "label": "Quick Tools",
        "description": "Open Summarize, Scan, and PDF quickly.",
        "previewImage": "./assets/images/icon.png",
        "minWidth": "260dp",
        "minHeight": "140dp",
        "targetCellWidth": 4,
        "targetCellHeight": 2
      }
    ]
  }
]

Android Paso 3: Crea `src/widgets/android/QuickToolsAndroidWidget.tsx`

"use no memo";
import React from "react";
import { FlexWidget, TextWidget } from "react-native-android-widget";

export function renderQuickToolsAndroidWidget() {
  return (
    <FlexWidget
      style={{ height: "match_parent", width: "match_parent", padding: 14 }}
    >
      <TextWidget text="Quick Tools" style={{ fontSize: 16, fontWeight: "700" }} />

      <FlexWidget style={{ flexDirection: "row", flexGap: 8, marginTop: 10 }}>
        <FlexWidget
          clickAction="OPEN_URI"
          clickActionData={{ uri: "yourapp://?widgetTarget=summarize" }}
        >
          <TextWidget text="Notes" />
        </FlexWidget>

        <FlexWidget
          clickAction="OPEN_URI"
          clickActionData={{ uri: "yourapp://?widgetTarget=scan" }}
        >
          <TextWidget text="Scan" />
        </FlexWidget>

        <FlexWidget
          clickAction="OPEN_URI"
          clickActionData={{ uri: "yourapp://?widgetTarget=pdf" }}
        >
          <TextWidget text="PDF" />
        </FlexWidget>
      </FlexWidget>
    </FlexWidget>
  );
}

Android Paso 4: Crea `src/widgets/android/widgetTaskHandler.tsx`

import type { WidgetTaskHandlerProps } from "react-native-android-widget";
import { renderQuickToolsAndroidWidget } from "./QuickToolsAndroidWidget";

export async function widgetTaskHandler(props: WidgetTaskHandlerProps) {
  if (props.widgetInfo.widgetName !== "QuickToolsAndroid") return;

  props.renderWidget({
    light: renderQuickToolsAndroidWidget(),
    dark: renderQuickToolsAndroidWidget(),
  });
}

Android Paso 5: Registra el handler en `index.ts` raíz

import { Platform } from "react-native";
import { registerWidgetTaskHandler } from "react-native-android-widget";
import { widgetTaskHandler } from "./src/widgets/android/widgetTaskHandler";
import "expo-router/entry";

if (Platform.OS === "android") {
  registerWidgetTaskHandler(widgetTaskHandler);
}

Opción B - Variantes detalladas (también posible)

Si quieres un look más premium, también puedes aplicar estas mejoras:

Añadir badge/icono en cabecera y subtítulo.
Usar chips de acción con bordes redondeados y colores personalizados.
Añadir renderizado separado para modo claro y oscuro.
Añadir zonas clicables para cada acción (Notes / Scan / PDF).
Añadir imagen previa personalizada para el selector de widgets.

Ejemplo de mejora detallada en iOS

<VStack spacing={12}>
  <HStack spacing={8}>
    <Text>Quick Tools</Text>
    <Text>Fast actions from home screen</Text>
  </HStack>
  <HStack spacing={6}>
    <Link label="Notes" destination="yourapp://?widgetTarget=summarize" />
    <Link label="Scan" destination="yourapp://?widgetTarget=scan" />
    <Link label="PDF" destination="yourapp://?widgetTarget=pdf" />
  </HStack>
</VStack>

Ejemplo de mejora detallada en Android

props.renderWidget({
  light: renderQuickToolsAndroidWidget("light"),
  dark: renderQuickToolsAndroidWidget("dark"),
});

// In QuickToolsAndroidWidget.tsx
// Use styled chips, borders, badge, and theme palette maps.

Pasos de build / refresco

npx expo prebuild
yarn ios
yarn android
Si el widget sale vacío o desactualizado, elimínalo de inicio y vuelve a añadirlo.

Nota

El código está tomado de la app Briefix; mi propio producto estará disponible muy pronto.

Briefix — Muy pronto