saleksovski / react-native-android-widget Goto Github PK

This might be a limitation of this library, but I feel like there should be a way to do what I need. I realize this is a question, not an issue with the library, but I couldn't find a better way to ask for help.

Prerequisites:

1. I have a working widget created with this lib on an Android device.
2. There is a button in the widget the should trigger an API request and update the UI with the returned data.

Things I've tried:

1. Set clickAction as in the code below:

<IconWidget
  font="material"
  icon="refresh"
  clickAction="REFRESH_WIDGET"
/>

2. Add a case in widget-task-handler.js to handle that clickAction:

case 'WIDGET_CLICK':
  if (widgetInfo.widgetName === 'CustomWidget') {
    if (props.clickAction === 'REFRESH_WIDGET') {
      const cards = await AsyncStorage.getItem('cards');
      const parsedCards = cards ? JSON.parse(cards) : [];

      const listNames = await AsyncStorage.getItem('listNames');
      const parsedListNames = cards ? JSON.parse(listNames) : {};

      props.renderWidget(
        <CustomWidget
          cards={parsedCards}
          listNames={parsedListNames}
        />,
     );
    }
  }
  break;

But obviously that just returns the existing data from AsyncStorage.

3. Add/update AsyncStorage entry in the case statement above and listen for it in the components useEffect hook. Though I'm not sure what my useEffect should look like, since AsyncStorage is asynchronous and it needs to execute every time the shouldFetch value is updated in AsyncStorage:

