Fonctionnalités de l'app

Widget Quick Tools (iOS + Android)

Vue d’ensemble prête pour le web et configuration de base du widget Quick Tools. Depuis le widget, on ouvre directement Notes (Summarize), Scan et PDF Tools sur iOS et Android via des deep links.

Plateformes prises en charge

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

Ce que l’utilisateur peut faire

Depuis l’écran d’accueil, un tap ouvre ces routes dans l’app :

Notes (Summarize)
Scan
PDF Tools

Résumé du design

Section titre de marque : `Quick Tools`.
Puce d’actions compactes pour des taps rapides et fiables.
Rendu adaptatif pour thème clair/sombre.

Capture d’exemple

Aperçu de référence du widget Quick Tools sur l’écran d’accueil iPhone.

Widget Quick Tools affiché sur l’écran d’accueil iPhone avec actions Notes, Scan et PDF. — Exemple du widget Quick Tools sur l’écran d’accueil iOS.

Texte pour listing web

Version courte

Ajoutez ce widget sur l’écran d’accueil pour ouvrir Notes, Scan et PDF en un tap. Disponible sur iOS et Android avec un design propre, rapide et adaptatif.

Version longue

Ajoutez des actions rapides à votre écran d’accueil avec le widget Quick Tools.

Accédez directement à Notes (Summarize), Scan et PDF Tools sans ouvrir l’app d’abord.

Le widget est optimisé pour la vitesse, prend en charge les thèmes clair/sombre modernes et est disponible sur iOS et Android.

Détails du widget iOS

Définition du widget : `src/widgets/QuickToolsWidget.tsx`.
Enregistré via le plugin `expo-widgets` dans `app.json`.
Prend en charge `systemMedium` et `systemLarge`.
Deep links : `yourapp://?widgetTarget=summarize`, `yourapp://?widgetTarget=scan`, `yourapp://?widgetTarget=pdf`.

Détails du widget Android

Fichier UI : `src/widgets/android/QuickToolsAndroidWidget.tsx`.
Task handler : `src/widgets/android/widgetTaskHandler.tsx`.
Point d’entrée d’enregistrement : `index.ts`.
Plugin Android : `react-native-android-widget` dans `app.json`.
Taille par défaut : `minWidth 260dp`, `minHeight 140dp`, `targetCellWidth 4`, `targetCellHeight 2`.

Étapes d’implémentation (avec code)

Choisissez votre style de widget

Option A - Widget simple : UI minimale, rapide à livrer, facile à maintenir.
Option B - Widget détaillé : design plus riche (badges, puces, bordures, variantes de thème).

Si vous voulez seulement un widget propre et simple, suivez uniquement l’Option A.

Option A - Widget iOS (Simple)

iOS Étape 1 : Ajouter la config plugin dans `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 Étape 2 : Créer `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 Étape 3 : Enregistrer la gestion du widget dans `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
  });
}

Option A - Widget Android (Simple)

Android Étape 1 : Installer le package

yarn add react-native-android-widget

Android Étape 2 : Ajouter la config plugin dans `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 Étape 3 : Créer `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 Étape 4 : Créer `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 Étape 5 : Enregistrer le handler dans `index.ts` à la racine

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);
}

Option B - Variantes détaillées (aussi possible)

Si vous voulez un rendu plus premium, ces améliorations sont aussi possibles :

Ajouter un badge/icône d’en-tête et un sous-titre.
Utiliser des puces d’action avec bordures arrondies et couleurs personnalisées.
Ajouter un rendu séparé pour le mode clair et le mode sombre.
Ajouter des zones cliquables pour chaque action (Notes / Scan / PDF).
Ajouter une image d’aperçu personnalisée pour le sélecteur de widget.

Exemple d’amélioration détaillée 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>

Exemple d’amélioration détaillée Android

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

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

Étapes build / rafraîchissement

npx expo prebuild
yarn ios
yarn android
Si le widget reste vide ou ancien, supprimez-le de l’écran d’accueil puis ajoutez-le à nouveau.

Note

Le code est tiré de l’app Briefix ; mon propre produit sera en ligne très bientôt.

Briefix — Bientôt en ligne