0

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.

Pizzaboi
  • 3
  • 1

0 Answers0