React Native FastImage not Loading Properly on 5G Network
I'm having an issue with image loading in my React Native app using react-native-fast-image. My images are loading very slowly, even on a 5G network, especially when I try to load new images multiple times. I’ve implemented preloading, but it doesn’t seem to improve the situation.
React-Native version:0.70.0 react-native-fast-image:^8.6.3
Please check below video for issue :-
https://github.com/user-attachments/assets/5587f0e3-e4ce-4286-8ba6-1ed13a0fc752
import React, { useEffect } from "react";
import { Dimensions, Image, ImageStyle, StyleProp } from "react-native";
import Assets from "../constants/Assets";
import FastImage from "react-native-fast-image";
import ShimmerImage from "./ShimmerImage";
import ImageZoom from "react-native-image-pan-zoom";
interface Props {
imgStyle: StyleProp<ImageStyle> | undefined;
uri: string | null;
thumbnailUrl: string | null;
isZoomable?: boolean;
}
const ImageSlider = ({ imgStyle, uri, thumbnailUrl, isZoomable }: Props) => {
let checkImageURL = uri
? {
uri: uri,
headers: { Authorization: "someAuthToken" },
priority: FastImage.priority.high,
}
: Assets.placeholder;
useEffect(() => {
if (uri) {
FastImage.preload([{ uri }]); // Preload the image when URI changes
}
}, [uri]);
return (
<FastImage
style={[imgStyle]}
source={checkImageURL}
resizeMode={FastImage.resizeMode.cover}
fallback={true}
/>
);
};
export default ImageSlider;
I want to solve this issue as below link
https://github.com/user-attachments/assets/5af43a8d-a1cb-4dab-b924-27d3f5645959
if anyone know to any solution please let me know.
still exist
:tada: :tada: I found a solution that resolved my image performance issue — I highly recommend using react-native-turbo-image. It's a drop-in replacement for the built-in <Image /> component and offers significantly faster image loading, automatic memory and disk caching, and smoother scroll performance, especially in image-heavy components like FlatList.