When using skeleton as loader, screen stucks and flickers

[Nadimkhan120]

Is there an existing issue for this?

• [X] I have searched the existing issues

Do you want this issue prioritized?

• [ ] Yes, I have sponsored
• [ ] Not urgent

Current Behavior

1. add a skeleton in one screen as loader
2. navigate from another screen to the screen having loader
3. screen stucks and there is a flicker

Expected Behavior

when using skeleton as loader screen should not stuck, it should work fine

Steps To Reproduce

1. add a skeleton in one screen as loader
2. navigate from another screen to the screen having loader
3. screen stucks and there is a flicker
4. if i remove skeleton, it will work fine

Versions

- Moti:0.28.1
- Reanimated:3.11.0
- React Native:0.74.1

Screenshots

https://github.com/nandorojo/moti/assets/93160686/db6323fe-b79c-497d-b8b7-48ec4a43d5fe

https://github.com/nandorojo/moti/assets/93160686/1769361e-6ad7-4a2e-b447-c242c5c60d3c

Reproduction

https://github.com/enzomanuelmangano/animate-with-reanimated/tree/main/18-skeleton-animation

[adamhari]

I'm experiencing something similar after upgrading from Expo 50 --> 51 where, after navigating to a screen that initially has a Skeleton with show={true} that later becomes show={false}, the Skeleton component continues to overlay it's children even after the show property is false.

This seems to be an Android issue, or at least I haven't been able to reproduce it on iOS or web, but that might have more to do with the performance characteristics of my Android device than it does the platform.

[Nadimkhan120]

@adamhari yes its on android.