[Bug]: Not working with Base64

[IlirBajrami]

Summary

My source is a Base64 image and i get this error when trying to load it:

Environment

"expo": "~51.0.31",
"react-native": "0.74.5",
"react-native-zoom-toolkit": "^3.1.0",
"react-native-gesture-handler": "~2.16.1",
"react-native-reanimated": "~3.10.1",

Steps to Reproduce

No response

[Glazzes]

I do not really get what's your issue, what's that you're doing in order for that error to pop up?

[IlirBajrami]

The image that im fetching from the API is not an image url but a Base64 string.

example:

"data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/wAALCAGQAtABAREA/8QAFwABAQEBAAAAAAAAAAAAAAAAAAcECf/EACQQAQACAQIEBwAAAAAAAAAAAAABAgUDBAYIERITFBghV6XT/9oACAEBAAA/AOVQAAAAAAAAAAAAAAAAAAAAAAAAAAAAALh6KOZv4z+5x/7o7ncJk+Gs3kOHM3tvLZHFbvW2W70e+t/D1tK80vXurM1npasx1iZientMsIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/2Q=="

[Glazzes]

I meant what's the code you wrote for it to fail like this.

[IlirBajrami]

I was referring to this example: https://glazzes.github.io/react-native-zoom-toolkit/components/resumablezoom.html but in my case the uri is not a url string https:// but a Base64.

To be more specific, here's my whole code:

import {
  View,
  Text,
  Alert,
  Image,
  ActivityIndicator,
  useWindowDimensions,
} from "react-native";
import React, { useState } from "react";
import CustomButton from "@/components/CustomButton";
import { useSingleSession } from "@/store/kvmSessionStore";
import getVncScreenshot from "@/actions/getVncScreenshot";
import {
  getAspectRatioSize,
  ResumableZoom,
  useImageResolution,
} from "react-native-zoom-toolkit";

export default function Vnc() {
  const [loadingData, setLoadingData] = useState(false);
  const [screenshot, setScreenshot] = useState<VncScreenshotProps | null>(null);

  const { singleSession } = useSingleSession();

  const getScreenshot = async () => {
    setLoadingData(true);
    try {
      const sceenshotResponse = await getVncScreenshot(
        singleSession as KvmParams
      );
      setScreenshot(sceenshotResponse);
    } catch (error) {
      console.log("Getting Screenshot Error", error);
      Alert.alert("Error!", error?.toString());
    } finally {
      setLoadingData(false);
    }
  };

  const { width } = useWindowDimensions();

  // Gets the resolution of your image
  const { isFetching, resolution } = useImageResolution({
    uri: screenshot?.data!,
  });
  if (isFetching || resolution === undefined) {
    return null;
  }

  // An utility function to get the size without compromising the aspect ratio
  const imageSize = getAspectRatioSize({
    aspectRatio: resolution.width / resolution.height,
    width: width,
  });

  return (
    <View>
      <Text>Vnc</Text>
      <CustomButton onPress={getScreenshot}>
        {loadingData ? (
          <ActivityIndicator color='#fff' />
        ) : (
          <Text className='text-white'>Get Screenshot</Text>
        )}
      </CustomButton>
      <View className='items-center justify-center w-full h-80'>
        {loadingData ? (
          <ActivityIndicator color='#F96002' />
        ) : (
          <ResumableZoom maxScale={resolution}>
            <Image
              source={{ uri: screenshot?.data }}
              //   style={{ height: "100%", width: "100%" }}
              style={imageSize}
              resizeMode='contain'
              resizeMethod='scale'
            />
          </ResumableZoom>
        )}
      </View>
    </View>
  );
}

where

screenshot?.data = "data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/wAALCAGQAtABAREA/8QAFwABAQEBAAAAAAAAAAAAAAAAAAcECf/EACQQAQACAQIEBwAAAAAAAAAAAAABAgUDBAYIERITFBghV6XT/9oACAEBAAA/AOVQAAAAAAAAAAAAAAAAAAAAAAAAAAAAALh6KOZv4z+5x/7o7ncJk+Gs3kOHM3tvLZHFbvW2W70e+t/D1tK80vXurM1npasx1iZientMsIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/2Q==" 

[Glazzes]

Did you even check the validity of that base64 image? I've tried with an image I converted online to base64 and passed it to useImageResolution hook and everything worked fine for me, I tried the base64 string you passed to me and it does not work.

[Glazzes]

I'm closing the issue as it's clearly not related to the library, I tried on both platforms and no of them proved to be related to your problem, by the looks of the of error logs it's a problem with the base64 image data being interpreted as a null value, see a similar issue

[IlirBajrami]

Did you even check the validity of that base64 image? I've tried with an image I converted online to base64 and passed it to useImageResolution hook and everything worked fine for me, I tried the base64 string you passed to me and it does not work.

@Glazzes you shouldn't hurry on closing the issues. Github closes them automatically if no activity. I wasn't home so i couldn't reply that fast. The Base64 string that i posted above is just a sample and i know that is not valid. I just wanted to clarify what im talking about. In my code i get the image just fine. Heres a screenshot:

But when i use it with your library i get that error. Probably is not your library's issue whatsoever, however for now i gave up on this functionality. I will get back to this when i have more time.

[Glazzes]

@IlirBajrami My bad and sorry for the hurry, I just made several tests to render images with a base64 string by passing strings, null and undefined, same to the function that gets the resolution of an image, nothing proved to cause the issue you have, you could make some testing with RN Image's getSize and getSizeWithHeaders functions and see if they cause this problem to you, something like this:

import {Image} from 'react-native';

Image.getSize('base64 image', (w,h) => console.log(w, h), () => console.log('failed'));