Cómo implementar un widget en React Native para iOS

   npm install --global expo-cli

   expo init MyNewApp

   cd MyNewApp
   expo start

# Ejecuta este comando en la raíz de tu proyecto
npx expo prebuild --platform ios

npm install react-native-shared-group-preferences --save
# o con yarn
yarn add react-native-shared-group-preferences

cd ios && pod install
# o
npx pod-install

1. Abre tu proyecto en Xcode (`ios/TuProyecto.xcworkspace`).  
2. Selecciona tu proyecto en el navegador de proyectos.  
3. Selecciona la pestaña **Signing & Capabilities**.  
4. Haz clic en el botón **+** para añadir una nueva capacidad.  
5. Añade **App Groups**.  
6. Crea un nuevo grupo con el formato `group.com.tudominio.tuapp`.  
7. Asegúrate de que tu App ID tiene habilitada esta capacidad en el portal de desarrolladores de Apple.

1. En Xcode, ve a **File > New > Target**.  
2. Selecciona **Widget Extension** de la sección "iOS".  
3. Nombra tu widget (por ejemplo, **MyAppWidget**).  
4. Selecciona **Include Configuration Intent** si deseas que tu widget sea configurable.  
5. Asegúrate de que **Group** esté configurado para el mismo App Group que configuraste previamente.

import WidgetKit
import SwiftUI

struct Reminder: Codable, Identifiable {
    var id: Int
    var name: String
}

struct ReminderWidgetEntry: TimelineEntry {
    let date: Date
    let reminders: [Reminder]
}

struct ReminderWidgetProvider: TimelineProvider {
    func placeholder(in context: Context) -> ReminderWidgetEntry {
        ReminderWidgetEntry(date: Date(), reminders: [Reminder(id: 0, name: "Sample Reminder")])
    }

    func getSnapshot(in context: Context, completion: @escaping (ReminderWidgetEntry) -> ()) {
        let entry = ReminderWidgetEntry(date: Date(), reminders: loadReminders())
        completion(entry)
    }

    func getTimeline(in context: Context, completion: @escaping (Timeline<ReminderWidgetEntry>) -> ()) {        
        let entry = ReminderWidgetEntry(date: Date(), reminders: loadReminders())
        let timeline = Timeline(entries: [entry], policy: .after(Date().addingTimeInterval(900)))
        completion(timeline)
    }

    func loadReminders() -> [Reminder] {
        let sharedDefaults = UserDefaults(suiteName: "group.com.tudominio.tuapp")
        if let jsonString = sharedDefaults?.string(forKey: "reminders"),
           let data = jsonString.data(using: .utf8),
           let reminders = try? JSONDecoder().decode([Reminder].self, from: data) {
            return reminders
        }
        return []
    }
}

struct MyAppWidgetEntryView: View {
    var entry: ReminderWidgetProvider.Entry

    var body: some View {
        VStack(alignment: .leading) {
            Text("My Reminders")
                .font(.headline)
            if entry.reminders.isEmpty {
                Text("No reminders")
                    .font(.caption)
            } else {
                ForEach(entry.reminders) { reminder in
                    Text(reminder.name)
                        .font(.body)
                        .lineLimit(1)
                }
            }
        }
        .padding()
    }
}

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

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: ReminderWidgetProvider()) { entry in
            MyAppWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("Widget Reminder Calendar")
        .description("Displays a list of your reminders.")
    }
}

struct MyAppWidget_Previews: PreviewProvider {
    static var previews: some View {
        let entry = ReminderWidgetEntry(date: Date(), reminders: [
            Reminder(id: 1, name: "Reminder A"),
            Reminder(id: 2, name: "Reminder B"),
            Reminder(id: 3, name: "Reminder C")
        ])
        MyAppWidgetEntryView(entry: entry)
            .previewContext(WidgetPreviewContext(family: .systemMedium))
    }
}

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import SharedGroupPreferences from 'react-native-shared-group-preferences';

const APP_GROUP_IDENTIFIER = 'group.com.tudominio.tuapp';

export default function UpdateWidget() {
  const updateWidgetData = async () => {
    const data = [
      { id: 1, name: 'Reminder A' },
      { id: 2, name: 'Reminder B' },
    ];

    await SharedGroupPreferences.setItem(
      'reminders',
      JSON.stringify(data),
      APP_GROUP_IDENTIFIER
    );
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Update Widget</Text>
      <Button 
        title="Update Widget Now" 
        onPress={updateWidgetData} 
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  title: {
    fontSize: 18,
    marginBottom: 8
  }
});