case 'WIDGET_CLICK':
  if (widgetInfo.widgetName === 'CustomWidget') {
    if (props.clickAction === 'REFRESH_WIDGET') {
      await AsyncStorage.setItem('shouldFetch', 'true');
      // ...

hello, i want to use this library for my app,

i want to set a state whenever a button or a span is clicked on the widget and use that state on other components

what is the solution for this? i have tried so much but didn't come up with an idea.

the state is handled by redux

On first time added widget to screen, ImageWidget working, but when i close my app and WIDGET_UPDATE trigger so ImageWidget is not working. my source image is src/assets/images/widget2.png
Thanks for any help!

case 'WIDGET_UPDATE': props.renderWidget( <Widget {...widgetInfo} /> ) break;

  `<ImageWidget
           image={require('../../assets/images/widget2.png')}
           imageWidth={imageWidth}
           imageHeight={imageHeight}
           radius={10}
  />`

Everything is on the title of the issue, there is some informations:

• I'm using android 13, on a pixel 5 (real device)
• I've also tried using emulator

There is the line of code I'm using
ToastAndroid.show('message', ToastAndroid.LONG);

This line is in my widget task handler file, on the WIDGET_CLICK event

let me know if you want more informations, this isthe first time I open an issue

i follow this instruction, but the widget didn't show anything. And the app.json show here:

"plugins": [
      [
        "react-native-android-widget",
        {
          "widgets": [
            {
              "name": "Hello",
              "label": "My Hello Widget",
              "minWidth": "320dp",
              "minHeight": "120dp",
              "description": "This is my first widget",
              "previewImage": "./assets/icon.png",
              "updatePeriodMillis": 1800000
            }
          ]
        }
      ]
    ]

the version of module is here:

"dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@react-native-community/netinfo": "9.3.7",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "@reduxjs/toolkit": "^1.9.5",
    "dayjs": "^1.11.9",
     ** "expo": "~48.0.18", **
    "expo-image": "~1.0.1",
    "expo-sqlite": "~11.1.1",
   "expo-status-bar": "~1.4.4",
    "native-base": "^3.4.28",
     ** "react": "18.2.0", **
    "react-native": "0.71.8",
     ** "react-native-android-widget": "^0.7.0", ** 
    "react-native-checkbox-reanimated": "^0.1.1",
    "react-native-reanimated": "~2.14.4",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
    "react-native-svg": "13.4.0",
    "react-native-swipe-list-view": "^3.2.9",
    "react-redux": "^8.1.1",
    "styled-components": "^6.0.3"
  },

the code in widget component is same as the tutorial Widget Design and Widget Preview

Hi, I'm using the widget on a Pixel 6 device.
I'm noticing that when i touch an element that accepts a click, the touch area highlighted is off the actual element.
this behavior doesn't happen on the emulator
I noticed that it's slightly better if i wrap a text or an icon inside a flex and the flex accepts the touch instead of icon or text.
here is my code

      <FlexWidget key={task.id + taskCompleted} style={styles.taskRowContainer}>
        <FlexWidget style={{borderLeftWidth: 2, borderLeftColor: taskColor, paddingLeft: 10}}>
          <TextWidget text={task.name} style={{fontSize: 16}} />
          <TextWidget text={task.type} style={{fontSize: 13, color: taskColor}} />
        </FlexWidget>
        <FlexWidget
          clickAction={ACTIONS.TOGGLE_TASK}
          clickActionData={{
            shouldMarkComplete: !taskCompleted,
            taskId: task.id,
            date: date.toString(),
            userId,
          }}>
          <IconWidget
            font='MaterialIcons-Regular'
            icon={taskCompleted ? 'check_circle' : 'radio_button_unchecked'}
            size={36}
            style={{color: taskCompleted ? colors.primaryTriadic2 : colors.inactiveElement}}
          />
        </FlexWidget>
      </FlexWidget>

If you wanna test it out, the app was just released the store for our testing
https://play.google.com/store/apps/details?id=com.metanify

or you can check this screen recorder (watch where i click and where the click gets registered and highlighted)
https://github.com/sAleksovski/react-native-android-widget/assets/11547193/9ac14244-66cd-4aea-b363-6d6728bec59c

Hi! First of all, super nice lib! I have tried to implement widgets in RN before and it was a real struggle. This lib in combination with the docs makes it super easy.

One thing that is missing, which is often needed when adding widgets, is a configuration screen in which you can choose what the widget should display. See https://developer.android.com/develop/ui/views/appwidgets/configuration. Do you think there is a way to include this in the library? Or is this too tightly linked to the project to be extracted to a library? 🤔

The package is very useful for creating android widgets.

I'm facing one issue and afk for help. I am saving the state in async storage and redux and display it in the widget, but when the state changes both in redux and async storage, do not update the widget because I am not sending any action in the widget ('WIDGET_ADDED' | 'WIDGET_RESIZED' | 'WIDGET_CLICK'). How can I get over this problem?

Thanks!

I want to use 10px of text, but if I adjust the size of Android's system font, the widget also changes, causing inconvenience.

Hi @sAleksovski! I am trying to use the library for my project and it seems that there is a linking problem. I also have tried rebuilt the app but it doesn't seems to be working. Can you please tell me How can I link it manually if automatic doesn't work?

"react-native": "0.62.2", is being used

I like this package very much. My widget is counting down days. It needs to be updated after the app ends. What should I do?

May I ask? The following two are generated by me, and I want them to be the same as the above two, with the width occupied side by side and the height equal to the width. A normal phone should have two in one row, but if it is a tablet, there may be more than two in one row.

hello

When I add add or resize a widget, it shows a gray overlay with text "Click to update widget"

only after i click that widgetTaskHandler gets called.

thanks a lot for the widget, it's been working great.
I tried upgrading to use ListView but it has a problem:

here is my code

    <FlexWidget style={styles.container}>
      {renderDate()}
      {/* There is bug in using array.map so just render as many as we can. */}

      <ListWidget>
        {renderTask(0)}
        {/*     {renderTask(1)}
        {renderTask(2)}
        {renderTask(3)}
        {renderTask(4)}
        {renderTask(5)}
        {renderTask(6)} */}
      </ListWidget>
    </FlexWidget>

with this code, im getting an infinite spinner when i'm previewing it in my app

and the widget on the home screen isn't loading

thanks!

I was wondering about how I can make an API request to update the widget and was confused about where to make the request.

Do I have to make the API request inside the case of WIDGET_UPDATE action like this:

switch (props.widgetAction) {
    case "WIDGET_UPDATE":
      const response = await axios.get('https://example.com/api');
      const data = response.data;

      props.renderWidget(<Widget data={data} />);
      break;

    default:
      break;
  }
};

