npm install --save react-native-android-widget23 |
yarn add react-native-android-widget26 |
assets/widget-preview/hello.png20 | 21 |  22 | 23 | ## Add custom fonts used in widgets 24 | 25 | If we need custom fonts for our widgets, we can add them in the assets directory 26 | 27 | For example, `assets/fonts/Inter.ttf` 28 | 29 | ## Use config plugin in [app.(json|config.js|config.ts)](https://docs.expo.dev/workflow/configuration/) 30 | 31 | In this example we are using `app.config.ts` but the changes are similar for all configuration types. 32 | 33 | ```js title="app.config.ts" 34 | import type { ConfigContext, ExpoConfig } from 'expo/config'; 35 | import type { WithAndroidWidgetsParams } from 'react-native-android-widget'; 36 | 37 | const widgetConfig: WithAndroidWidgetsParams = { 38 | // Paths to all custom fonts used in all widgets 39 | fonts: ['./assets/fonts/Inter.ttf'], 40 | widgets: [ 41 | { 42 | name: 'Hello', // This name will be the **name** with which we will reference our widget. 43 | label: 'My Hello Widget', // Label shown in the widget picker 44 | minWidth: '320dp', 45 | minHeight: '120dp', 46 | // This means the widget's default size is 5x2 cells, as specified by the targetCellWidth and targetCellHeight attributes. 47 | // Or 320×120dp, as specified by minWidth and minHeight for devices running Android 11 or lower. 48 | // If defined, targetCellWidth,targetCellHeight attributes are used instead of minWidth or minHeight. 49 | targetCellWidth: 5, 50 | targetCellHeight: 2, 51 | description: 'This is my first widget', // Description shown in the widget picker 52 | previewImage: './assets/widget-preview/hello.png', // Path to widget preview image 53 | 54 | // How often, in milliseconds, that this AppWidget wants to be updated. 55 | // The task handler will be called with widgetAction = 'UPDATE_WIDGET'. 56 | // Default is 0 (no automatic updates) 57 | // Minimum is 1800000 (30 minutes == 30 * 60 * 1000). 58 | updatePeriodMillis: 1800000, 59 | }, 60 | ], 61 | }; 62 | 63 | export default ({ config }: ConfigContext): ExpoConfig => ({ 64 | ...config, 65 | name: 'My Expo App Name', 66 | plugins: [['react-native-android-widget', widgetConfig]], 67 | }); 68 | ``` 69 | 70 | :::note 71 | By default the widget Java class will be put inside `
{description}
42 |{siteConfig.tagline}
24 |