support display base64 image (#990)

Author: sieu-db

example/src/ExpoImageExample.tsx

@@ -19,6 +19,9 @@ const Wrapper: React.FC<WrapperProps> = ({ label, children }) => {
   );
 };
 
+const base64BlackImage =
+  "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDABQODxIPDRQSEBIXFRQdHx4dHRsdHR4dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR3/2wBDAR0XFyAeIRshGxsdIR4hHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR3/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABmX/9k=";
+
 const ExpoImageExample: React.FC = () => {
   return (
     <Container style={{}}>
@@ -72,6 +75,16 @@ const ExpoImageExample: React.FC = () => {
             />
           </Wrapper>
         </View>
+        <Wrapper label="Base64 Image">
+          <ExpoImage
+            source={{ uri: base64BlackImage }}
+            style={{ width: 200, height: 200 }}
+          />
+          <ExpoImage
+            source={base64BlackImage}
+            style={{ width: 200, height: 200 }}
+          />
+        </Wrapper>
       </Section>
       <Section title="SVG Image" style={styles.wrapper}>
         <Wrapper label="Remote SVG Image">

packages/core/src/components/ExpoImage.tsx

@@ -55,12 +55,12 @@ const ExpoImage: React.FC<ExtendedImageProps> = ({
   ...props
 }) => {
   let imageSource = source ?? Config.placeholderImageURL;
-  // Prevent crash in Expo 50 when using expo-image with non-http/https URIs
+  // Prevent crash in Expo 50 when using expo-image with non-http/https/data URIs
   if (
     source &&
     typeof source === "object" &&
     "uri" in source &&
-    !/^(http|https):\/\//.test(source.uri || "")
+    !/^(http|https):\/\/|^data:/.test(source.uri || "")
   ) {
     imageSource = { uri: "" };
   }