Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not rendering images in Android RN 0.70 #974

Open
aubri61 opened this issue Feb 22, 2023 · 8 comments
Open

Not rendering images in Android RN 0.70 #974

aubri61 opened this issue Feb 22, 2023 · 8 comments
Labels

Comments

@aubri61
Copy link

aubri61 commented Feb 22, 2023

Describe the bug

I'm using fast image instead of default image component in react native.
In some component, fast image works fine with Android but in others, such as after I fetch from unsplash api and get 20 of images, I can never see photos.
Rarely, after like 10 minutes, i can see some of the photos. (1 out of 30 times)
Everything is working fine with IOS.

here is my code

<TouchableOpacity onPress={() => props.onItemPress(item)}>
    <FastImage
          source={{uri: item.urls.small, priority: FastImage.priority.high}}
          style={{
          width: width / 2 - 25,
          height: (width / 2 - 25) * ratio,
          ...theme.shadow,
          borderRadius: 10,
          }}
          // resizeMode={FastImage.resizeMode.contain}
      />
    <View
        style={{
        width: width / 2 - 25,
        height: (width / 2 - 25) * ratio,
        // backgroundColor: '#00000010',
        position: 'absolute',
        borderRadius: 10,
        justifyContent: 'flex-end',
        paddingLeft: 5,
        paddingBottom: 5,
    }}>
    <Appreciates username={item.user.username} textStyle={{color: '#ffffff'}} />
    </View>
</TouchableOpacity>

and this is the working code..

<TouchableOpacity
    style={styles.itemContainer}>
    <FastImage source={{uri: props.image.url}} style={widthStyles.image} />
        <View style={widthStyles.coverView}>
            <Text style={styles.tagText}>{props.tags.join('\n')}</Text>
        </View>
</TouchableOpacity>

I tried some solutions in closed issues but didn't work..
I really need to use this library since I need caching function.. please help me out 🙏🏻

oh and i'm using android emulator!!
is it just a problem of network? I don't think so because working one are also rendering images from unsplash. The difference is that one with the problem is using response data from fetch, while the other one uses static data.

Screenshots
Bug screen from Android
Bug screen from Android

expected screen from IOS
expected screen from IOS

Dependency versions

  • React Native version: 0.70
  • React version: 18.1.0
  • React Native Fast Image version: latest(8.6.3)
@aubri61 aubri61 added the bug label Feb 22, 2023
@JustinHarshbarger
Copy link

I have the same issue, the image display is really random. Some appear after a while and some don't ever show. I'm running this on a Pixel 4a 5G with latest Android OS.

@aubri61
Copy link
Author

aubri61 commented Mar 18, 2023

no any updates? :(

i found that i can't render images when i fetch the image url from api..
when i copy the url from the data and put it in the uri as a string value, it works.

Please solve this issue or anyone suffering from same issue, help me out :(((
i really need this..

@ilovinht
Copy link

same issue +1
any updates?

@kevindingens
Copy link

+1, also experiencing this, commenting to get updates

@leeseonghyun21
Copy link

same issue + 1 on RN 0.71.7 + FastImage@8.6.3.

adding this code works

fallback={true}

@aubri61
Copy link
Author

aubri61 commented May 15, 2023

@leeseonghyun21
yeah, i am temporarily using fallback too, but i guess when i set fallback true, there not much reasons for using fast image since it uses default image component instead.. 🥲

@leeseonghyun21
Copy link

@aubri61
that's right. If the fallback is true, the default Image component is used only when image fetching fails, so there will still be a performance advantage over not using FastImage at all.

It's hard to pinpoint exactly in which case this issue occurs, but since iOS renders the same image normally, I think it's an issue inside Glide(just guess lol).

I hope this problem can be solved quickly, and I hope that the error object can be passed as a parameter of the function in onError

@T-Damer
Copy link

T-Damer commented Nov 23, 2023

Same for me and still no fix, fallback helps, but we need another solution

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

6 participants