Add Widget

app.config.ts

@@ -0,0 +1,69 @@
+import type { ConfigContext, ExpoConfig } from "expo/config";
+import type { WithAndroidWidgetsParams } from "react-native-android-widget";
+
+const widgetConfig: WithAndroidWidgetsParams = {
+  widgets: [
+    {
+      name: "Date", // This name will be the **name** with which we will reference our widget.
+      label: "امروز چندمه؟", // Label shown in the widget picker
+      // 4 x 1 cells (70 × n − 30) **n is number of cells**
+      minWidth: `${70 * 4 - 30}dp`,
+      minHeight: `${70 * 1 - 30}dp`,
+      description: "Get Today's Date in Gregorian", // Description shown in the widget picker
+      previewImage: "./assets/date_preview.png", // Path to widget preview image
+      resizeMode: "horizontal",
+      // 5 x 1 cells
+      maxResizeWidth: `${70 * 5 - 30}dp`,
+
+      // How often, in milliseconds, that this AppWidget wants to be updated.
+      // The task handler will be called with widgetAction = 'UPDATE_WIDGET'.
+      // Default is 0 (no automatic updates)
+      // Minimum is 1800000 (30 minutes == 30 * 60 * 1000).
+      updatePeriodMillis: 3600000, // One hour
+    },
+  ],
+};
+
+export default ({ config }: ConfigContext): ExpoConfig => ({
+  ...config,
+  name: "امروز چندمه؟",
+  description:
+    "An App which Gives Today's Date in Gregorian, Jalali, and Hijri",
+  slug: "Chandome",
+  version: "1.0.0",
+  orientation: "portrait",
+  icon: "./assets/icon.png",
+  userInterfaceStyle: "light",
+  plugins: [["react-native-android-widget", widgetConfig]],
+  splash: {
+    image: "./assets/splash.png",
+    resizeMode: "contain",
+    backgroundColor: "#000000",
+  },
+  assetBundlePatterns: ["**/*"],
+  ios: {
+    supportsTablet: false,
+  },
+  android: {
+    adaptiveIcon: {
+      foregroundImage: "./assets/foreground-icon.png",
+      backgroundImage: "./assets/background-icon.png",
+      monochromeImage: "./assets/monochrome-icon.png",
+    },
+    package: "com.nima96.Chandome",
+  },
+  web: {
+    favicon: "./assets/favicon.png",
+  },
+  extra: {
+    eas: {
+      projectId: "5f361a7b-3d7f-4708-b9da-04949b38c2dd",
+    },
+  },
+  runtimeVersion: {
+    policy: "appVersion",
+  },
+  updates: {
+    url: "https://u.expo.dev/5f361a7b-3d7f-4708-b9da-04949b38c2dd",
+  },
+});

components/DateWidget.jsx

@@ -0,0 +1,27 @@
+import { FlexWidget, TextWidget } from "react-native-android-widget";
+
+import { getJalaliToday } from "../utils/dates";
+
+const DateWidget = () => (
+  <FlexWidget
+    clickAction="OPEN_APP"
+    style={{
+      height: "match_parent",
+      width: "match_parent",
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: "#ffffff",
+      borderRadius: 16,
+    }}
+  >
+    <TextWidget
+      text={getJalaliToday().verbose}
+      style={{
+        fontSize: 24,
+        color: "#000000",
+      }}
+    />
+  </FlexWidget>
+);
+
+export default DateWidget;

index.ts

@@ -0,0 +1,11 @@
+import { registerRootComponent } from "expo";
+import { registerWidgetTaskHandler } from "react-native-android-widget";
+
+import App from "./App";
+import widgetTaskHandler from "./widgetTaskHandler";
+
+// 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,7 +1,7 @@
 {
   "name": "chandome",
   "version": "1.0.0",
-  "main": "node_modules/expo/AppEntry.js",
+  "main": "index.ts",
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
@@ -21,8 +21,12 @@
     "moti": "^0.26.0",
     "react": "18.2.0",
     "react-native": "0.72.4",
+    "react-native-android-widget": "^0.8.0",
     "react-native-reanimated": "~3.3.0",
-    "react-native-size-matters": "^0.4.0"
+    "react-native-size-matters": "^0.4.0",
+    "expo-dev-client": "~2.4.8",
+    "typescript": "^5.1.3",
+    "@types/react": "~18.2.14"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "compilerOptions": {},
+  "extends": "expo/tsconfig.base"
+}