Fetching Image from Server with a React Native App - react-native

Question

I'm building a mobile app with a Springboot Rest API backend and a React-Native Frontend.
I'm able to upload a picture from the react-native API to Springboot API and to store it in my postgres database as byte[].
I'm able to retrieve this picture with a simple Get Request tested by Postman.
BUT I'm not able to fetch this image and to display it in my React Native app.
I understood there is a problem to use blob file immediately with react native but I didnt see how to handle it.
Here is my fetch function :
export const getAquariumPicture = async (
aquariumId: string
): Promise<ImageSourcePropType | any> => {
const suffixUrl = "api/downloadAquariumPicture/";
const urlService = urlServer + suffixUrl + aquariumId;
try {
const token = await getData("token");
const response = await fetch(urlService, {
method: "GET",
headers: {
Authorization: token
}
});
return response;
} catch (error) {
console.error(error);
}
};
how can I use this response to pass it as source in an Image balise ?
Here how I'm trying to use the photo :
if (rootStore.tankStore.tankImageState === "pending") {
rootStore.tankStore.storeGetImageTank();
}
const photo = rootStore.tankStore.tankPicture;
console.log("photo = " + photo);
return (
<TouchableOpacity onPress={() => choosePicture()}>
<Image source={cameraIcon} style={styles.icon} />
{photo != null ? (
<Image source={photo} style={styles.photo} />
) : (
<ActivityIndicator />
)}
</TouchableOpacity>
);

Answer 1

In fact I found a solution :
<Image
source={getAquariumImageSource(RootStore.tankStore.tankList[0].id)}
style={styles.photo}
/>
export const getAquariumImageSource = (id: string): ImageSourcePropType => {
return {
uri: `${urlServer}api/downloadAquariumPicture/${id}`,
method: "GET",
headers: {
Pragma: "no-cache",
Authorization: RootStore.memberStore.token
},
cache: "reload"
};
};