Or can I make it inside the widget-task-handler and outside the switch cases like this:

const widgetTaskHandler = async (props: WidgetTaskHandlerProps) => {
  const widgetInfo = props.widgetInfo;
  const Widget =
    nameToWidget[widgetInfo.widgetName as keyof typeof nameToWidget];

  const response = await axios.get('https://example.com/api');
  const data = response.data;

  switch (props.widgetAction) {
    case "WIDGET_UPDATE":
      props.renderWidget(<Widget data={data} />);
      break;

    default:
      break;
  }
};

It seems the second method works as well and would be much more suitable for situations where the data fetching also happens upon the WIDGET_ADDED action.

  const response = await axios.get('https://example.com/api');
  const data = response.data;

  switch (props.widgetAction) {
    case "WIDGET_ADDED":
    case "WIDGET_UPDATE":
      props.renderWidget(<Widget data={data} />);
      break;

    default:
      break;
  }

Upon initially pulling and running yarn install, I ran into an issue where @tsconfig/react-native/tsconfig.json was not found. I was able to fix it by running yarn add @tsconfig/react-native.

Let me know if this is something specific to me so I can see what I might have done wrong.

Thanks!

So I tried it on a physical device and things aren't great.
without the listwidget, things are in good order as shown in the following screenshot

however, you can see that the widget is always not reaching the edge of the widget border.
Here is my xml

<?xml version="1.0" encoding="utf-8"?>
<!-- https://saleksovski.github.io/react-native-android-widget/docs/tutorial/register-widget#add-a-widget-provider-xml-file -->
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:targetCellWidth="3"
    android:targetCellHeight="2"

    android:updatePeriodMillis="1860000"

    android:initialLayout="@layout/rn_widget"

    android:previewImage="@drawable/widget_screenshot"
    android:description="@string/widget_description"

    android:resizeMode="horizontal|vertical"

    android:widgetCategory="home_screen">
</appwidget-provider>

here is my container

  return (
    <FlexWidget style={styles.container}>
      {renderDate()}
      {!!tasksForDate.length && renderTasks()}
      {!tasksForDate.length && renderNoTasks()}
    </FlexWidget>
  );
};

const styles = {
  container: {
    backgroundColor: '#ffffff',
    borderRadius: 16,
    flex: 1,
    height: '130',
    overflow: 'auto',
    paddingVertical: 5,
    width: 'match_parent',
  },

currently, this is my renderTasks

  const renderTasks = () => tasksForDate.map(task => renderTask(task));

however, once i wrap in List widget like

  const renderTasks = () => (
    <ListWidget style={{height: 'match_parent', width: 'match_parent'}}>
      {tasksForDate.map(task => renderTask(task))}
    </ListWidget>
  );

it starts acting weird and it looks like

scrolling is great though.

Originally posted by @mark-yacoub in #17 (comment)

I have text followed by an image with space-between. on RN, im able to set the limit using flex:1 but this doesnt seem the same effect on the widget.
Here is a screenshot showing the widget on top and RN at the bottom

here is part of my code for doing this

      <FlexWidget
        key={task.id + taskCompleted}
        style={styles.taskRowContainer}
        clickAction={ACTIONS.TOGGLE_TASK}
        clickActionData={{
          shouldMarkComplete: !taskCompleted,
          taskId: task.id,
          date: date.toString(),
          userId,
        }}>
        <FlexWidget
          style={{borderLeftWidth: 2, borderLeftColor: taskColor, paddingLeft: 10, flex: 1}}>
          <TextWidget text={task.name} style={{fontSize: 16}} />
          <TextWidget text={task.type} style={{fontSize: 13, color: taskColor}} />
        </FlexWidget>
        <IconWidget
          font='MaterialIcons-Regular'
          icon={taskCompleted ? 'check_circle' : 'radio_button_unchecked'}
          size={36}
          style={{color: taskCompleted ? colors.primaryTriadic2 : colors.inactiveElement}}
        />
      </FlexWidget>

what is the best way to approach this.

I need to implement a countdown in the widget, but setInterval and setTimeout don't work. Any idea how to do this? Is there any way to find a TextWidget from native and update its string with time? Or it is possible to implement with JS?
I would appreciate any tips. Thanks!)

