{"library":"react-native-android-widget","title":"React Native Android Widget","description":"`react-native-android-widget` is an open-source library that empowers developers to build native Android home screen widgets directly using React Native components and paradigms. It bridges the gap between React's declarative UI approach and the Android widget framework, minimizing the need for native Java/Kotlin code for UI definition. The package is currently at stable version 0.20.1 and maintains a frequent release cadence, regularly adding support for the latest React Native versions (e.g., 0.83, 0.79) and enhancing functionality. Key differentiators include built-in accessibility (TalkBack) support, dark mode capabilities, and compatibility with the new React Native architecture. It provides tools for quick iteration through a `WidgetPreview` component and simplifies the complex process of registering and updating widgets.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-android-widget"],"cli":null},"imports":["import { registerWidget } from 'react-native-android-widget';","import { WidgetPreview } from 'react-native-android-widget';","import { FlexWidget, TextWidget } from 'react-native-android-widget';","import { registerWidgetTaskHandler } from 'react-native-android-widget';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { \n  TextWidget, \n  FlexWidget, \n  registerWidget, \n  WidgetPreview, \n  registerWidgetTaskHandler,\n  RNWidgetJsCommunication,\n} from 'react-native-android-widget';\nimport { useEffect, useState } from 'react';\nimport { AppRegistry, SafeAreaView, StyleSheet, Button } from 'react-native';\n\nconst HelloWorldWidget = () => {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    // This effect runs only in the React Native app, not the widget\n    console.log('Widget component mounted in app preview');\n  }, []);\n\n  return (\n    <FlexWidget \n      style={{\n        height: 'match_parent',\n        width: 'match_parent',\n        backgroundColor: '#f0f0f0',\n        borderRadius: 16,\n        justifyContent: 'center',\n        alignItems: 'center',\n        padding: 16,\n      }}\n    >\n      <TextWidget \n        text={`Hello from Widget! Count: ${count}`}\n        style={{\n          fontSize: 24,\n          fontWeight: 'bold',\n          color: '#333333',\n          textAlign: 'center',\n        }}\n      />\n      <TextWidget\n        text=\"Click to increment (in app)\"\n        style={{\n          fontSize: 14,\n          color: '#666666',\n          marginTop: 8,\n        }}\n      />\n    </FlexWidget>\n  );\n};\n\n// A minimal task handler for the widget to receive events\nconst widgetTaskHandler = async (taskData: any) => {\n  const { widgetId, widgetName, action } = taskData;\n  console.log(`Handling task for ${widgetName} (${widgetId}): ${action}`);\n\n  if (action === 'WIDGET_ADDED' || action === 'WIDGET_UPDATE') {\n    // You might fetch fresh data here or update widget content\n    console.log('Widget added or updated. Scheduling next update.');\n  }\n\n  if (action === 'WIDGET_CLICK') {\n    // Example: Update the widget with new data or open the app\n    RNWidgetJsCommunication.requestWidgetUpdate(widgetName);\n  }\n};\n\n// Register the widget for Android system discovery\nregisterWidget('HelloWorldWidget', () => HelloWorldWidget);\n// Register the task handler for widget lifecycle and interaction events\nregisterWidgetTaskHandler(widgetTaskHandler);\n\n// App component to render the WidgetPreview\nconst App = () => {\n  const [previewCount, setPreviewCount] = useState(0);\n\n  return (\n    <SafeAreaView style={styles.container}>\n      <WidgetPreview \n        name=\"HelloWorldWidget\" \n        initialProps={{ count: previewCount }}\n        style={styles.previewContainer}\n      />\n      <Button \n        title=\"Increment Preview Count\"\n        onPress={() => setPreviewCount(prev => prev + 1)}\n      />\n    </SafeAreaView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#ffffff',\n  },\n  previewContainer: {\n    width: 300,\n    height: 150,\n    backgroundColor: '#eee',\n    marginBottom: 20,\n    borderWidth: 1,\n    borderColor: '#ccc',\n    borderRadius: 8,\n    overflow: 'hidden'\n  }\n});\n\nAppRegistry.registerComponent('YourAppName', () => App);\n","lang":"typescript","description":"This quickstart demonstrates how to define a basic Android widget using `FlexWidget` and `TextWidget`, register it for the Android system, set up a JavaScript task handler for widget events, and preview the widget within a React Native app using `WidgetPreview`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}