If I try to save a profile picture in React Native to AsyncStorage, and I want it to be unique (different user with different profile image) the picture with camera (expo-camera) - works properly with the following context. But when I try to use Image Picker (expo-image-picker) it doesn't work. However, if I remove the uid from the key, so it just user, both versions work, but - of course - it won't be unique anymore and every user's profile picture will be the same. Is there any conflict with the two libraries or do I wrong something?
import React, { createContext, useState } from "react";
import { Alert } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
export const UserImageContext = createContext();
export const UserImageContextProvider = ({ children }) => {
const [userImage, setUserImage] = useState(null);
const saveImage = async (image, user) => {
try {
const savePic = image;
await AsyncStorage.setItem(`${user.uid}-photo`, savePic);
} catch (error) {
Alert.alert("Error", "An error happened during saving process.", [
{ text: "OK" },
]);
}
};
const saveImageFromUpload = async (image, user) => {
try {
const saveUploadPic = image.assets[0].uri;
await AsyncStorage.setItem(`${user.uid}-photo`, saveUploadPic);
} catch (error) {
Alert.alert("Error", "An error happened during saving process.", [
{ text: "OK" },
]);
}
};
const loadImage = async (user) => {
try {
const image = await AsyncStorage.getItem(`${user.uid}-photo`);
if (image !== null) {
setUserImage(image);
return userImage;
}
} catch (error) {
Alert.alert("Error", "An error happened during loading process.", [
{ text: "OK" },
]);
}
};
return (
<UserImageContext.Provider
value={{
userImage,
loadImage,
saveImage,
saveImageFromUpload,
}}
>
{children}
</UserImageContext.Provider>
);
};
I tried to separate the user.uid to a variant, tried to add it from the component, but when it's unique, the image-picker doesn't work.