When I rezise my widget, the widget doesn't not update so doesn't fill the new size... How to fix this?

expo version: 49.0.10
react-native version: 0.72.4
react-native-android-widget version: 0.8.0
Device: Emulated Pixel 7 with google services

Description
Widget cannot be resized, is there something I need to set for it to be resizable? I am using minWidth: "128dp" and minHeight: "64dp".

Hi, I'm using the library well
However, when you add an app from a certain point in time, the widget will not be drawn on the screen
In the emulator, the widget appears well on the home screen, but the home screen UI does not appear on the actual device because it is built and deployed

Can I see the logs when I add widgets from this library?

I updated the library to the latest version
"react-native": "0.71.6", is being used

I followed each step provided in the Tutorial page and the widget is reflecting in widget section but when i add that widget in homescreen, it just show transparent view without any text or anything.

React Native: 0.72.3
react-native-android-widget: 0.8.2

Hi, unfortunately i can not build the expo app with gradle >= 8.0

This is the Error:

[RUN_GRADLEW] 1: Task failed with an exception.
[RUN_GRADLEW] -----------
[RUN_GRADLEW] * What went wrong:
[RUN_GRADLEW] Execution failed for task ':react-native-android-widget:compileDebugJavaWithJavac'.
[RUN_GRADLEW] > Compilation failed; see the compiler error output for details.
[RUN_GRADLEW] * Try:
[RUN_GRADLEW] > Run with --stacktrace option to get the stack trace.
[RUN_GRADLEW] > Run with --info or --debug option to get more log output.
[RUN_GRADLEW] > Run with --scan to get full insights.
[RUN_GRADLEW] ==============================================================================
[RUN_GRADLEW] 2: Task failed with an exception.
[RUN_GRADLEW] -----------
[RUN_GRADLEW] * What went wrong:
[RUN_GRADLEW] java.lang.StackOverflowError (no error message)
[RUN_GRADLEW] * Try:
[RUN_GRADLEW] > Run with --stacktrace option to get the stack trace.
[RUN_GRADLEW] > Run with --info or --debug option to get more log output.
[RUN_GRADLEW] > Run with --scan to get full insights.
[RUN_GRADLEW] ==============================================================================
[RUN_GRADLEW] * Get more help at https://help.gradle.org/
[RUN_GRADLEW] BUILD FAILED in 6m 13s
[RUN_GRADLEW] Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.
[RUN_GRADLEW] You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.
[RUN_GRADLEW] See https://docs.gradle.org/7.5.1/userguide/command_line_interface.html#sec:command_line_warnings
[RUN_GRADLEW] Execution optimizations have been disabled for 1 invalid unit(s) of work during this build to ensure correctness.
[RUN_GRADLEW] Please consult deprecation warnings for more details.
[RUN_GRADLEW] 451 actionable tasks: 451 executed
[RUN_GRADLEW] Error: Gradle build failed with unknown error. See logs for the "Run gradlew" phase for more information.
Build failed

Can anyone help me out here ? :)

First of all - big thanks for this useful library!

There is a problem on Android 10: after adding a widget, "WIDGET_UPDATE" action is fired. Sadly the widget on home screen shows "Problem loading widget" text though.

On Android 12 it's fine - the widget is shown properly.

Logcat says:

2023-07-04 16:17:37.826 2901-2901 AppWidgetHostView com.android.launcher3 W Error inflating RemoteViews : android.widget.RemoteViews$ActionException: android.widget.RemoteViews$ActionException: android.widget.RemoteViews$ActionException: view: android.widget.FrameLayout can't use method with RemoteViews: setMinimumWidth(int)

It seems to be a layout related problem. I was playing with elements removal and it appeared that the following code works:

   <FlexWidget
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <TextWidget style={{ fontSize: 12 }} text="Open App" />
    </FlexWidget>

