react-native-fast-image 8.26.0 → 8.27.1

package/README.md

@@ -1,5 +1,5 @@
 <h1 align="center">
-  🚩 FastImage
+  React Native Fast Image
 </h1>
 
 <div align="center">
@@ -64,13 +64,21 @@ and
 
 ## Usage
 
-**Note: You must be using React Native 0.60.0 or higher to use the most recent version of `react-native-fast-image`.**
+Works with React Native 0.60 and later, with the New Architecture (through React Native's interop layer) and the legacy architecture, and with Expo. It's tested on React Native 0.87 with the New Architecture, 0.73 with the legacy architecture, and Expo SDK 57. A native New Architecture component is planned for the next major version.
 
 ```bash
-yarn add react-native-fast-image
+npm install react-native-fast-image
 cd ios && pod install
 ```
 
+With Expo:
+
+```bash
+npx expo install react-native-fast-image
+```
+
+It has native code, so it needs a [development build](https://docs.expo.dev/develop/development-builds/introduction/) (e.g. `npx expo run:ios`), not Expo Go.
+
 ```jsx
 import FastImage from 'react-native-fast-image'
 
@@ -78,7 +86,7 @@ const YourImage = () => (
     <FastImage
         style={{ width: 200, height: 200 }}
         source={{
-            uri: 'https://unsplash.it/400/400?image=1',
+            uri: 'https://example.com/image.jpg',
             headers: { Authorization: 'someAuthToken' },
             priority: FastImage.priority.normal,
         }}
@@ -87,9 +95,9 @@ const YourImage = () => (
 )
 ```
 
-## Are you using Glide already using an AppGlideModule?
+## If your app already has an AppGlideModule
 
-- [Are you using Glide already using an AppGlideModule?](docs/app-glide-module.md) (you might have problems if you don't read this)
+If your Android app has its own Glide `AppGlideModule`, read [using FastImage with an AppGlideModule](docs/app-glide-module.md) first, or FastImage may not work.
 
 ## Properties
 
@@ -97,13 +105,13 @@ const YourImage = () => (
 
 Source for the remote image to load.
 
-When `source` changes, the image that's showing stays until the new one has loaded, as with `<img>` in browsers and React Native's `Image` on iOS. In views that get reused for other content, such as rows in FlashList or recyclerlistview, set `recyclingKey` so a reused row doesn't show the previous row's image.
+When `source` changes, the image that's showing stays until the new one has loaded. In views that get reused for other content, such as rows in FlashList or recyclerlistview, set `recyclingKey` so a reused row doesn't show the previous row's image.
 
 ---
 
 ### `source.uri?: string`
 
-Remote url to load the image from. e.g. `'https://facebook.github.io/react/img/logo_og.png'`.
+Remote url to load the image from. e.g. `'https://example.com/image.jpg'`.
 
 #### Photo library images (iOS)
 
@@ -124,6 +132,26 @@ With Expo, add it with [expo-build-properties](https://docs.expo.dev/versions/la
 
 The app needs access to the photo library, which it has if it got the url from there. A photo library image is decoded at about the view's size, since photos are large and usually shown small; `onLoad` still reports the photo's own size. `FastImage.preload` of a `ph://` source loads the full-size photo (there's no view to size it for), which doesn't make a view's smaller copy load faster, so preloading photo library images usually isn't worth it. Without the plugin, a `ph://` source fails with `onError`, saying so. `assets-library://` urls aren't supported. On Android, photo pickers give `content://` urls, which load as they are.
 
+#### SVG images
+
+SVG images (remote, bundled with `require()`, or local files) load when the app has an SVG library: SDWebImageSVGCoder on iOS and AndroidSVG on Android. Add them to the app:
+
+```ruby
+# ios/Podfile
+pod 'SDWebImageSVGCoder'
+```
+
+```groovy
+// android/app/build.gradle
+dependencies {
+    implementation 'com.caverock:androidsvg-aar:1.4'
+}
+```
+
+On Android either of AndroidSVG's packages works (`com.caverock:androidsvg-aar` or `com.caverock:androidsvg`), so an app that already has one needs nothing more. With Expo, add the pod with [expo-build-properties](https://docs.expo.dev/versions/latest/sdk/build-properties/) (`{ "ios": { "extraPods": [{ "name": "SDWebImageSVGCoder" }] } }`).
+
+An SVG is drawn at the size it's shown at, so it's sharp at any size, and then works like any other image: `resizeMode`, `tintColor`, `blurRadius`, `transition` and caching. `onLoad` reports the SVG's own size: its `width` and `height`, or its `viewBox`'s (300x150 if it has neither). Animated SVGs (SMIL or CSS animations) show their first state. On iOS, SVG images need iOS 13 or later. Without the SVG library, an SVG image fails with `onError`, saying what to add (on iOS, for a url that ends in `.svg`).
+
 ---
 
 ### `source.headers?: object`
@@ -206,7 +234,7 @@ Whether the decoded image is kept in the memory cache. **Default: true.** With `
 
 - An asset loaded with `require(...)`.
 - Shown while the first image loads, and if an image fails to load. When `source` changes, the previous image shows while the new one loads instead (see `source` and `recyclingKey`).
-- Note that like the built-in `Image` implementation, on Android `defaultSource` does not work in debug mode. This is due to the fact that assets are sent from the dev server, but RN's functions only know how to load it from `res`.
+- On Android, `defaultSource` doesn't show in debug builds: there the dev server serves `require()`d images, and `defaultSource` is only loaded from the app's resources.
 
 ---
 
@@ -225,7 +253,7 @@ For views that get reused for other content, such as rows in FlashList or recycl
 - `FastImage.resizeMode.contain` - Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
 - `FastImage.resizeMode.cover` **(Default)** - Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
 - `FastImage.resizeMode.stretch` - Scale width and height independently, This may change the aspect ratio of the src.
-- `FastImage.resizeMode.center` - Do not scale the image, keep centered.
+- `FastImage.resizeMode.center` - Center the image at its own size, scaled down uniformly to fit if it's larger than the view.
 - `FastImage.resizeMode.repeat` - Repeat the image to cover the view, from its top-left corner, at the image's own size in pixels (a bundled image at its size in points), scaled down to fit if it's larger than the view. An animated image repeats its first frame, and `defaultSource` repeats too.
 
 ---
@@ -292,7 +320,7 @@ Decoding a smaller copy can take a little longer, so use it where the memory mat
 
 ### `blurRadius?: number`
 
-Blurs the image by this radius, in points, like React Native's `Image` (the same radius looks about the same on iOS and Android). `0` **(Default)** is no blur.
+Blurs the image by this radius, in points (the same radius looks about the same on iOS and Android). `0` **(Default)** is no blur.
 
 It's for still images, or a radius that changes now and then (e.g. blurring a photo behind a sheet). Each change blurs the image again on the CPU, so don't animate it.
 
@@ -358,10 +386,9 @@ A React Native style. Supports using `borderRadius`.
 
 ---
 
-### `fallback: boolean`
+### `fallback?: boolean`
 
-If true will fallback to using `Image`.
-In this case the image will still be styled and laid out the same way as `FastImage`.
+If true, the image is shown with React Native's `Image` instead, styled and laid out the same way. FastImage's own features, such as its caching options, `priority` and `transition`, don't apply.
 
 ---
 
@@ -371,7 +398,7 @@ If supplied, changes the color of all the non-transparent pixels to the given co
 
 ## `FastImageBackground`
 
-An image with content on top of it, like React Native's `ImageBackground`: a view that the image fills, with the children on top.
+An image with content on top of it: a view that the image fills, with the children on top.
 
 Use it rather than giving `FastImage` children: in the next major version, `FastImage` won't render children, since the image will be a single native view ([#1137](https://github.com/DylanVann/react-native-fast-image/pull/1137)), which can't hold them. `FastImageBackground` works the same in both.
 
@@ -380,7 +407,7 @@ import { FastImageBackground } from 'react-native-fast-image'
 
 const Banner = () => (
     <FastImageBackground
-        source={{ uri: 'https://unsplash.it/400/200?image=1' }}
+        source={{ uri: 'https://example.com/banner.jpg' }}
         style={{ width: 200, height: 100 }}
         imageStyle={{ borderRadius: 8 }}
     >
@@ -403,11 +430,11 @@ Preload images to display later. e.g.
 ```js
 FastImage.preload([
     {
-        uri: 'https://facebook.github.io/react/img/logo_og.png',
+        uri: 'https://example.com/image-1.jpg',
         headers: { Authorization: 'someAuthToken' },
     },
     {
-        uri: 'https://facebook.github.io/react/img/logo_og.png',
+        uri: 'https://example.com/image-2.jpg',
         headers: { Authorization: 'someAuthToken' },
     },
 ])
@@ -529,13 +556,13 @@ await FastImage.configureCache({ maxDiskSize: 500 * 1024 * 1024 })
 const { maxDiskSize, diskSize } = await FastImage.configureCache()
 ```
 
-On Android, if your app has its own `AppGlideModule` (see [Are you using Glide already](docs/app-glide-module.md)), set the disk cache size there instead: `maxDiskSize` isn't applied or reported.
+On Android, if your app has its own `AppGlideModule` (see [using FastImage with an AppGlideModule](docs/app-glide-module.md)), set the disk cache size there instead: `maxDiskSize` isn't applied or reported.
 
 Images with `cache: 'web'` are kept in their own HTTP cache instead, up to 50 MB on each platform, which these limits don't change.
 
 ## Web
 
-With [react-native-web](https://necolas.github.io/react-native-web/), FastImage shows images with the web's `Image`. Bundlers pick the web version through the package's `browser` field, or the `.web.js` files next to the native ones.
+FastImage works on the web with [react-native-web](https://necolas.github.io/react-native-web/). Bundlers pick the web version through the package's `browser` field, or the `.web.js` files next to the native ones.
 
 Support is minimal:
 
@@ -552,13 +579,6 @@ If you have any problems using this library try the steps in [troubleshooting](d
 
 [Follow these instructions to get the example app running.](docs/development.md)
 
-## Supported React Native Versions
-
-This project only aims to support the latest version of React Native.\
-This simplifies the development and the testing of the project.
-
-If you require new features or bug fixes for older versions you can fork this project.
-
 ## Credits
 
 The idea for this modules came from
@@ -571,9 +591,9 @@ Thanks to [@mobinni](https://github.com/mobinni) for helping with the conceptual
 
 ## Licenses
 
-- FastImage - MIT © [DylanVann](https://github.com/DylanVann)
-- SDWebImage - `MIT`
-- Glide - BSD, part MIT and Apache 2.0. See the [LICENSE](https://github.com/bumptech/glide/blob/master/LICENSE) file for details.
+- React Native Fast Image - MIT © [Dylan Vann](https://github.com/DylanVann). See the [LICENSE](LICENSE) file.
+- [SDWebImage](https://github.com/SDWebImage/SDWebImage) (iOS) - MIT. See its [LICENSE](https://github.com/SDWebImage/SDWebImage/blob/master/LICENSE) file.
+- [Glide](https://github.com/bumptech/glide) (Android) - BSD, part MIT and Apache 2.0. See its [LICENSE](https://github.com/bumptech/glide/blob/master/LICENSE) file.
 
 [build-badge]: https://github.com/DylanVann/react-native-fast-image/actions/workflows/ci.yml/badge.svg
 [build]: https://github.com/DylanVann/react-native-fast-image/actions/workflows/ci.yml

package/android/build.gradle

@@ -81,4 +81,7 @@ dependencies {
     implementation "com.github.bumptech.glide:annotations:${glideVersion}"
     implementation "com.github.bumptech.glide:okhttp3-integration:${glideVersion}"
     annotationProcessor "com.github.bumptech.glide:compiler:${glideVersion}"
+    // SVG images, when the app has AndroidSVG (either package): not shipped,
+    // so there's never a second copy of it (see FastImageSvg).
+    compileOnly 'com.caverock:androidsvg-aar:1.4'
 }

package/android/consumer-rules.pro

@@ -41,3 +41,8 @@
 -keep class com.facebook.react.uimanager.UIManagerHelper {
   public static *** getEventDispatcherForReactTag(com.facebook.react.bridge.ReactContext, int);
 }
+
+# AndroidSVG, which FastImage uses for SVG images when the app has it
+# (FastImageSvgRenderer), and doesn't ship. Without it, R8 would stop at the
+# missing classes.
+-dontwarn com.caverock.androidsvg.**

package/android/src/main/java/com/dylanvann/fastimage/FastImageOkHttpProgressGlideModule.java

@@ -120,6 +120,7 @@ public class FastImageOkHttpProgressGlideModule extends LibraryGlideModule {
         }
         OkHttpClient client = builder.build();
         registry.replace(GlideUrl.class, InputStream.class, new UrlLoaderFactory(client));
+        FastImageSvg.register(registry, glide.getBitmapPool());
 
         // `cache: 'web'` skips Glide's caches and relies on HTTP caching, so
         // those urls get a client with an HTTP cache (#280): one of their own,
@@ -202,7 +203,7 @@ public class FastImageOkHttpProgressGlideModule extends LibraryGlideModule {
 
     // Fails a successful response that's clearly not an image: its type isn't
     // an image's (text, JSON, XML other than SVG) and its first bytes aren't a
-    // format Glide recognizes, e.g. a captive portal's or a proxy's HTML page
+    // format Glide recognizes or an SVG's, e.g. a captive portal's or a proxy's HTML page
     // sent with status 200. Glide keeps the bytes it downloads in its disk
     // cache before decoding them (and doesn't remove them when that fails), as
     // does the HTTP cache of `web` images, so every later load of the url
@@ -227,6 +228,10 @@ public class FastImageOkHttpProgressGlideModule extends LibraryGlideModule {
                 if (imageType != ImageHeaderParser.ImageType.UNKNOWN) {
                     return response;
                 }
+                byte[] head = response.peekBody(1024).bytes();
+                if (FastImageSvg.looksLikeSvg(head, head.length)) {
+                    return response;
+                }
                 response.close();
                 throw new IOException("Not an image (Content-Type: " + type + ")");
             }

package/android/src/main/java/com/dylanvann/fastimage/FastImageRequestListener.java

@@ -54,11 +54,14 @@ public class FastImageRequestListener implements RequestListener<Drawable> {
         return false;
     }
 
-    // The first root cause's message, e.g. "Not Found, status code: 404".
     // The first root cause's message, e.g. "Not Found, status code: 404" (also
-    // for preload results).
+    // for preload results). For an SVG without AndroidSVG, what to add: other
+    // decoders (e.g. Glide's video one) also tried it, and failed first.
     static String errorMessage(@androidx.annotation.Nullable GlideException e) {
         if (e != null) {
+            for (Throwable cause : e.getRootCauses()) {
+                if (FastImageSvg.MISSING.equals(cause.getMessage())) return FastImageSvg.MISSING;
+            }
             for (Throwable cause : e.getRootCauses()) {
                 if (cause.getMessage() != null) return cause.getMessage();
             }

package/android/src/main/java/com/dylanvann/fastimage/FastImageSource.java

@@ -57,6 +57,13 @@ public class FastImageSource extends ImageSource {
         super(context, source, width, height);
         mHeaders = headers == null ? Headers.DEFAULT : headers;
         mUri = super.getUri();
+        if (mUri == null || TextUtils.isEmpty(mUri.toString())) {
+            // A bundled image that release builds package as a raw resource
+            // (e.g. an SVG, which isn't a drawable): React Native's
+            // ImageSource only looks for drawables.
+            Uri raw = rawResourceUri(context, source);
+            if (raw != null) mUri = raw;
+        }
 
         if (isResource() && TextUtils.isEmpty(mUri.toString())) {
             throw new Resources.NotFoundException("Local Resource Not Found. Resource: '" + getSource() + "'.");
@@ -76,6 +83,16 @@ public class FastImageSource extends ImageSource {
     }
 
 
+    // The raw resource with the source's name (a bundled image's source is
+    // its resource name, e.g. src_images_logo), or null.
+    @Nullable
+    private static Uri rawResourceUri(Context context, @Nullable String source) {
+        if (source == null || source.isEmpty() || source.contains(":")) return null;
+        int id = context.getResources().getIdentifier(source, "raw", context.getPackageName());
+        if (id == 0) return null;
+        return Uri.parse(ANDROID_RESOURCE_SCHEME + "://" + context.getPackageName() + "/" + id);
+    }
+
     public boolean isBase64Resource() {
         return mUri != null && FastImageSource.isBase64Uri(mUri);
     }

package/android/src/main/java/com/dylanvann/fastimage/FastImageSvg.java

@@ -0,0 +1,161 @@
+package com.dylanvann.fastimage;
+
+import android.graphics.Bitmap;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.bumptech.glide.Registry;
+import com.bumptech.glide.load.Options;
+import com.bumptech.glide.load.ResourceDecoder;
+import com.bumptech.glide.load.engine.Resource;
+import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool;
+import com.bumptech.glide.util.ByteBufferUtil;
+
+import java.io.ByteArrayOutputStream;
+import java.io.IOException;
+import java.io.InputStream;
+import java.nio.ByteBuffer;
+import java.nio.charset.StandardCharsets;
+import java.util.Locale;
+
+// SVG images (static), drawn with AndroidSVG when the app has it: either of
+// its packages (com.caverock:androidsvg or com.caverock:androidsvg-aar).
+// FastImage compiles against it but doesn't ship it, so an app never gets a
+// second copy of it (from another library, or its own). Without it, an SVG
+// image fails with a message saying what to add.
+//
+// The decoders come after Glide's own, so they're only asked about data
+// Glide couldn't decode, and only take data that starts like an SVG. This
+// class doesn't use AndroidSVG itself (FastImageSvgRenderer does), so it
+// loads without it.
+final class FastImageSvg {
+    static final String MISSING =
+            "SVG images need AndroidSVG: add implementation 'com.caverock:androidsvg-aar:1.4' to the app's dependencies";
+    private static final int HEAD_LENGTH = 1024;
+    @Nullable
+    private static Boolean available;
+
+    private FastImageSvg() {
+    }
+
+    static synchronized boolean available() {
+        if (available == null) {
+            try {
+                Class.forName("com.caverock.androidsvg.SVG");
+                available = true;
+            } catch (Throwable e) {
+                available = false;
+            }
+        }
+        return available;
+    }
+
+    static void register(@NonNull Registry registry, @NonNull BitmapPool pool) {
+        registry.append(InputStream.class, Bitmap.class, new StreamDecoder(pool))
+                // Data Glide holds in memory, e.g. from its disk cache.
+                .append(ByteBuffer.class, Bitmap.class, new BufferDecoder(pool));
+    }
+
+    // Whether the data starts like an SVG document: its first element is
+    // <svg> (after a byte order mark, whitespace, an XML declaration, comments
+    // or a doctype), so e.g. an HTML page with an inline SVG isn't one.
+    static boolean looksLikeSvg(@NonNull byte[] head, int length) {
+        String text = new String(head, 0, length, StandardCharsets.UTF_8).toLowerCase(Locale.ROOT);
+        int i = text.startsWith("\uFEFF") ? 1 : 0;
+        while (i < text.length()) {
+            char c = text.charAt(i);
+            if (Character.isWhitespace(c)) {
+                i++;
+            } else if (text.startsWith("<?", i)) {
+                i = skipPast(text, i, "?>");
+            } else if (text.startsWith("<!--", i)) {
+                i = skipPast(text, i, "-->");
+            } else if (text.startsWith("<!", i)) {
+                // A doctype, whose internal subset ([...]) can have '>'s.
+                int subset = text.indexOf('[', i);
+                int close = text.indexOf('>', i);
+                if (subset >= 0 && subset < close) i = skipPast(text, subset, "]");
+                if (i >= 0) i = skipPast(text, i, ">");
+            } else {
+                return text.startsWith("<svg", i);
+            }
+            if (i < 0) return false;
+        }
+        return false;
+    }
+
+    // The index after the end marker from i, or -1 if it isn't there.
+    private static int skipPast(String text, int i, String end) {
+        int found = text.indexOf(end, i);
+        return found < 0 ? -1 : found + end.length();
+    }
+
+    private static byte[] readAll(InputStream stream) throws IOException {
+        ByteArrayOutputStream out = new ByteArrayOutputStream();
+        byte[] chunk = new byte[16 * 1024];
+        int read;
+        while ((read = stream.read(chunk)) != -1) {
+            out.write(chunk, 0, read);
+        }
+        return out.toByteArray();
+    }
+
+    private static Resource<Bitmap> decode(byte[] data, int width, int height, Options options, BitmapPool pool)
+            throws IOException {
+        if (!available()) {
+            throw new IOException(MISSING);
+        }
+        return FastImageSvgRenderer.render(data, width, height, options, pool);
+    }
+
+    private static final class StreamDecoder implements ResourceDecoder<InputStream, Bitmap> {
+        private final BitmapPool pool;
+
+        StreamDecoder(BitmapPool pool) {
+            this.pool = pool;
+        }
+
+        @Override
+        public boolean handles(@NonNull InputStream source, @NonNull Options options) throws IOException {
+            // Glide rewinds the stream before decoding.
+            byte[] head = new byte[HEAD_LENGTH];
+            int length = 0;
+            int read;
+            while (length < head.length && (read = source.read(head, length, head.length - length)) != -1) {
+                length += read;
+            }
+            return looksLikeSvg(head, length);
+        }
+
+        @Nullable
+        @Override
+        public Resource<Bitmap> decode(@NonNull InputStream source, int width, int height, @NonNull Options options)
+                throws IOException {
+            return FastImageSvg.decode(readAll(source), width, height, options, pool);
+        }
+    }
+
+    private static final class BufferDecoder implements ResourceDecoder<ByteBuffer, Bitmap> {
+        private final BitmapPool pool;
+
+        BufferDecoder(BitmapPool pool) {
+            this.pool = pool;
+        }
+
+        @Override
+        public boolean handles(@NonNull ByteBuffer source, @NonNull Options options) {
+            ByteBuffer copy = source.duplicate();
+            byte[] head = new byte[Math.min(HEAD_LENGTH, copy.remaining())];
+            copy.get(head);
+            return looksLikeSvg(head, head.length);
+        }
+
+        @Nullable
+        @Override
+        public Resource<Bitmap> decode(@NonNull ByteBuffer source, int width, int height, @NonNull Options options)
+                throws IOException {
+            return FastImageSvg.decode(readAll(ByteBufferUtil.toStream(source)), width, height, options, pool);
+        }
+    }
+}

package/android/src/main/java/com/dylanvann/fastimage/FastImageSvgRenderer.java

@@ -0,0 +1,86 @@
+package com.dylanvann.fastimage;
+
+import android.graphics.Bitmap;
+import android.graphics.Canvas;
+import android.graphics.RectF;
+
+import com.bumptech.glide.load.Options;
+import com.bumptech.glide.load.engine.Resource;
+import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool;
+import com.bumptech.glide.load.resource.bitmap.BitmapResource;
+import com.bumptech.glide.load.resource.bitmap.DownsampleStrategy;
+import com.caverock.androidsvg.SVG;
+import com.caverock.androidsvg.SVGParseException;
+
+import java.io.ByteArrayInputStream;
+import java.io.IOException;
+
+// Draws an SVG into a bitmap with AndroidSVG, at the size the request's
+// downsample strategy gives for the view (as Glide decodes other images, but
+// also larger than the SVG's own size, as it's drawn, not scaled up). Glide
+// then applies the view's transformations (scale type, blur) as for any
+// bitmap. Only used when the app has AndroidSVG (see FastImageSvg).
+final class FastImageSvgRenderer {
+    // An SVG with neither a size nor a viewBox, as browsers size one.
+    private static final float DEFAULT_WIDTH = 300;
+    private static final float DEFAULT_HEIGHT = 150;
+    // At most this many pixels (a 4096 x 4096 bitmap), however large the view.
+    private static final float MAX_PIXELS = 4096f * 4096f;
+
+    private FastImageSvgRenderer() {
+    }
+
+    static Resource<Bitmap> render(byte[] data, int width, int height, Options options, BitmapPool pool)
+            throws IOException {
+        SVG svg;
+        try {
+            svg = SVG.getFromInputStream(new ByteArrayInputStream(data));
+        } catch (SVGParseException e) {
+            throw new IOException("Cannot decode the SVG: " + e.getMessage(), e);
+        }
+        // The SVG's own size: its width and height, or its viewBox's.
+        RectF viewBox = svg.getDocumentViewBox();
+        float ownWidth = svg.getDocumentWidth();
+        float ownHeight = svg.getDocumentHeight();
+        if (viewBox != null && viewBox.width() > 0 && viewBox.height() > 0) {
+            if (ownWidth <= 0 && ownHeight <= 0) {
+                ownWidth = viewBox.width();
+                ownHeight = viewBox.height();
+            } else if (ownWidth <= 0) {
+                ownWidth = ownHeight * viewBox.width() / viewBox.height();
+            } else if (ownHeight <= 0) {
+                ownHeight = ownWidth * viewBox.height() / viewBox.width();
+            }
+        } else {
+            if (ownWidth <= 0 || ownHeight <= 0) {
+                ownWidth = DEFAULT_WIDTH;
+                ownHeight = DEFAULT_HEIGHT;
+            }
+            // Scaled to the bitmap through a viewBox of its own size.
+            svg.setDocumentViewBox(0, 0, ownWidth, ownHeight);
+        }
+        int sourceWidth = Math.max(1, Math.round(ownWidth));
+        int sourceHeight = Math.max(1, Math.round(ownHeight));
+
+        // The strategy also records the SVG's own size for onLoad
+        // (FastImageSourceSize.Capture).
+        DownsampleStrategy strategy = options.get(DownsampleStrategy.OPTION);
+        int targetWidth = width > 0 ? width : sourceWidth;
+        int targetHeight = height > 0 ? height : sourceHeight;
+        float scale = strategy != null
+                ? strategy.getScaleFactor(sourceWidth, sourceHeight, targetWidth, targetHeight)
+                : 1f;
+        if (Float.isNaN(scale) || Float.isInfinite(scale) || scale <= 0) scale = 1f;
+        float pixels = sourceWidth * scale * sourceHeight * scale;
+        if (pixels > MAX_PIXELS) scale *= (float) Math.sqrt(MAX_PIXELS / pixels);
+        int bitmapWidth = Math.max(1, Math.round(sourceWidth * scale));
+        int bitmapHeight = Math.max(1, Math.round(sourceHeight * scale));
+
+        svg.setDocumentWidth(bitmapWidth);
+        svg.setDocumentHeight(bitmapHeight);
+        // Cleared (transparent), from Glide's pool.
+        Bitmap bitmap = pool.get(bitmapWidth, bitmapHeight, Bitmap.Config.ARGB_8888);
+        svg.renderToCanvas(new Canvas(bitmap));
+        return BitmapResource.obtain(bitmap, pool);
+    }
+}

package/dist/index.d.ts

@@ -110,18 +110,8 @@ export interface OnProgressEvent {
     };
 }
 export interface ImageStyle extends ViewStyle {
-    backfaceVisibility?: 'visible' | 'hidden';
-    borderBottomLeftRadius?: number;
-    borderBottomRightRadius?: number;
-    backgroundColor?: ColorValue;
-    borderColor?: ColorValue;
-    borderWidth?: number;
-    borderRadius?: number;
-    borderTopLeftRadius?: number;
-    borderTopRightRadius?: number;
-    overlayColor?: ColorValue;
-    tintColor?: ColorValue;
-    opacity?: number;
+    overlayColor?: ViewStyle['backgroundColor'];
+    tintColor?: ViewStyle['backgroundColor'];
 }
 export interface FastImageProps extends AccessibilityProps, ViewProps {
     /**

package/ios/FastImage/FFFastImageSource.h

@@ -64,6 +64,10 @@ typedef NS_ENUM(NSInteger, FFFCacheControl) {
 // which is decoded at about the view's size.
 - (BOOL)isPhotoLibrary;
 
+// The error's message, or for an SVG image that couldn't be decoded because
+// the app doesn't have SDWebImageSVGCoder, what to add.
+- (NSString *)errorMessage:(NSError *)error;
+
 // A photo library image's own size in pixels (for onLoad when it comes from
 // a cache, where the size it was decoded from isn't recorded), or zero.
 - (CGSize)photoPixelSize;

package/ios/FastImage/FFFastImageSource.m

@@ -5,8 +5,12 @@
 #import <SDWebImage/SDWebImageError.h>
 #import <SDWebImage/SDWebImageDownloaderOperation.h>
 #import <SDWebImage/NSData+ImageContentType.h>
+#import <SDWebImage/SDImageCodersManager.h>
 #import <objc/message.h>
 
+// In FFFastImageView.m.
+FOUNDATION_EXTERN NSString *FFFErrorMessage(NSError *error);
+
 static NSUInteger const FFFWebCacheSize = 50 * 1024 * 1024;
 
 // The photo's own size in pixels, looked up by its identifier (the url after
@@ -173,8 +177,41 @@ static CGSize FFFPhotoPixelSize(NSURL *url)
 
 @end
 
+// SDWebImageSVGCoder's coder, when the app has the pod (SVG images): found at
+// runtime, so FastImage doesn't depend on it. Nil otherwise.
+static id<SDImageCoder> FFFSVGCoder;
+
 @implementation FFFastImageSource
 
++ (void)initialize
+{
+    if (self != [FFFastImageSource class]) {
+        return;
+    }
+    // Registered with SDWebImage's coders, as the pod's setup does (unless
+    // the app has already): SDWebImage then picks it for SVG data, including
+    // for FastImage's animated and downsampled image classes. Giving the
+    // coder per load instead (SDWebImageContextImageCoder) would make it the
+    // only coder for everything in that load. So the app's own SDWebImage
+    // use can decode SVG too, which is what the pod is for.
+    Class coderClass = NSClassFromString(@"SDImageSVGCoder");
+    SEL shared = NSSelectorFromString(@"sharedCoder");
+    if (!coderClass || ![coderClass respondsToSelector:shared]) {
+        return;
+    }
+    id coder = ((id (*)(id, SEL))objc_msgSend)(coderClass, shared);
+    if (![coder conformsToProtocol:@protocol(SDImageCoder)]) {
+        return;
+    }
+    FFFSVGCoder = coder;
+    for (id<SDImageCoder> registered in SDImageCodersManager.sharedManager.coders) {
+        if ([registered isKindOfClass:coderClass]) {
+            return;
+        }
+    }
+    [SDImageCodersManager.sharedManager addCoder:coder];
+}
+
 - (instancetype)initWithURL:(NSURL *)url
                    priority:(FFFPriority)priority
                     headers:(NSDictionary *)headers
@@ -216,6 +253,15 @@ static CGSize FFFPhotoPixelSize(NSURL *url)
     return 0;
 }
 
+- (NSString *)errorMessage:(NSError *)error
+{
+    if (!FFFSVGCoder && [error.domain isEqualToString:SDWebImageErrorDomain] && error.code == SDWebImageErrorBadImageData &&
+        [_url.path.lowercaseString hasSuffix:@".svg"]) {
+        return @"SVG images need SDWebImageSVGCoder: add pod 'SDWebImageSVGCoder' to the app's Podfile";
+    }
+    return FFFErrorMessage(error);
+}
+
 - (BOOL)isPhotoLibrary
 {
     return [_url.scheme isEqualToString:@"ph"];

package/ios/FastImage/FFFastImageView.m

@@ -355,6 +355,25 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
     }
 }
 
+// A vector image drawn into a bitmap, with its size in points, at a scale
+// that's sharp at the size the view shows it (or its own size before the view
+// has one).
+- (UIImage*) rasterizedImage: (UIImage*)image {
+    CGSize size = image.size;
+    if (size.width <= 0 || size.height <= 0) {
+        return image;
+    }
+    CGSize view = self.bounds.size;
+    CGFloat shown = MAX(1, MAX(view.width / size.width, view.height / size.height));
+    UIGraphicsImageRendererFormat* format = [UIGraphicsImageRendererFormat preferredFormat];
+    format.scale = (self.window.screen.scale ?: [UIScreen mainScreen].scale) * shown;
+    format.opaque = NO;
+    UIGraphicsImageRenderer* renderer = [[UIGraphicsImageRenderer alloc] initWithSize: size format: format];
+    return [renderer imageWithActions: ^(UIGraphicsImageRendererContext* context) {
+        [image drawInRect: CGRectMake(0, 0, size.width, size.height)];
+    }];
+}
+
 // Shows the image, tinted as React Native's Image does it: UIKit draws a
 // template image in the view's tintColor, so no tinted copy of the image is
 // made. SDAnimatedImageView draws the frames of an animated image itself,
@@ -382,6 +401,11 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
         if (tint) {
             if (animated) {
                 image = [UIImage imageWithCGImage: image.CGImage scale: image.scale orientation: image.imageOrientation];
+            } else if (!image.CGImage && !repeats) {
+                // A vector image (an SVG), which UIKit doesn't draw as a
+                // template: drawn into a bitmap at the size it's shown at
+                // (tiledImage: draws one for repeat).
+                image = [self rasterizedImage: image];
             }
             image = [image imageWithRenderingMode: UIImageRenderingModeAlwaysTemplate];
         }
@@ -399,6 +423,18 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
 // animated image's first frame, scaled down to fit the view if it's larger,
 // as React Native's Image does (and Android here).
 - (UIImage*) tiledImage: (UIImage*)image {
+    if (!image.CGImage && image.size.width > 0 && image.size.height > 0) {
+        // A vector image (an SVG): drawn at its own size in pixels (its width
+        // and height), as Android tiles it and as any other image's size is.
+        UIImage* vector = image;
+        UIGraphicsImageRendererFormat* format = [UIGraphicsImageRendererFormat preferredFormat];
+        format.scale = 1;
+        format.opaque = NO;
+        UIGraphicsImageRenderer* renderer = [[UIGraphicsImageRenderer alloc] initWithSize: vector.size format: format];
+        image = [[renderer imageWithActions: ^(UIGraphicsImageRendererContext* context) {
+            [vector drawInRect: CGRectMake(0, 0, vector.size.width, vector.size.height)];
+        }] imageWithRenderingMode: vector.renderingMode];
+    }
     CGImageRef cgImage = image.CGImage;
     if (!cgImage) {
         return image;
@@ -1065,7 +1101,7 @@ NSString *FFFErrorMessage(NSError *error)
                 if (error) {
                     // SDWebImage shows the placeholder (defaultSource or nothing).
                     weakSelf.showsLoadedImage = NO;
-                    [weakSelf sendOnError: FFFErrorMessage(error)];
+                    [weakSelf sendOnError: [source errorMessage: error]];
                     if (weakSelf.onFastImageLoadEnd) {
                         weakSelf.onFastImageLoadEnd([weakSelf loadEndEvent: NO]);
                     }

package/ios/FastImage/FFFastImageViewManager.m

@@ -293,7 +293,7 @@ RCT_EXPORT_METHOD(preload:(nonnull NSArray<FFFastImageSource *> *)sources
             FFFQueueLoad(source, options, [context copy], ^(UIImage *image, NSError *error) {
                 results[idx] = image
                     ? @{@"ok": @YES, @"width": @(image.size.width), @"height": @(image.size.height)}
-                    : FFFFailure(FFFErrorMessage(error));
+                    : FFFFailure([source errorMessage:error]);
                 finishOne();
             });
         }];
@@ -351,7 +351,7 @@ RCT_EXPORT_METHOD(getCachePath:(FFFastImageSource *)source
         context[SDWebImageContextStoreCacheType] = @(SDImageCacheTypeDisk);
         FFFQueueLoad(source, options, [context copy], ^(UIImage *image, NSError *error) {
             if (!image) {
-                resolve(FFFFailure(FFFErrorMessage(error)));
+                resolve(FFFFailure([source errorMessage:error]));
                 return;
             }
             FFFFindCachedFile(key, resolveFile, ^{

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "react-native-fast-image",
-    "version": "8.26.0",
-    "description": "🚩 FastImage, performant React Native image component.",
+    "version": "8.27.1",
+    "description": "FastImage, performant React Native image component.",
     "keywords": [
         "cache",
         "cached",