Image disappears on navigation start

[RGBvision]

Which platform(s) does your issue occur on?

• Android
• 12
• Device. ASUS ROG Phone 5

Please, provide the following version numbers that your issue occurs with:

• CLI: 8.3.3
• Cross-platform modules: 8.3.6
• Runtime(s): @nativescript/android 8.3.1
• Plugin(s):

  "dependencies": {
  "@nativescript-community/https": "^4.0.10",
  "@nativescript-community/ui-barcodeview": "^3.5.5",
  "@nativescript-community/ui-image": "^4.3.5",
  "@nativescript/core": "~8.3.6",
  "@nativescript/localize": "^5.0.4",
  "@nativescript/theme": "~3.0.2",
  "@nuintun/qrcode": "^3.3.0",
  "moment": "^2.29.4",
  "moment-timezone": "^0.5.39",
  "nativescript-dna-deviceinfo": "^3.7.3",
  "nativescript-effects": "^3.0.0",
  "nativescript-ripple": "^4.0.1",
  "nativescript-ui-listview": "~14.2.4",
  "nativescript-vibrate": "^4.0.1"
  },
  "devDependencies": {
  "@nativescript/android": "~8.3.1",
  "@nativescript/ios": "~8.3.3",
  "@nativescript/types": "~8.3.1",
  "@nativescript/webpack": "~5.0.10",
  "typescript": "~4.9.3"
  }

Code on page:

<uiImage:Img
  src="https://gravitydance.ru/uploads/images/persons/thumbnail/andrey-f720x720.png"
  placeholderImageUri="~/images/instructor.png"
  failureImageUri="~/images/instructor.png"
  width="100" height="100"
  decodeWidth="200" decodeHeight="200"
  roundAsCircle="true" padding="0" margin="0" verticalAlignment="center" horizontalAlignment="center"/>

When navigating off the page, the image disappears just before the animation starts. This especially noticeable with a fade transition between pages.

Frame.topmost().navigate({
        animated: true,
        transition: {
          name: "fade"
        },
        moduleName: '~/screens/home/home-page',
        clearHistory: true
      });

[farfromrefug]

@RGBvision and it is not happening with N image component?

[RGBvision]

@farfromrefug No. Only with ui-image. BTW on iOS works fine.

[vallemar]

I have the same behavior in 2 different applications. It only happens on Android.

[farfromrefug]

@vallemar ok might be a lifecycle issue. one question does it happen also with my framework? If you have a simple reproducible example i can look at it

[vallemar]

@farfromrefug sure: https://github.com/vallemar/ns-community-image Yes, it also happens to me with your fork.

[farfromrefug]

@vallemar i have tested the navigation within the plugin demo app and it works fine. I can confirm it does not work with your test app. Could it be a vue3 issue?

[RGBvision]

@farfromrefug this happens in {N} Core application too

[farfromrefug]

@RGBvision @vallemar ok i have reproduced it. Can you confirm it only happens with SharedTransition ? Actually might be happening when the imageview is in a collectionview (maybe also listview)

[vallemar]

@farfromrefug ummm, can't you see it here? https://github.com/vallemar/ns-community-image/tree/main all the apps I've seen it in are vue3. but this one that I give as an example does not have lists. On the other hand no, I don't use SharedTransition to see this behavior   😅

[RGBvision]

@farfromrefug this happens without SharedTransition

[farfromrefug]

I am not seeing it when the imageview is NOT in a collection view (there is an example in the vue démo app). Though I started seeing it in an app of mine. At first i thought the key was the share transition but I am now thinking it could be the collection view. Will have to dig deeper

[farfromrefug]

@vallemar @RGBvision should be fixed in latest version

[RGBvision]

@farfromrefug I confirm that the bug is fixed

[vallemar]

I confirm it on my side too, thank you!