But after adding another container the problem is back:

    <FlexWidget
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <FlexWidget
        style={{
          height: 'wrap_content',
          width: 'wrap_content',
          alignItems: 'center',
          justifyContent: 'center',
          padding: 16,
        }}
        clickAction="OPEN_APP"
      >
        <TextWidget style={{ fontSize: 12 }} text="Open App" />
      </FlexWidget>
    </FlexWidget>

Hey! How are you?
I'm testing the Debug Events widget and I realized that the List component "renders" again every time I send the app to background. In this case, the list scrolls up and shows the first item again
Is it possible to keep the position of the list even if I open or close the app?

Other widgets that use the List component have the same problem. Also, there is a "little jump" on some texts after closing or sending the app to background

We are using react native 0.69, and after installed this package, the app cannot run.

The error is "Unable to determine the current character, it is not a string, number, array, or object", which is a issue in react-native-community.I donnot konw which package caused this error, but it can work after I uninstalled your package.

So I think may this package donot support react native 0.69, any suggestions?

hello. I use an Android widget, and it may be that I set it up wrong, but the widget came out fine before applying Code Push, but when I install the Android widget after Code Push is applied, a blank screen appears. Could it have something to do with applying code push?

Hey, I was dreading creating a widget for android but i came across this (first result on google!).
So far things are so great! I have a question though:

Is there a way to make the view scrollable? I tried adding overflow: 'auto', to FlexWidget style but that didn't work

Which commands order should it need to be run in order to run the expo-example?

I'm getting this error when I try to run npm run build:dev-client:

npm run build:dev-client

[email protected] prebuild:dev-client
yarn build:lib

yarn run v1.22.19
$ rm -f ./react-native-android-widget* && yarn remove react-native-android-widget && rm -rf node_modules/react-native-android-widget && cd .. && yarn prepare && npm pack && pwd && mv react-native-android-widget-* ./example-expo/react-native-android-widget-$(shuf -i 10000-100000 -n1).tgz && cd example-expo && yarn add ./react-native-android-widget*
[1/2] 🗑 Removing module react-native-android-widget...
error This module isn't specified in a package.json file.
info Visit https://yarnpkg.com/en/docs/cli/remove for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Hello, this library is great thank you for doing this!

I'm curious what you think about adding something that would allow the app to determine if any widgets have been installed? Perhaps a count, or even an array of widget names?

It would be nice to show in the app some kind of status indicator of which widgets have been installed.

Hey! I'm testing this amazing library, is really useful!! Congrats 🎉 🎉

I'm trying to update my widget every 30 min, but the UPDATE event that should be emitted after 30 min (using updatePeriodMillis config) never happens. I used the DebugEventsWidgets from the example project but I had the same problem, this event never be logged

I use an Android simulator to test it, Could it be the problem?
Should I test on a real device?

Thanks!

hello， please look at this picture. phone is Meizu，but other phone is OK。 can't click and seem as width is error。

When I called a function called renderTasks() inside the FlexWidget, and renderTasks does return myarray.map( /* return a FlexWidget */) i get this error

 WARN  Possible Unhandled Promise Rejection (id: 0):
TypeError: Cannot read property '__name__' of undefined
TypeError: Cannot read property '__name__' of undefined
    at buildWidgetTree (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:130663:25)
    at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:130677:31)
    at map (native)
    at buildWidgetTree (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:130676:13)
    at ?anon_0_ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:130745:181)
    at next (native)
    at asyncGeneratorStep (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:20674:26)
    at _next (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:20693:29)
    at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:20698:14)
    at tryCallTwo (/root/react-native/ReactAndroid/hermes-engine/.cxx/Release/43l2p1y5/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:61:9)
    at doResolve (/root/react-native/ReactAndroid/hermes-engine/.cxx/Release/43l2p1y5/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:216:25)
    at Promise (/root/react-native/ReactAndroid/hermes-engine/.cxx/Release/43l2p1y5/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:82:14)
    at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:20690:25)
    at apply (native)
    at _init (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:130751:27)
    at apply (native)
    at init (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:130741:27)
    at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:130753:11)
    at commitHookEffectListMount (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:71801:38)
    at commitPassiveMountOnFiber (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:72827:44)
    at commitPassiveMountEffects_complete (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:72799:40)
    at commitPassiveMountEffects_begin (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:72789:47)
    at commitPassiveMountEffects (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:72779:40)
    at flushPassiveEffectsImpl (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:73973:34)
    at flushPassiveEffects (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:73933:43)
    at performSyncWorkOnRoot (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:73422:28)
    at flushSyncCallbacks (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:64803:36)
    at flushSyncCallbacksOnlyInLegacyMode (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:64788:29)
    at scheduleUpdateOnFiber (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:73136:47)
    at updateContainer (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:75195:32)
    at render (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:75706:24)
    at renderElement (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:3068:77)
    at renderApplication (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:45764:27)
    at run (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:45407:42)
    at runApplication (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:45458:28)
    at apply (native)
    at __callFunction (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:2444:36)
    at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:2205:31)
    at __guard (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:2395:15)
    at callFunctionReturnFlushedQueue (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.metanify&modulesOnly=false&runModule=true:2204:21)

