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.