Surface + ImageFilters not working properly on Android

[Didiwloski]

I use Surface (from gl-react-expo) and ImageFilters (from "react-native-gl-image-filters) for my project and on iOs it is working.

However, on Android photos with filters are shown properly when visible on the screen for the first time, but then when I scrolldown so given photo is out of screen and come back to it, it doesn't display and only white area is shown.

Why is that? What is the possible fix for that?

Code extract below:

`import { Surface } from "gl-react-expo"; import ImageFilters from "react-native-gl-image-filters";

...

        <Surface
          style={{
            width: photoWidth,
            height: photoHeight,
            borderRadius: 5,
          }}
        >
          <ImageFilters
            {...FILTERS.find((f) => f.id === tempFilter).filter}
            width={filterWidth}
            height={filterHeight}
          >
            {{
              uri: props.image_cropped,
            }}
          </ImageFilters>
        </Surface>

`

[GregoryNative]

Hi @Didiwloski. I believe this is a duplicate of this one https://github.com/GregoryNative/react-native-gl-image-filters/issues/27. Please have a look.

[Didiwloski]

Hi Gregory,

Suddenly the solution from #27 does not work for me since I am already using FlatList component, and the photos with filters applied are scrolled within FlatList (from react-native).

Do You have any other suggestions? Would be grateful. Best!

[GregoryNative]

Hello @Didiwloski. Sorry I haven't dig it further. You can try to reproduce it without react-native-gl-image-filters at all. If the issue occurs then I suggest opening the issue directly in gl-react-expo.

[Didiwloski]

Gregory,

The issue is mentioned here https://github.com/gre/gl-react/issues/230

There is one hypothesis:

"To me that means the GLSL code that is implemented by react-native-gl-image-filters is not portable to work everywhere. I don't know this library but we probably need a code sample to reproduce."

Would you be so kind to share your opinion on this? Thanks, Adrian

pt., 9 kwi 2021 o 09:13 Gregory Galushka @.***> napisał(a):

Hello @Didiwloski https://github.com/Didiwloski. Sorry I haven't dig it further. You can try to reproduce it without react-native-gl-image-filters at all. If the issue occurs then I suggest opening the issue directly in gl-react-expo.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/GregoryNative/react-native-gl-image-filters/issues/39#issuecomment-816467491, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOPG5O237H6IA5Z2TWTWKB3TH2SINANCNFSM42RPPGFA .

[GregoryNative]

@Didiwloski Hmm. Could you create an expo snack with your code? Especially interested in the filters and values that you have used.

[Didiwloski]

@GregoryNative

I uploaded extract of my app which contains the code that is involved in displaying the list of filtered photo.

1. The FlatList of photos that are presented in a form of a PhotoItem (FlatList is in AlbumDetailScreeen line 529)
2. PhotoItem definition is in PhotoItem file. (Surface and filters are implemented in line 117)
3. Filters palette is defined in file filters.js

https://snack.expo.io/tJjU-1yQP

Will be extremely grateful for your help on that ;) Best, Adrian

[Didiwloski]

@GregoryNative

I couldn't stopped digging for possible reasons.

This thread seem to be one possibility: https://github.com/gre/gl-react/issues/163 If I scroll really fast through my FlatList, I get similar error on Android (not exactly the same though).

Bests, Adrian

[GregoryNative]

Hi. I don't think that it's related. In your code example you don't use gl-react-image library as mention in thread which you shared.