React Native × Expo ホーム画面からの長押し起動対応（expo-quick-actions）

この記事で書くこと

React Native（Expo）を使ってクイックアクションを作る方法について書きます。

クイックアクションとはホーム画面の当該アイコンを長押しすることで出現するメニューのことです。各OSの公式サイトでは、

• Android ... app shortcuts
• iOS ... quick actions

という名前で呼ばれています。

以下のライブラリを使います。

https://github.com/EvanBacon/expo-quick-actions

名前からexpo公式ライブラリかと思いそうですが、READMEにも記載の通り非公式です。しかし、Expoのエンジニアが開発しています。（2025/05/25時点）

expo-quick-actionsを使う

expo 53 expo-quick-actions 5.0.0 expo-router 5.0.6を使用しています。

最小限の動作例

基本的にsetItemsとuseQuickActionRoutingを呼び出すだけです。

app.tsx

import { useQuickActionRouting, RouterAction } from "expo-quick-actions/router";
import * as QuickActions from "expo-quick-actions";

export default function Layout() {
  useQuickActionRouting();

  useEffect(() => {
    QuickActions.setItems<RouterAction>([
      {
        id: "0",
        title: "あいうえお",
        subtitle: "ABC",      // ios only
        params: { href: "/sample" },
      },
      {
        id: "1",
        title: "かきくけこ",
        subtitle: "DEF",      // ios only
        params: { href: "/test" },
      }
    ]);
  }, []);

  return <SomeScreen />;
}

params.hrefにルーティングパスを指定することで、アクションから特定ページに遷移することができます。

この時点でdevelopment buildを行ったときの挙動です。

Android	iOS

アイコンを設定してみる

アイコンに使える素材はさまざまなものがあるみたいですが、今回は、AndroidはAdaptive Icon、iOSはSF Symbolsを使います。Androidのために、app.jsonを編集します。

app.json

"plugins":[
   ... 中略 ...
   [
      "expo-quick-actions",
      {
         "androidIcons":{
            "pencil_icon":{ 
               "foregroundImage": "./assets/images/ic_pencil.png",
               "backgroundColor": "#a258df"
            },
            "heart_icon":{
               "foregroundImage": "./assets/images/ic_heart.png",
               "backgroundColor": "#006eff"
            }
         }
      }
   ]
],

Actionの中でiconを指定します。

app.tsx

QuickActions.setItems<RouterAction>([
  {
    id: "0",
    title: "あいうえお",
    subtitle: "ABC",
    icon: Platform.OS === "android" ? "pencil_icon" : "symbol:square.and.pencil",
    params: {href: "/sample"},
  },
  {
    id: "1",
    title: "かきくけこ",
    subtitle: "DEF",
    icon: Platform.OS === "android" ? "heart_icon" : "symbol:heart.fill",
    params: {href: "/test"},
  },
]);

最終的なUIは以下のようになります。

Android	iOS

アイコンが期待通り表示されない場合、大抵サイズが問題だと思います。サイズが不正でもエラーなどが出力されることはないと思うので原因特定が難しいと思います。

参考

https://github.com/EvanBacon/expo-quick-actions

https://expo.dev/blog/expo-quick-actions