[Android] Images in ScrollView gets black flickers

[Vignes Aruljothi]

bug report

library version

├── gl-react@3.14.0
└── gl-react-native@3.14.0

Expected behavior

IOS Screenshot:

Actual behavior

Android screenshot:

Steps to reproduce the behavior

1. Create a component like this on react native: https://gl-react-cookbook.surge.sh/helloblue
2. With in react-native's horizontal ScrollView, add few instance of the component created in step 1
3. Swipe the images

[Vignes Aruljothi]

Workaround solution for this issue is,

1. Render the image within gl-react-native's Surface.
2. Use Surface's captureFrame method to capture the frame as base64. https://github.com/gre/gl-react-v2/blob/master/docs/api/Surface.md#captureframeconfig.
3. Use reactnative's Image component to render the base64 image string. Now scroll doesn't produce flickering effect.

[Songlcy]

@vignesarul How to solve it? I have now loaded 8 filters in the scrollView, but there will always be a black one.

[Vignes Aruljothi]

@songxiaoliang I don't know why you are getting a separate black image.
Rendering surface/canvas from gl-react within react-native's scrollView creates black flickers while swiping. I used surface's captureFrame method to get base64 of filter applied image & render it as a normal image in scrollView.

[Songlcy]

@vignesarul What's more serious is that it will cause the App to be stuck, page switching will not be smooth, and even a crash will occur. Do you have any good solutions?

[@greweb]

Please check on latest implementation (v4), this should be fixed. if not we can reopen and i would need a minimal reproductible example.

thanks