記事を検索

npm install --save react-native-android-widget

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

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