I made a widget on mock data.

1. How do I rerender the widget after loading the data?
2. Where to store the data? In Local Storage?

Maybe you have an example of a widget with a real request

Hi,

I hope this message finds you well. Firstly, I want to express my gratitude for providing such a comprehensive solution for Android widgets. It has been incredibly helpful. I'm eagerly looking forward to the release of the iOS widget functionality as well.

I have encountered a small issue while implementing the Android widget in my project and was hoping you could assist me. I added the following line to the widgetprovider_widgetname.xml file: android:updatePeriodMillis="1800000". This line is meant to set the refresh interval for the widget to 30 minutes.

In addition, I added a console log statement in my widgetTaskHandler.tsx file to track the widget updates:

case "WIDGET_UPDATE":
  console.log("Widget updated");
  break;

However, despite these additions, the widget update is not being triggered every 30 minutes as expected.

I have reviewed my implementation and checked for any potential mistakes, but I have been unable to identify the issue. Could you please lend me a hand and provide some guidance on what I might be missing or what steps I should take to troubleshoot this problem?

Thank you in advance for your assistance. I truly appreciate your support.

Best regards,

When the app is in kill state and I am clicking on a view with clickaction, it does nothing.
To make it work I have to open the app and click on that view again.

Any solution for this?

When running the app on iOS (expo bare workflow) with this package installed, this error occurs:

 ERROR  Error: The package 'react-native-android-widget' doesn't seem to be linked. Make sure: 

- You rebuilt the app after installing the package
- You are not using Expo Go
, js engine: hermes
 ERROR  Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes

I understand the library is for adding widgets on android, so therefore iOS support is not necessarily implied, but for cross platform support it would be nice for the package to simply do nothing on iOS and for the rest of the app to still work.

Just wanted to share that this is super cool. I've been using Expo and wanting to do an Android (and iOS but Ill try later) widget for a long time, but it was always to hairy and busy to figure out a clean way. Will definitely be using this soon thanks!

Just a side question: Do you know of any lib out there for iOS by chance?

I would love to donate to this package, do you have plans to open sponsorship? Just wanted to say thanks!

Thank you for making it possible to develop widgets in React Native.
Is there a way to apply radius in the image widget if the image is square?

We are using:
react-native: 0.71.8 (not expo)
gradle: 7.5.1

I am able to build successfully running npx react-native run-android on 0.6.1 and even 0.7.0 but when trying to build 0.8.0 I get the following errors:

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
(appdir)/node_modules/react-native-android-widget/android/src/main/java/com/reactnativeandroidwidget/RNWidgetConfigurationActivity.java:53: error: method does not override or implement a method from a supertype
            @Override
            ^
Note: (appdir)/node_modules/react-native-android-widget/android/src/main/java/com/reactnativeandroidwidget/RNWidgetCollectionService.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
1 error

FAILURE: Build completed with 2 failures.

1: Task failed with an exception.
-----------
* What went wrong:
Execution failed for task ':react-native-android-widget:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
==============================================================================

2: Task failed with an exception.
-----------
* What went wrong:
java.lang.StackOverflowError (no error message)

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
==============================================================================

Hello!

Is there a way to update (re-render) a widget on the dark/light mode change?

