Image blob working with Image from react native but not with FastImage

59 Views Asked by At

I'm trying to retrive image from AWS s3, i'm presigning the url and fetching the image, but if teh result is tried with Image component from react-nativen everything is working but when using FastImage the image is not displayed

Here is my code:

import React, { useEffect } from 'react';
import { ActivityIndicator, Image, View } from 'react-native';
import axios from 'axios';
import { generatePreSignedUrl } from 'helpers/sign-urls-aws-s3';
import FastImage from 'react-native-fast-image';
;
export function ImageFromAWSS3({ imageURL, style }) {
  const [image, setImage] = React.useState();
  const [loading, setLoading] = React.useState(false);
  const presignedURL = generatePreSignedUrl(imageURL);



  const fetchImage = async () => {
    setLoading(true);
    let config = {
      method: 'get',
      maxBodyLength: Infinity,
      url: imageURL,
      headers: {
        'X-Amz-Content-Sha256':
          'X-AMZ-CONTENT',
        'X-Amz-Date': presignedURL.X_Amz_Date,
        Authorization: presignedURL.Authorization,
      },
      responseType: 'blob', // Specify the response type as 'blob'
    };

    axios
      .request(config)
      .then(async response => {
        const blob = await response.data;
        const reader = new FileReader();
        reader.onload = () => {
          setImage(reader.result);
          setLoading(false);
        };
        reader.readAsDataURL(blob);
      })
      .catch(error => {
        console.log(error);
        setLoading(false);
      });

    setLoading(false);
  };

  useEffect(() => {
    fetchImage();
  }, []);

  if (loading) {
    return <ActivityIndicator />;
  }
  return (
    <View>
      {image != null && (
        <Image source={{ uri: image }} style={style} resizeMode="contain" /> // this is working 

        <FastImage source={{ uri: image }} style={style} resizeMode="contain" /> //    this is not working
      )}
    </View>
  );
}

I don't undersatnd why this is not working everything is the same.

0

There are 0 best solutions below