Weird translucent animation on reposition / reconfigure

[Ariel Falduto]

Hi there,
I'm building a 2x2 widget (110dp x 110dp) where the background is transparent, and I have a square centered in the middle with a dark background, as seen in the image below (I made a screenshot of the animated frame) it makes a weird animation every time I try to reposition / reconfigure the widget showing the total size (2x2) and not only taking the size of the central square (as I understand it should be).

I don't know if this is because of the image generation that the plugin does internally.

Here I leave the configuration of my widget along with its code, I hope it is useful:

plugin config:

[
  'react-native-android-widget',
  {
    fonts: ['./assets/fonts/FiraGO-Regular-Minimal.otf'],
    widgets: [
      {
        name: 'Rate',
        // https://developer.android.com/guide/practices/ui_guidelines/widget_design?hl=es-419
        // 70 * n − 30 (2x2)
        minWidth: '110dp',
        minHeight: '110dp',
        label: 'Cotizaciones',
        description:
          'Mantenete al tanto de las cotizaciones durante el transcurso del día.',
        previewImage: './assets/widgets/android-2x2.png',
        resizeMode: 'none',
        widgetFeatures: 'reconfigurable|configuration_optional',
        updatePeriodMillis: 300000, // 5 mins
      },
    ],
  },
]

widget:

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

export default function RateWidget(props) {
  const size = props.size ?? 130;
  const borderRadius = (10 / 57) * size;
  return (
    <FlexWidget
      style={{
        height: 'match_parent',
        width: 'match_parent',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <FlexWidget
        style={{
          height: size,
          width: size,
          padding: 12,
          backgroundColor: '#000',
          borderRadius,
        }}
      >
        <TextWidget
          text="Blue"
          style={{
            fontSize: 18,
            fontFamily: 'FiraGO-Regular-Minimal',
            color: '#FFF',
          }}
          maxLines={1}
        />
        <FlexWidget style={{ flex: 1, justifyContent: 'flex-end' }}>
          <TextWidget
            text="0.00% ="
            style={{
              fontSize: 12,
              fontFamily: 'FiraGO-Regular-Minimal',
              color: 'rgba(10,132,255,1)',
            }}
            maxLines={1}
          />
          <TextWidget
            text="1,025.00"
            style={{
              fontSize: 24,
              fontFamily: 'FiraGO-Regular-Minimal',
              color: '#FFF',
            }}
            maxLines={1}
          />
          <TextWidget
            text="25/04 15:45"
            style={{
              fontSize: 10,
              fontFamily: 'FiraGO-Regular-Minimal',
              color: 'rgba(142,142,147,1)',
              marginTop: 6,
            }}
            maxLines={1}
          />
        </FlexWidget>
      </FlexWidget>
    </FlexWidget>
  );
}

[Stefan Aleksovski]

I guess 2x2 in the launcher you are using is not an exact square. You can see the exact height/width of the widget in the WidgetInfo object.

The translucent rectangle is from the launcher, and it is the whole widget, not just he central square.
In your widget, you show a FlexWidget with height and width of match_parent, which fills the whole widget.
You cannot have the translucent part be equal to the black square, because the widget is bigger than it.

Try moving the Dino widget, and you should get a similar transparent rectangle in the background.

[Ariel Falduto]

Yes it is correct what you say, but I think there is a misunderstanding, or I did not express myself correctly.
I understand that the widget is not a perfect square, so I simulate it (as you can see on the code) making the content of my parent FlexWidget to be 130x130 and centered (like the Dino widget).

Note that when I speak of weird effect is not the white rectangle that indicates the size of the widget (2x2) but the animation that makes when it shrinks, as you can see in the animated GIF, you can see a translucent rectangle and another white rectangle that does not correspond to the definition of the widget (but could be the internal image generated by this plugin).

I leave here a side by side slow motion comparison of how the Dino widget animation looks like when it shrinks so you can see the visual difference I'm talking about.

(I clarify that this is simply aesthetic subtlety, the widget looks and is built as expected).

[Stefan Aleksovski]

If I understand correctly, this is the issue:

I'm not exactly sure what is causing it, but I will take a look when I have more free time.

[Ariel Falduto]

Exactly, but it is not only that white box, there is another translucent area that by the compression of the image is not noticed that would seem to belong to the FlexWidget container but smaller.

[Ariel Falduto]

Another thing that also generates a strange effect is when from a widget I open the application and then go back, that minimized animation for some reason has a white background even though I am forcing the background color of the root view to black using the SystemUI.setBackgroundColorAsync from Expo and the system has a dark theme.

[Stefan Aleksovski]

Look like the launcher adds a shadow when moving the widget, and it is usually hidden when the widget covers the entire area.
Due to the nature of how this library works, the ImageView must cover the entire area, so the launcher will always add that shadow. This is not something I can fix.

As for the white on the border of the view, that should not be due to this library since it looks like it is in the app view, not the widget.

[Ariel Falduto]

Look like the launcher adds a shadow when moving the widget, and it is usually hidden when the widget covers the entire area. Due to the nature of how this library works, the ImageView must cover the entire area, so the launcher will always add that shadow. This is not something I can fix.

As for the white on the border of the view, that should not be due to this library since it looks like it is in the app view, not the widget.

Thanks for the detail, I imagined that this was assuming the internal design and operation of the plugin.

Regarding the white background of the view is something that I can not understand even since the background of the parent view is being forced to black, can it be that the widget is assuming or forcing some background color?

Anyway, I will continue to do different tests on physical devices.