react-native-android-widget

import { TextWidget, FlexWidget, registerWidget, WidgetPreview, registerWidgetTaskHandler, RNWidgetJsCommunication, } from 'react-native-android-widget'; import { useEffect, useState } from 'react'; import { AppRegistry, SafeAreaView, StyleSheet, Button } from 'react-native'; const HelloWorldWidget = () => { const [count, setCount] = useState(0); useEffect(() => { // This effect runs only in the React Native app, not the widget console.log('Widget component mounted in app preview'); }, []); return ( <FlexWidget style={{ height: 'match_parent', width: 'match_parent', backgroundColor: '#f0f0f0', borderRadius: 16, justifyContent: 'center', alignItems: 'center', padding: 16, }} > <TextWidget text={`Hello from Widget! Count: ${count}`} style={{ fontSize: 24, fontWeight: 'bold', color: '#333333', textAlign: 'center', }} /> <TextWidget text="Click to increment (in app)" style={{ fontSize: 14, color: '#666666', marginTop: 8, }} /> </FlexWidget> ); }; // A minimal task handler for the widget to receive events const widgetTaskHandler = async (taskData: any) => { const { widgetId, widgetName, action } = taskData; console.log(`Handling task for ${widgetName} (${widgetId}): ${action}`); if (action === 'WIDGET_ADDED' || action === 'WIDGET_UPDATE') { // You might fetch fresh data here or update widget content console.log('Widget added or updated. Scheduling next update.'); } if (action === 'WIDGET_CLICK') { // Example: Update the widget with new data or open the app RNWidgetJsCommunication.requestWidgetUpdate(widgetName); } }; // Register the widget for Android system discovery registerWidget('HelloWorldWidget', () => HelloWorldWidget); // Register the task handler for widget lifecycle and interaction events registerWidgetTaskHandler(widgetTaskHandler); // App component to render the WidgetPreview const App = () => { const [previewCount, setPreviewCount] = useState(0); return ( <SafeAreaView style={styles.container}> <WidgetPreview name="HelloWorldWidget" initialProps={{ count: previewCount }} style={styles.previewContainer} /> <Button title="Increment Preview Count" onPress={() => setPreviewCount(prev => prev + 1)} /> </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffffff', }, previewContainer: { width: 300, height: 150, backgroundColor: '#eee', marginBottom: 20, borderWidth: 1, borderColor: '#ccc', borderRadius: 8, overflow: 'hidden' } }); AppRegistry.registerComponent('YourAppName', () => App);