Skip to main content

Handling Clicks

All widget primitives can be clicked, and execute some code.

To add a click action to FlexWidget, we need to pass a clickAction prop, and an optional clickActionData prop. clickActionData can be used to add additional data that we need.

warning

clickAction only works on Android 7 and up

import { FlexWidget } from 'react-native-android-widget';

export function MyWidget() {
return (
<FlexWidget clickAction="MY_ACTION" clickActionData={{ id: 0 }}>
...
</FlexWidget>
);
}

Inside our registerWidgetTaskHandler handler we can check for the widgetAction, and if the widgetAction is WIDGET_CLICK, props.clickAction will be the clickAction we set to the View.

export async function widgetTaskHandler(props: WidgetTaskHandlerProps) {
switch (props.widgetAction) {
case 'WIDGET_ADDED':
// ...;
break;

case 'WIDGET_UPDATE':
// ...;
break;

case 'WIDGET_RESIZED':
// ...;
break;

case 'WIDGET_DELETED':
// ...;
break;

case 'WIDGET_CLICK':
if (props.clickAction === 'MY_ACTION') {
// Do stuff when primitive with `clickAction="MY_ACTION"` is clicked
// props.clickActionData === { id: 0 }
}
break;

default:
break;
}
}

Special cases

There are a few special values for clickAction that will not emit the action, but will execute the action in the background.

Those are:

  • "OPEN_APP"

    This clickAction does not required clickActionData, and if set on a section of the widget it will open the application when clicked

  • "OPEN_URI"

    This clickAction requires a clickActionData that contains { uri: 'some-uri' }. The uri can be a web uri (https://google.com), or an app deep link (androidwidgetexample://deep-link)

    For the deep link to open a screen in the app deep linking must be set up using:

Demo

All click action types are presend in the Click Demo widget in the demo app.