「Hello」と表示するだけの最小限のウィジェットを作成する。

✅パッケージ「React Native Android Widget」を使う。

✅TypeScript（JavaScript）のファイルを編集するだけで実装できる。

✅Androidのみ対応。

（iOSは別途作成が必要。今回はAndroidのみ解説する。）

iOS用のパッケージもいくつか存在する。

📎

iOSのウィジェットを作成する方法

React Native (Expo CNG) + Swift で iOS Widget を開発する

https://zenn.dev

Expo(React native)環境でapple widgetを実装する

Expo(React native)環境でapple widgetを実装します

https://tech.fusic.co.jp

事前に用意しておくもの

• React Native（Expo）のプロジェクト

今からインストールするもの

• React Native Android Widget

✅「Hello」と表示するコンポーネントを作成する。

components/widget/HelloWidget.tsx

（ファイルの場所はどこでもOK。コピペでOK。）

import React from 'react';
// ウィジェット専用のコンポーネント
import { FlexWidget, TextWidget } from 'react-native-android-widget';

export function HelloWidget() {
  return (
    <FlexWidget
      style={{
        height: 'match_parent',
        width: 'match_parent',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#ffffff',
        borderRadius: 16,
      }}
    >
      <TextWidget
        text="Hello"
        style={{
          fontSize: 32,
          fontFamily: 'Inter',
          color: '#000000',
        }}
      />
    </FlexWidget>
  );
}

// ウィジェット専用のコンポーネント
import { FlexWidget, TextWidget } from 'react-native-android-widget';

✅ウィジェットにはタスクハンドラーが必須。

components/widget/widget-task-handler.tsx

（ファイルの場所はどこでもOK。コピペでOK。）

import React from 'react';
import type { WidgetTaskHandlerProps } from 'react-native-android-widget';
import { HelloWidget } from './HelloWidget';

// ①ウィジェットの名前 と コンポーネント の紐づけ
const nameToWidget = {
  Hello: HelloWidget,
};

export async function widgetTaskHandler(props: WidgetTaskHandlerProps) {
  const widgetInfo = props.widgetInfo;
  const Widget =
    nameToWidget[widgetInfo.widgetName as keyof typeof nameToWidget];

	// ②イベント処理
  switch (props.widgetAction) {
    case 'WIDGET_ADDED':
      props.renderWidget(<Widget />);
      break;

    case 'WIDGET_UPDATE':
      // Not needed for now
      break;

    case 'WIDGET_RESIZED':
      // Not needed for now
      break;

    case 'WIDGET_DELETED':
      // Not needed for now
      break;

    case 'WIDGET_CLICK':
      // Not needed for now
      break;

    default:
      break;
  }
}

// ①ウィジェットの名前 と コンポーネント の紐づけ
const nameToWidget = {
  Hello: HelloWidget,
};

// ②イベント処理
switch (props.widgetAction) {
  case 'WIDGET_ADDED':
    props.renderWidget(<Widget />);
    break;

  case 'WIDGET_UPDATE':
    // Not needed for now
    break;

  case 'WIDGET_RESIZED':
    // Not needed for now
    break;

  case 'WIDGET_DELETED':
    // Not needed for now
    break;

  case 'WIDGET_CLICK':
    // Not needed for now
    break;

  default:
    break;
}

✅先ほど作ったタスクハンドラーを登録する。

1. エントリーポイントをindex.tsに変更する。

   package.json

   Copy

   {
     "name": "my-expo-app",
     "main": "index.ts",       // これ
     ...
   }

2. 空のindex.tsファイルを作成する。

3. 一旦、デフォルトのエントリーポイント「node_modules/expo/AppEntry.js」をコピペする。

   index.ts

   Copy

   import registerRootComponent from 'expo/build/launch/registerRootComponent';
   
   // パスは変更する
   import App from '.App';
   
   registerRootComponent(App);

4. タスクハンドラーを登録する処理を追記する。

   index.ts

   Copy

   import registerRootComponent from 'expo/build/launch/registerRootComponent';
   // ✅追記
   import { registerWidgetTaskHandler } from 'react-native-android-widget';
   
   import App from './App';
   // ✅追記
   import { widgetTaskHandler } from './widget-task-handler';
   
   registerRootComponent(App);
   // ✅追記
   registerWidgetTaskHandler(widgetTaskHandler);

