React NativeでiOSとAndroid向けのカスタムウィジェットを作成

npx react-native init HealthStatsWidgetApp
cd HealthStatsWidgetApp

npm install react-native-shared-group-preferences
cd ios && pod install

// src/App.js
import React from 'react';
import { SafeAreaView, Button, View, Text } from 'react-native';
import SharedGroupPreferences from 'react-native-shared-group-preferences';

const App = () => {
  const appGroupIdentifier = 'group.com.yourcompany.HealthStatsWidgetApp'; // App Group識別子に置き換えてください

  const updateWidgetData = async () => {
    const healthData = {
      steps: Math.floor(Math.random() * 10000),
      sleepScore: Math.floor(Math.random() * 100),
    };

    try {
      await SharedGroupPreferences.setItem('healthData', healthData, appGroupIdentifier);
      console.log('共有ストレージにデータを保存しました');
    } catch (error) {
      console.error('データ保存エラー:', error);
    }
  };

  return (
    <SafeAreaView>
      <View style={{ padding: 20 }}>
        <Text style={{ fontSize: 18, marginBottom: 20 }}>Health Stats App</Text>
        <Button title="Update Widget Data" onPress={updateWidgetData} />
      </View>
    </SafeAreaView>
  );
};

export default App;

// HealthStatsWidget/HealthStatsWidget.swift
import WidgetKit
import SwiftUI

struct HealthData: Codable {
    let steps: Int
    let sleepScore: Int
}

struct Provider: TimelineProvider {
    let appGroupIdentifier = "group.com.yourcompany.HealthStatsWidgetApp" // App Group識別子に置き換えてください

    func placeholder(in context: Context) -> SimpleEntry {
        SimpleEntry(date: Date(), healthData: HealthData(steps: 8000, sleepScore: 85))
    }

    func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ()) {
        let entry = SimpleEntry(date: Date(), healthData: HealthData(steps: 8000, sleepScore: 85))
        completion(entry)
    }

    func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        let userDefaults = UserDefaults(suiteName: appGroupIdentifier)
        var entries: [SimpleEntry] = []

        if let savedData = userDefaults?.object(forKey: "healthData") as? [String: Any] {
            let steps = savedData["steps"] as? Int ?? 0
            let sleepScore = savedData["sleepScore"] as? Int ?? 0
            let entry = SimpleEntry(date: Date(), healthData: HealthData(steps: steps, sleepScore: sleepScore))
            entries.append(entry)
        } else {
            let entry = SimpleEntry(date: Date(), healthData: HealthData(steps: 0, sleepScore: 0))
            entries.append(entry)
        }

        let timeline = Timeline(entries: entries, policy: .atEnd)
        completion(timeline)
    }
}

struct SimpleEntry: TimelineEntry {
    let date: Date
    let healthData: HealthData
}

struct HealthStatsWidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        VStack {
            Text("Health Stats")
                .font(.headline)
            Text("Steps: \(entry.healthData.steps)")
            Text("Sleep Score: \(entry.healthData.sleepScore)")
        }
    }
}

@main
struct HealthStatsWidget: Widget {
    let kind: String = "HealthStatsWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            HealthStatsWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("Health Stats")
        .description("Your daily health stats.")
    }
}

<!-- res/layout/health_stats_widget.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:background="@android:color/white"
    android:padding="16dp">

    <TextView
        android:id="@+id/widget_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Health Stats"
        android:textColor="@android:color/black"
        android:textSize="18sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/widget_steps"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Steps: 0"
        android:textColor="@android:color/black" />

    <TextView
        android:id="@+id/widget_sleep"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Sleep Score: 0"
        android:textColor="@android:color/black" />
</LinearLayout>

// android/app/src/main/java/com/healthstatswidgetapp/SharedStorageModule.java
package com.healthstatswidgetapp;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import android.content.Context;
import android.content.SharedPreferences;

public class SharedStorageModule extends ReactContextBaseJavaModule {
    ReactApplicationContext context;

    public SharedStorageModule(ReactApplicationContext reactContext) {
        super(reactContext);
        context = reactContext;
    }

