react-native-fast-image icon indicating copy to clipboard operation
react-native-fast-image copied to clipboard

React Native FastImage not Loading Properly on 5G Network

Open parthshiroya6 opened this issue 1 year ago • 2 comments

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.

parthshiroya6 avatar Aug 30 '24 06:08 parthshiroya6

still exist

Nader-CS avatar Apr 30 '25 12:04 Nader-CS

: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.

parthshiroya6 avatar May 27 '25 11:05 parthshiroya6