テストウィジェット作成

app.json

@@ -3,9 +3,24 @@
     "name": "JR四国運行状況",
     "slug": "jrshikoku",
     "privacy": "public",
-    "platforms": [
-      "ios",
-      "android"
+    "platforms": ["ios", "android"],
+    "plugins": [
+      [
+        "react-native-android-widget",
+        {
+          "widgets": [
+            {
+              "name": "JR四国運行状況",
+              "label": "My Hello Widget",
+              "minWidth": "320dp",
+              "minHeight": "120dp",
+              "description": "This is my first widget",
+              "previewImage": "./assets/icon.png",
+              "updatePeriodMillis": 1800000
+            }
+          ]
+        }
+      ]
     ],
     "version": "4.6",
     "orientation": "default",
@@ -19,9 +34,7 @@
       "fallbackToCacheTimeout": 0,
       "url": "https://u.expo.dev/398abf60-57a7-11e9-970c-8f04356d08bf"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "buildNumber": "31",
       "supportsTablet": true,
@@ -33,9 +46,7 @@
     "android": {
       "package": "jrshikokuinfo.xprocess.hrkn",
       "versionCode": 20,
-      "permissions": [
-        "ACCESS_FINE_LOCATION"
-      ],
+      "permissions": ["ACCESS_FINE_LOCATION"],
       "googleServicesFile": "./google-services.json",
       "config": {
         "googleMaps": {

components/AndroidWidget/HelloWidget.jsx

@@ -0,0 +1,26 @@
+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>
+  );
+}

components/AndroidWidget/HelloWidgetPreviewScreen.jsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+import { WidgetPreview } from "react-native-android-widget";
+
+import { HelloWidget } from "./HelloWidget";
+
+export function HelloWidgetPreviewScreen() {
+  return (
+    <View style={styles.container}>
+      <WidgetPreview
+        renderWidget={() => <HelloWidget />}
+        width={320}
+        height={200}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

components/AndroidWidget/widget-task-handler.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { HelloWidget } from "./HelloWidget";
+
+const nameToWidget = {
+  // Hello will be the **name** with which we will reference our widget.
+  Hello: HelloWidget,
+};
+
+export async function widgetTaskHandler(props) {
+  const widgetInfo = props.widgetInfo;
+  const Widget = nameToWidget[widgetInfo.widgetName];
+
+  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;
+  }
+}

index.js

@@ -0,0 +1,11 @@
+import { registerRootComponent } from "expo";
+import { registerWidgetTaskHandler } from "react-native-android-widget";
+
+import App from "./App";
+import { widgetTaskHandler } from "./components/AndroidWidget/widget-task-handler";
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);
+registerWidgetTaskHandler(widgetTaskHandler);

package.json

@@ -1,5 +1,5 @@
 {
-  "main": "node_modules/expo/AppEntry.js",
+  "main": "index.js",
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
@@ -31,6 +31,7 @@
     "react": "18.2.0",
     "react-native": "0.72.6",
     "react-native-actions-sheet": "0.8.21",
+    "react-native-android-widget": "^0.11.2",
     "react-native-auto-height-image": "^3.2.4",
     "react-native-elements": "^3.4.2",
     "react-native-gesture-handler": "~2.12.0",

yarn.lock

@@ -8684,6 +8684,11 @@ react-native-actions-sheet@0.8.21:
   resolved "https://registry.yarnpkg.com/react-native-actions-sheet/-/react-native-actions-sheet-0.8.21.tgz#d9175e7d5d862217f990b2ccc8a216fb4fc35b06"
   integrity sha512-WUtrGbPSlY8YuVSxKVJ36f3PrVMGMOQ5Cp5dtpurc71Uih4LEGGhEEk8yme/QOquiGsu77be0sZT4CrSUOSXag==
 
+react-native-android-widget@^0.11.2:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/react-native-android-widget/-/react-native-android-widget-0.11.2.tgz#541cc4931f6cf362b533d0e079a740ee595cd88e"
+  integrity sha512-Ro4inoMaXFtcMX/9p+O+e/Cm0ckg6tkbIB/PFdF+xX90+B/2sWjXDL9qgGRAsFN7Auj38hMqTl8bWBlImFCC2A==
+
 react-native-auto-height-image@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/react-native-auto-height-image/-/react-native-auto-height-image-3.2.4.tgz#c7a95d4d9701055c680c8dc02076def1107f9522"