    @Override
    public String getName() {
        return "SharedStorage";
    }

    @ReactMethod
    public void set(String data) {
        SharedPreferences.Editor editor = context.getSharedPreferences("DATA", Context.MODE_PRIVATE).edit();
        editor.putString("healthData", data);
        editor.apply();
    }
}

// android/app/src/main/java/com/healthstatswidgetapp/SharedStoragePackage.java
package com.healthstatswidgetapp;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class SharedStoragePackage implements ReactPackage {

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new SharedStorageModule(reactContext));
        return modules;
    }
}

// android/app/src/main/java/com/healthstatswidgetapp/MainApplication.java
// ...
import com.healthstatswidgetapp.SharedStoragePackage; // このインポートを追加

public class MainApplication extends Application implements ReactApplication {
    // ...
    @Override
    protected List<ReactPackage> getPackages() {
        @SuppressWarnings("UnnecessaryLocalVariable")
        List<ReactPackage> packages = new PackageList(this).getPackages();
        // オートリンクされていないパッケージはここに手動で追加できます，例如:
        packages.add(new SharedStoragePackage()); // この行を追加
        return packages;
    }
    // ...
}

// android/app/src/main/java/com/healthstatswidgetapp/HealthStatsWidgetProvider.java
package com.healthstatswidgetapp;

import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.Context;
import android.content.SharedPreferences;
import android.widget.RemoteViews;
import org.json.JSONObject;

public class HealthStatsWidgetProvider extends AppWidgetProvider {

    static void updateAppWidget(Context context, AppWidgetManager appWidgetManager, int appWidgetId) {
        try {
            SharedPreferences sharedPref = context.getSharedPreferences("DATA", Context.MODE_PRIVATE);
            String healthDataString = sharedPref.getString("healthData", "{\"steps\":0,\"sleepScore\":0}");

            JSONObject healthData = new JSONObject(healthDataString);

            // RemoteViewsオブジェクトを構築
            RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.health_stats_widget);
            views.setTextViewText(R.id.widget_steps, "Steps: " + healthData.getInt("steps"));
            views.setTextViewText(R.id.widget_sleep, "Sleep Score: " + healthData.getInt("sleepScore"));

            // ウィジェットマネージャーに対してウィジェットの更新を指示
            appWidgetManager.updateAppWidget(appWidgetId, views);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    @Override
    public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {
        // 複数のウィジェットがアクティブになっている場合があるため、すべてを更新
        for (int appWidgetId : appWidgetIds) {
            updateAppWidget(context, appWidgetManager, appWidgetId);
        }
    }
}

// src/App.js（Android追加版）
import React from 'react';
import { SafeAreaView, Button, View, Text, NativeModules, Platform } from 'react-native';
import SharedGroupPreferences from 'react-native-shared-group-preferences';

const { SharedStorage } = NativeModules;

const App = () => {
  const appGroupIdentifier = 'group.com.yourcompany.HealthStatsWidgetApp'; // iOS用

  const updateWidgetData = async () => {
    const healthData = {
      steps: Math.floor(Math.random() * 10000),
      sleepScore: Math.floor(Math.random() * 100),
    };

    if (Platform.OS === 'ios') {
      try {
        await SharedGroupPreferences.setItem('healthData', healthData, appGroupIdentifier);
        console.log('iOSデータを共有ストレージに保存しました');
      } catch (error) {
        console.error('iOSデータ保存エラー:', error);
      }
    } else if (Platform.OS === 'android') {
        try {
            await SharedStorage.set(JSON.stringify(healthData));
            console.log('Androidデータを共有ストレージに保存しました');
        } catch (error) {
            console.error('Androidデータ保存エラー:', error);
        }
    }
  };

  return (
    <SafeAreaView>
      <View style={{ padding: 20 }}>
        <Text style={{ fontSize: 18, marginBottom: 20 }}>Health Stats App</Text>
        <Button title="Update Widget Data" onPress={updateWidgetData} />
      </View>
    </SafeAreaView>
  );
};

export default App;