import { AppRegistry } from 'react-native';
import { registerWidgetTaskHandler } from 'react-native-android-widget';
import { name as appName } from './app.json';
import App from './App';
import { widgetTaskHandler } from './widget-task-handler';

AppRegistry.registerComponent(appName, () => App);
registerWidgetTaskHandler(widgetTaskHandler);

// `@expo/metro-runtime` MUST be the first import to ensure Fast Refresh works
// on web.
import '@expo/metro-runtime';

import { App } from 'expo-router/build/qualified-entry';
import { renderRootComponent } from 'expo-router/build/renderRootComponent';

import { registerWidgetTaskHandler } from 'react-native-android-widget';
import { widgetTaskHandler } from '@/components/widget/widget-task-handler';

// This file should only import and register the root. No components or exports
// should be added here.
renderRootComponent(App);
registerWidgetTaskHandler(widgetTaskHandler);

✅config pluginがサポートされているので、app.config.tsにウィジェットの情報を登録するだけでOK。

app.config.ts

import type { ConfigContext, ExpoConfig } from 'expo/config';
import type { WithAndroidWidgetsParams } from 'react-native-android-widget';

const widgetConfig: WithAndroidWidgetsParams = {
  // 【任意】カスタムフォントのパス
  fonts: ['./assets/fonts/Inter.ttf'],
  widgets: [
    {
      name: 'Hello', // ウィジェットの名前（タスクハンドラーに書いたウィジェット名に合わせる）
      label: 'My Hello Widget', // ウィジェットピッカーに表示されるラベル
      minWidth: '320dp',
      minHeight: '120dp',
      // これは、ウィジェットのデフォルトのサイズがtargetCellWidthとtargetCellHeight属性で指定された5x2セルであることを意味します。
      // または、Android 11以下のデバイスではminWidthとminHeightで指定された320×120dpであることを意味します。
      // 定義されている場合、targetCellWidthとtargetCellHeightの属性はminWidthやminHeightの代わりに使用されます。
      targetCellWidth: 5,
      targetCellHeight: 2,
      description: 'This is my first widget', // ウィジェットピッカーに表示される説明
      previewImage: './assets/widget-preview/hello.png', // 【任意】ウィジェットプレビュー画像へのパス

      // このAppWidgetが更新される頻度（ミリ秒単位）。
      // タスクハンドラはwidgetAction = 'UPDATE_WIDGET'で呼び出されます。
      // デフォルトは0（自動更新なし）
      // 最小は1800000（30分 == 30 * 60 * 1000）。
      updatePeriodMillis: 1800000,
    },
  ],
};

export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  name: 'My Expo App Name',
  plugins: [['react-native-android-widget', widgetConfig]],
});

【補足】素のReact Nativeの場合

📎

公式ドキュメントを参照

Register widget | React Native Android Widget

In order to register our widget so that it can be selected from the launchers widget picker, we need to tell the android app some information about the widget.

https://saleksovski.github.io

✅Expo Goでは実行できないため、開発ビルドで動作確認する。

1. 開発ビルドのビルド設定を追加

   eas.json

   Copy

   {	
     "build": {
   	  ...
     
   	  // 追記
       "development": {
         "developmentClient": true,
         "distribution": "internal",
         "android": {
           "buildType": "apk"
         }
       },
       
       ...
     },
   }
   

2. 開発ビルドで必要なパッケージ「expo-dev-client」をインストール
   Copy

   npx expo install expo-dev-client

3. 開発ビルドを実行

   ※EASのアカウントが必要（無料）

   Copy

   eas build --platform android --profile development

4. ビルドが完成したら実機またはエミュレータにインストールする。

   （ビルド結果のWebページからapkファイルをダウンロードすればOK）

   

   

5. 動作確認

   開発PCでnpx expo start --dev-clientを実行した状態で、実機またはエミュレータでウィジェットが追加できるか動作確認する。