Configure project :app
ℹ️ Applying gradle plugin 'expo-dev-launcher-gradle-plugin' ([email protected])
[stderr]
FAILURE: Build completed with 2 failures.
[stderr]
1: Task failed with an exception.
[stderr]

• Where:
  [stderr]
  Build file '/home/expo/workingdir/build/android/app/build.gradle' line: 21
  [stderr]
• What went wrong:
  [stderr]
  A problem occurred evaluating project ':app'.
  [stderr]

path may not be null or empty string. path=''
[stderr]

• Try:
  [stderr]

Run with --stacktrace option to get the stack trace.
[stderr]
Run with --info or --debug option to get more log output.
[stderr]
Run with --scan to get full insights.
[stderr]
2: Task failed with an exception.
[stderr]

[stderr]

• What went wrong:
  [stderr]
  A problem occurred configuring project ':app'.
  [stderr]

compileSdkVersion is not specified. Please add it to build.gradle
[stderr]

• Try:
  [stderr]

Run with --stacktrace option to get the stack trace.
[stderr]
Run with --info or --debug option to get more log output.
[stderr]
Run with --scan to get full insights.
[stderr]
[stderr]

• Get more help at https://help.gradle.org
  [stderr]
  BUILD FAILED in 1m 56s
  10 actionable tasks: 10 executed
  Error: Gradle build failed with unknown error. See logs for the "Run gradlew" phase for more information.

Error desc:
I start the dev build in the expo but in the expo server return me this error

and i have error in the widget-task-handler

i would prefer the example to be a completely independent repo.

error: Error: Unable to resolve module @babel/runtime/helpers/interopRequireDefault from /Users/rrocsal/dev/code/research/react-native-android-widget/src/api/register-widget-task-handler.tsx: @babel/runtime/helpers/interopRequireDefault could not be found within the project or in these directories:
  ../../../../../node_modules

I noticed that widget is "slow" after application launched on physical device was killed. I mean e.g. renderWidget() on clickAction is laggy. It seems that it takes 1-3 seconds to instantiate headless task by registerWidgetTaskHandler().

Have you experienced such a behavior? Is there something in app that may impact on this negatively?

Or maybe is it Android memory management related problem?

We cannot render React Native views directly to the widget.
What this library does is render the React Native views to an image, and then show that image in the widget.
For it to look good, we need to know the exact size of the widget, so we can create an image that will fit the widget correctly.

On some Android launchers, the reported and actual size of the widget are not always the same.

Actual size (365dp x 318dp)

Reported size (365dp x 354dp)

I haven't found a reliable way to get the exact size, the current behavior is to crop the widget if the reported size is smaller.

Hello, thanks for your work on this library 🙌🏼

I'm aware that only the first-level children of ListWidget can be clicked as per:

Only the first-level children of the ListWidget can be "clicked". We can still set clickAction on the sub-widgets, but they will not respond to clicks.

However, I thought I'd still ask in case you have any suggestions for implementing my use-case:

I have a list of tasks in a widget, and each task has a checkbox before it. When a user taps on the checkbox, the task should be completed. If they tap on the title of the task, the task should be opened in the app.

Is this pattern possible using this library? I saw the ListWidget example which appears to have an archive button next to each item, but it doesn't do anything.

Hey - first of all thank you for doing this it's so nice!

I have a question about fetching data. I see in the demos that the data you're displaying are static inside the view, but what if i wanna grab data from the server or even from localstorage. if i can't use hooks then i can't use await functions. Am i missing something? to fetch items from local storage.

Thanks!

I have managed to use the ListDemoWidget in my project. When previewing the screen, the scroll works fine. However, when using the actual widget on device, swiping the list with a single finger does not make the list scroll. To manage to scroll, I need to use two separate fingers when swiping on the widget.

ADB Log on swipe:
11-18 15:54:00.611 4386 4386 W View : requestLayout() improperly called by android.widget.LinearLayout{b492d34 VFE...C.. ......ID 0,3-936,105 #7f0a00a2 app:id/animated_hint_layout viewInfo = } during layout: running second layout pass

OS: Android 13
Device: One Plus
Expo App