### IOSIcons Example Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/types.md An example demonstrating how to configure multi-scale iOS icons with paths for 1x, 2x, and 3x resolutions. ```typescript const iosIcon: IOSIcons = { "1x": "./assets/icon-1x.png", "2x": "./assets/icon-2x.png", "3x": "./assets/icon-3x.png", }; ``` -------------------------------- ### Dynamic App Icon Plugin: Complete Example Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/configuration.md A comprehensive example of configuring dynamic app icons with various naming conventions and appearance modes. ```json { "expo": { "plugins": [ [ "expo-quick-actions/icon/plugin", { "default": "./assets/icons/app-default.png", "dark-mode": "./assets/icons/app-dark.png", "light-mode": "./assets/icons/app-light.png", "seasonal": { "light": "./assets/icons/seasonal-light.png", "dark": "./assets/icons/seasonal-dark.png" }, "dev": "./assets/icons/app-dev.png" } ] ] } } ``` -------------------------------- ### Example iOS Icon Configuration Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/api-reference/config-plugin.md Demonstrates how to configure iOS quick action icons in `app.json`. This example shows using simple string paths and objects to specify icons for different resolutions. ```json { "iosIcons": { "home": "./assets/home.png", "compose": { "1x": "./assets/compose-1x.png", "2x": "./assets/compose-2x.png", "3x": "./assets/compose-3x.png" }, "search": { "2x": "./assets/search-2x.png", "3x": "./assets/search-3x.png" } } } ``` -------------------------------- ### Example Android Icon Configuration Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/api-reference/config-plugin.md Illustrates how to configure Android quick action icons in `app.json`. This example shows different ways to specify icons, including simple paths and objects with background colors or images. ```json { "androidIcons": { "compose": { "foregroundImage": "./assets/compose-icon.png", "backgroundColor": "#FF6B6B" }, "search": "./assets/search-icon.png", "settings": { "foregroundImage": "./assets/settings-icon.png", "backgroundColor": "#4A90E2", "backgroundImage": "./assets/settings-bg.png" } } } ``` -------------------------------- ### Configure Dynamic Quick Actions on App Start Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/integration-guide.md Dynamically configure quick actions when the app starts by checking support and setting items. This is useful for actions that depend on app state. ```typescript // app/(root)/_layout.tsx import * as QuickActions from "expo-quick-actions"; import { useEffect } from "react"; import { Slot } from "expo-router"; export default function RootLayout() { useEffect(() => { // Check if quick actions are supported QuickActions.isSupported().then((supported) => { if (!supported) { console.log("Quick actions not supported on this device"); return; } // Configure the quick actions QuickActions.setItems([ { id: "compose", title: "New Message", icon: "compose", params: { href: "/compose" }, }, { id: "search", title: "Search", icon: "search", params: { href: "/search" }, }, { id: "profile", title: "My Profile", icon: "symbol:person.circle", params: { href: "/profile" }, }, { id: "settings", title: "Settings", icon: "symbol:gear", params: { href: "/settings" }, }, ]); }); }, []); return ; } ``` -------------------------------- ### Example app.json Configuration for Main Plugin Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/module-exports.md Illustrates how to configure the main `expo-quick-actions` plugin within the `app.json` file. ```json { "plugins": [ [ "expo-quick-actions", { "androidIcons": {...}, "iosIcons": {...}, "iosActions": [...] } ] ] } ``` -------------------------------- ### Example iOS Actions Configuration Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/api-reference/config-plugin.md Demonstrates how to define iOS quick actions with different icon types: built-in, configured, and SF Symbols. ```json { "iosActions": [ { "id": "search", "title": "Search", "icon": "search", "params": { "href": "/search" } }, { "id": "compose", "title": "New Message", "icon": "compose", "subtitle": "Send a message", "params": { "href": "/compose" } }, { "id": "custom", "title": "My Icon", "icon": "shortcut_one", "params": { "url": "https://example.com" } }, { "id": "symbol", "title": "Settings", "icon": "symbol:gear", "params": { "href": "/settings" } } ] } ``` -------------------------------- ### Get Initial Action Source: https://github.com/evanbacon/expo-quick-actions/blob/main/README.md Retrieves the initial quick action item that was used to open the app, if any. ```APIDOC ## `initial` ### Description A static property that returns the initial quick action item that was used to open the app, if any. ### Returns - `Action | null`: The initial action item or null if none was used. ### Example ```ts const initialAction = QuickActions.initial; ``` ``` -------------------------------- ### Install Expo Quick Actions and Rebuild Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/compatibility.md Troubleshoot 'Module not found: expo-quick-actions' by installing the library and cleaning the build. This ensures the library is correctly linked. ```bash npx expo install expo-quick-actions npx expo prebuild --clean ``` -------------------------------- ### Example getIcon Usage Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/module-exports.md Shows how to fetch and log the current app icon name. ```typescript import * as AppIcon from "expo-quick-actions/icon"; const current = await AppIcon.getIcon(); console.log("Current icon:", current || "default"); ``` -------------------------------- ### AdaptiveIcon Example Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/types.md An example of how to define an AdaptiveIcon object with a foreground image and background color. ```typescript const icon: AdaptiveIcon = { foregroundImage: "./assets/compose-fg.png", backgroundColor: "#FF6B6B", }; ``` -------------------------------- ### Example app.json Configuration for Icon Plugin Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/module-exports.md Shows how to configure the `expo-quick-actions/icon/plugin` in `app.json` to define alternate app icons. ```json { "plugins": [ [ "expo-quick-actions/icon/plugin", { "dark": "./assets/icon-dark.png", "light": "./assets/icon-light.png" } ] ] } ``` -------------------------------- ### Import Examples for Expo Quick Actions Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/module-exports.md Demonstrates how to import various modules and specific exports from the expo-quick-actions library and its submodules. ```typescript // Main module import * as QuickActions from "expo-quick-actions"; import QuickActions, { Action } from "expo-quick-actions"; ``` ```typescript // Hooks import { useQuickActionCallback, useQuickAction, } from "expo-quick-actions/hooks"; ``` ```typescript // Router import { useQuickActionRouting, isRouterAction, RouterAction, } from "expo-quick-actions/router"; ``` ```typescript // Icon import * as AppIcon from "expo-quick-actions/icon"; import { setIcon, getIcon, isSupported } from "expo-quick-actions/icon"; ``` -------------------------------- ### Get Initial Quick Action on App Startup Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/module-exports.md Retrieves the quick action that launched the app, if any. Available immediately on app startup. ```typescript import * as QuickActions from "expo-quick-actions"; if (QuickActions.initial) { console.log("Launched with action:", QuickActions.initial.id); handleAction(QuickActions.initial); } ``` -------------------------------- ### Install Specific expo-quick-actions Version Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/compatibility.md Manually install a specific version of expo-quick-actions. This is useful if you need to pin to a particular release, for example, version 6.0.2. ```bash npm install expo-quick-actions@6.0.2 ``` -------------------------------- ### Install Latest Compatible expo-quick-actions Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/compatibility.md Install the latest version of expo-quick-actions that is compatible with your Expo project. This command automatically selects the correct version based on your Expo SDK. ```bash npx expo install expo-quick-actions ``` -------------------------------- ### Example setIcon Usage Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/module-exports.md Demonstrates changing the app icon to a named icon and then resetting it to the default. ```typescript import * as AppIcon from "expo-quick-actions/icon"; await AppIcon.setIcon("dark"); await AppIcon.setIcon(null); // Reset to default ``` -------------------------------- ### Setup Quick Actions in Layout Component Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/README.md Initialize quick actions and set items within your root layout component using `useQuickActionRouting` and `setItems`. ```typescript import * as QuickActions from "expo-quick-actions"; import { useQuickActionRouting } from "expo-quick-actions/router"; import { useEffect } from "react"; import { Slot } from "expo-router"; export default function RootLayout() { useQuickActionRouting(); useEffect(() => { QuickActions.setItems([ { id: "compose", title: "Compose", icon: "compose", params: { href: "/compose" }, }, ]); }, []); return ; } ``` -------------------------------- ### Complete Icon Plugin Configuration Example Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/api-reference/config-plugin.md A detailed configuration for the icon plugin, specifying default and platform-specific icons, including seasonal and development variants. ```json { "expo": { "plugins": [ [ "expo-quick-actions/icon/plugin", { "default": "./assets/icons/app-icon.png", "dark": "./assets/icons/app-icon-dark.png", "light": "./assets/icons/app-icon-light.png", "seasonal": "./assets/icons/app-icon-seasonal.png", "dev": "./assets/icons/app-icon-dev.png" } ] ] } } ``` -------------------------------- ### Example RouterAction Objects Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/api-reference/router.md Illustrates how to create `RouterAction` objects for navigating to different routes within an Expo Router application. Includes examples for a search action and a settings action. ```typescript const searchAction: RouterAction = { id: "search", title: "Search", icon: "search", params: { href: "/search", query: "default query", // Additional param }, }; const settingsAction: RouterAction = { id: "settings", title: "Settings", subtitle: "App preferences", icon: "symbol:gear", params: { href: "/settings", }, }; ``` -------------------------------- ### Basic Setup with Expo Router Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/api-reference/router.md Enable automatic routing for quick actions by calling `useQuickActionRouting()` and configuring items with `params.href` in your root layout. ```typescript // app/(root)/_layout.tsx import { useQuickActionRouting } from "expo-quick-actions/router"; import { Slot } from "expo-router"; import * as QuickActions from "expo-quick-actions"; import { useEffect } from "react"; export default function RootLayout() { // Enable automatic routing for quick actions with href useQuickActionRouting(); useEffect(() => { // Configure your quick actions QuickActions.setItems([ { id: "search", title: "Search", icon: "search", params: { href: "/search" }, }, { id: "compose", title: "New Message", icon: "compose", params: { href: "/compose" }, }, { id: "settings", title: "Settings", icon: "symbol:gear", params: { href: "/settings" }, }, ]); }, []); return ; } ``` -------------------------------- ### Complete Expo Quick Actions Configuration Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/api-reference/config-plugin.md A comprehensive example of configuring both Android and iOS actions, including custom icons for each platform. ```json { "expo": { "plugins": [ [ "expo-quick-actions", { "androidIcons": { "shortcut_compose": { "foregroundImage": "./assets/icons/compose-fg.png", "backgroundColor": "#EA3323" }, "shortcut_search": { "foregroundImage": "./assets/icons/search-fg.png", "backgroundColor": "#4A90E2", "backgroundImage": "./assets/icons/search-bg.png" }, "shortcut_settings": "./assets/icons/settings.png", "shortcut_remote": "https://example.com/icon.png" }, "iosIcons": { "shortcut_compose": "./assets/icons/compose.png", "shortcut_search": { "1x": "./assets/icons/search-1x.png", "2x": "./assets/icons/search-2x.png", "3x": "./assets/icons/search-3x.png" } }, "iosActions": [ { "id": "compose", "title": "New Message", "icon": "shortcut_compose", "params": { "href": "/compose" } }, { "id": "search", "title": "Search", "icon": "shortcut_shortcut_search", "params": { "href": "/search" } }, { "id": "settings", "title": "Settings", "subtitle": "App Preferences", "icon": "symbol:gear", "params": { "href": "/settings" } } ] } ] ] } } ``` -------------------------------- ### Example useQuickActionRouting Usage Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/module-exports.md Demonstrates integrating the `useQuickActionRouting` hook into a sub-layout component to enable automatic routing. ```typescript import { useQuickActionRouting } from "expo-quick-actions/router"; export default function Layout() { useQuickActionRouting(); return ; } ``` -------------------------------- ### Get Initial Quick Action Source: https://github.com/evanbacon/expo-quick-actions/blob/main/README.md Retrieve the initial quick action item that was used to launch the app, if any. ```tsx const initialAction = QuickActions.initial; ``` -------------------------------- ### Example RouterAction Usage Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/module-exports.md Demonstrates how to define and use a RouterAction with a specific app route type. ```typescript type AppRoute = "/search" | "/compose" | "/settings"; const action: RouterAction = { id: "search", title: "Search", params: { href: "/search" }, }; ``` -------------------------------- ### Install Required Packages for Config Plugin Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/compatibility.md When using the expo-quick-actions config plugin, ensure these development dependencies are installed in your project. This includes the Expo Config Plugins and expo-module-scripts. ```json { "devDependencies": { "@expo/config-plugins": "^56.0.0", "expo-module-scripts": "^56.0.0" } } ``` -------------------------------- ### Dynamic App Icon Plugin Basic Setup Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/configuration.md Configure the dynamic app icon plugin in app.json. This allows for runtime switching of app icons. ```json { "expo": { "plugins": [ [ "expo-quick-actions/icon/plugin", [] // Array or object format ] ] } } ``` -------------------------------- ### Combining Expo Quick Actions and Icon Plugins Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/api-reference/config-plugin.md Example of how to use both the main expo-quick-actions plugin and its icon plugin within the app's config. This demonstrates the structure for configuring both actions and icons. ```json { "expo": { "plugins": [ [ "expo-quick-actions", { "androidIcons": { ... }, "iosIcons": { ... }, "iosActions": [ ... ] } ], [ "expo-quick-actions/icon/plugin", { "dark": "./assets/app-icon-dark.png", "light": "./assets/app-icon-light.png" } ] ] } } ``` -------------------------------- ### Get Initial Quick Action Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/api-reference/main.md Retrieves the quick action that was used to launch the app. Returns undefined if the app was not launched via a quick action or if the device does not support them. ```typescript const initialAction = QuickActions.initial; if (initialAction) { console.log("App opened with quick action:", initialAction.id); } ``` -------------------------------- ### Example isRouterAction Usage Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/module-exports.md Shows how to use the `isRouterAction` type guard to safely navigate using action parameters. ```typescript import { isRouterAction } from "expo-quick-actions/router"; if (isRouterAction(action)) { router.navigate(action.params.href); } ``` -------------------------------- ### Configure Expo Quick Actions Plugin Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/api-reference/config-plugin.md Add the `expo-quick-actions` plugin to your `app.json` to enable its features. This example shows the basic structure for including the plugin with configuration options. ```json { "expo": { "plugins": [ [ "expo-quick-actions", { "androidIcons": { ... }, "iosIcons": { ... }, "iosActions": [ ... ] } ] ] } } ``` -------------------------------- ### Set Quick Actions at Runtime Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/README.md Configure the quick actions that appear when a user long-presses the app icon. Ensure the `expo-quick-actions` library is installed and imported. ```typescript import * as QuickActions from "expo-quick-actions"; await QuickActions.setItems([ { id: "1", title: "Search", icon: "search", params: { href: "/search" }, }, ]); ``` -------------------------------- ### App Icon Selection UI Source: https://github.com/evanbacon/expo-quick-actions/blob/main/_autodocs/api-reference/icon.md Create a user interface for selecting and changing the app icon. This example maps buttons to available icon names and handles the logic for setting the chosen icon. ```typescript import * as AppIcon from "expo-quick-actions/icon"; import { View, Button, Text } from "react-native"; import { useState } from "react"; const AVAILABLE_ICONS = ["default", "dark", "light", "colorful"]; export function IconSelector() { const [currentIcon, setCurrentIcon] = useState(null); async function handleIconSelect(iconName: string) { if (!AppIcon.setIcon) { return; } try { const name = iconName === "default" ? null : iconName; await AppIcon.setIcon(name); setCurrentIcon(iconName === "default" ? null : iconName); } catch (error) { console.error("Failed to set icon:", error); } } if (!AppIcon.isSupported) { return App icon switching is not supported on this device; } return ( {AVAILABLE_ICONS.map((icon) => (