react-native-fast-image 9.3.7 → 10.0.0

package/src/index.tsx

@@ -0,0 +1,1103 @@
+import React, { forwardRef, memo } from 'react'
+import {
+    ColorValue,
+    View,
+    Image,
+    StyleSheet,
+    StyleProp,
+    ViewStyle,
+    ImageRequireSource,
+    Platform,
+    AccessibilityProps,
+    ViewProps,
+} from 'react-native'
+import { cacheControl, priority, resizeMode } from './constants'
+import { fromStyle, resolveObjectFit } from './objectFit'
+import { objectPositionOrCentered, type ObjectPosition } from './objectPosition'
+import FastImageView from './specs/FastImageViewNativeComponent'
+import NativeFastImageModule from './specs/NativeFastImageModule'
+import { warnIfChildren, warnOnce } from './warnings'
+
+/** How the image fits the view: see [`objectFit`](#objectfit). */
+export type ObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+
+export type { ObjectPosition, PositionLength } from './objectPosition'
+
+/** An image's load priority: see [`source.priority`](#sourcepriority). */
+export type Priority = 'low' | 'normal' | 'high'
+
+/** How fresh an image must be: see [`source.cache`](#sourcecache). */
+export type Cache = 'immutable' | 'web' | 'cacheOnly'
+
+/** A remote image to load, and how to load and cache it. */
+export type Source = {
+    /**
+     * Remote url to load the image from. e.g. `'https://example.com/image.jpg'`.
+     *
+     * Also loads local files (`file://`, and on Android `content://`), images
+     * in the app by name (e.g. `'my_image'`: in its asset catalog on iOS, a
+     * drawable on Android), photo library images on iOS and tvOS (`ph://`,
+     * see [Photo library images](#photo-library-images-ios-and-tvos)) and SVG
+     * images (see [SVG images](docs/formats.md#svg-images)).
+     */
+    uri?: string
+    /** Headers to load the image with. e.g. `{ Authorization: 'someAuthToken' }`. */
+    headers?: { [key: string]: string }
+    /**
+     * A hint for which images to start loading first when several are
+     * waiting: `'high'` ones before `'normal'` ones, and `'low'` ones after.
+     * It's best effort, not an order: several images load at once, and when
+     * each finishes depends on its size and the network.
+     *
+     * - `'low'`: e.g. images further down a list.
+     * - `'normal'`: the default.
+     * - `'high'`: e.g. the image the screen is about.
+     *
+     * @default 'normal'
+     */
+    priority?: Priority
+    /**
+     * How fresh the image must be. See
+     * [how caching is handled](docs/how-is-caching-handled.md) for how the
+     * options fit together.
+     *
+     * - `'immutable'`: loads the image once, then shows the cached copy until
+     *   its url (or `cacheKey`) changes.
+     * - `'web'`: follows the server's HTTP cache headers, as a browser does,
+     *   checking with the server when it loads. These responses are kept in
+     *   their own HTTP cache (50 MB on each platform), which `clearDiskCache`
+     *   also clears.
+     * - `'cacheOnly'`: only shows a cached image, without making a request.
+     *
+     * @default 'immutable'
+     */
+    cache?: Cache
+    /**
+     * The key the image is cached under, instead of its uri. Use it for urls
+     * that change while the image stays the same, e.g. signed urls with a
+     * token or an expiry. Use something that identifies the image, and change
+     * it when the image changes (e.g. include a version or the time it was
+     * updated), or the old image keeps showing.
+     *
+     * Not used with `cache: 'web'`, which follows the HTTP cache (keyed by
+     * url).
+     *
+     * @example
+     * ```jsx
+     * <FastImage
+     *     source={{
+     *         uri: signedUrl,
+     *         cacheKey: `avatar-${user.id}-${user.avatarUpdatedAt}`,
+     *     }}
+     * />
+     * ```
+     */
+    cacheKey?: string
+    /**
+     * Whether the decoded image is kept in the memory cache. With `false`
+     * it's only kept on disk: a view doesn't leave it in memory once it stops
+     * showing it, and `FastImage.preload` downloads it without decoding it.
+     * Use it for large images that are shown once or rarely, like a
+     * full-screen photo: a decoded photo can take tens of MB of memory. Images
+     * shown again, like a list scrolled back, are decoded from disk again.
+     *
+     * @default true
+     */
+    memoryCache?: boolean
+    /**
+     * With several sources (`source` as an array), the image's width at this
+     * uri, in pixels (times `scale`, if given).
+     */
+    width?: number
+    /**
+     * With several sources (`source` as an array), the image's height at this
+     * uri, in pixels (times `scale`, if given).
+     */
+    height?: number
+    /** With several sources, the scale `width` and `height` are multiplied by. */
+    scale?: number
+}
+
+/** How the image fades in: see [`transition`](#transition). */
+export type Transition = {
+    /**
+     * How long the fade takes, in milliseconds; 0 means no fade. Defaults to
+     * the default transition's (see `FastImage.setDefaults`) if it fades,
+     * otherwise the platform's usual length: 300 ms on Android, 250 ms on iOS.
+     */
+    duration?: number
+    /**
+     * Also fades between images: a new `source` replacing an image that's
+     * showing cross-dissolves from it. Otherwise only an image that appears
+     * over nothing (or over `defaultSource`) fades in, and a new source
+     * replaces the image showing at once, once it has loaded.
+     * @default false
+     */
+    betweenImages?: boolean
+    /**
+     * Skips the fade for an image from a cache, so images already loaded
+     * show at once, e.g. in a list scrolled back up or a reused row.
+     *
+     * - `'memory'`: skips it for images from the memory cache.
+     * - `'all'`: skips it for images from the memory or disk cache too, so
+     *   images that download fade in, and local files and bundled images
+     *   usually only the first time (the disk cache usually keeps them too).
+     * - `'none'`: always fades.
+     *
+     * On Android, a `cache: 'web'` image from its HTTP cache, without a request,
+     * counts as one from the memory cache (these images aren't kept there).
+     * @default 'memory'
+     */
+    skipOnCacheHit?: 'none' | 'memory' | 'all' | null
+}
+
+/**
+ * `onLoad`'s event: `nativeEvent` has the image's own `width` and `height`
+ * (see `onLoad`), and `target`, the view's React tag (on iOS and Android; not
+ * on the web).
+ */
+export interface OnLoadEvent {
+    nativeEvent: {
+        width: number
+        height: number
+        target?: number
+    }
+}
+
+/**
+ * `onError`'s event: `nativeEvent.error` says what went wrong, e.g. an HTTP
+ * status code or an image that can't be decoded.
+ */
+export interface OnErrorEvent {
+    nativeEvent: {
+        error: string
+    }
+}
+
+/**
+ * A load's result, as `onLoadEnd` gets it: `ok` with the image's size, or not
+ * `ok` with the error (as `onLoad` and `onError` get them).
+ */
+export type LoadResult =
+    | { ok: true; width: number; height: number }
+    | { ok: false; error: string }
+
+/**
+ * `configureCache`'s changes: a number (0 for no limit), or `null` to go back
+ * to the app's native config (Info.plist, AndroidManifest.xml) or the
+ * platform's default. Leave one out to keep it. Changes are saved, and used on
+ * the next launches too. Android only has `maxDiskSize`.
+ */
+export interface CacheLimits {
+    /**
+     * The most bytes of images kept on disk. When it's over, the least
+     * recently used are removed (on iOS, until it's half this size). Default:
+     * no limit on iOS, 250 MB on Android.
+     */
+    maxDiskSize?: number | null
+    /**
+     * iOS: the seconds an image is kept on disk after it was last used, or 0
+     * to keep them until `maxDiskSize` removes them. Default: 1 week.
+     */
+    maxDiskAge?: number | null
+    /**
+     * iOS: the most bytes of decoded images kept in memory. Default: no limit
+     * (they're removed when the system is low on memory).
+     */
+    maxMemorySize?: number | null
+}
+
+/**
+ * `configureCache`'s result: the limits in effect (0 for no limit), and the
+ * bytes the disk cache uses now. Android only has `maxDiskSize` and
+ * `diskSize`, and neither if the app has its own `AppGlideModule` (or
+ * expo-image, which has one).
+ */
+export interface CacheState {
+    maxDiskSize?: number
+    maxDiskAge?: number
+    maxMemorySize?: number
+    /** The bytes the disk cache uses now. */
+    diskSize?: number
+}
+
+/**
+ * `getCachePath`'s and `writeToCache`'s result: `ok` with the file's path, or
+ * not `ok` with the error.
+ */
+export type CachePathResult =
+    | { ok: true; path: string }
+    | { ok: false; error: string }
+
+/**
+ * `clearMemoryCache`'s and `clearDiskCache`'s result: `ok` once the cache is
+ * cleared, or not `ok` with the error.
+ */
+export type ClearCacheResult = { ok: true } | { ok: false; error: string }
+
+/**
+ * `onProgress`'s event: `nativeEvent` has the bytes `loaded` and the `total`,
+ * and `progress`, `loaded / total` from 0 to 1.
+ */
+export interface OnProgressEvent {
+    nativeEvent: {
+        loaded: number
+        total: number
+        progress: number
+    }
+}
+
+// Extends ViewStyle rather than FlexStyle/TransformsStyle/ShadowStyleIOS, which
+// React Native's Strict TypeScript API (types_generated: opt-in from 0.80, the
+// default from 0.87) doesn't export. Only the image's own keys are added; the
+// rest (radii, opacity, colors) come from ViewStyle, so they're the app's
+// React Native types (e.g. string radii, Animated values).
+export interface ImageStyle extends ViewStyle {
+    tintColor?: ColorValue
+    objectFit?: ObjectFit
+}
+
+export interface FastImageProps extends AccessibilityProps, ViewProps {
+    /**
+     * Source for the remote image to load: a `Source`, a `require()`d image,
+     * or an array of the same image at different sizes.
+     *
+     * 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.
+     *
+     * **Several sizes of an image.** `source` can also be an array of the
+     * same image at different sizes, each with its `width` and `height` in
+     * pixels (times `scale`, if it has one). The view loads the one whose size
+     * is closest to its own, in pixels, so a small view downloads a small
+     * image:
+     *
+     * ```jsx
+     * <FastImage
+     *     style={{ width: 120, height: 120 }}
+     *     source={[
+     *         { uri: 'https://example.com/photo-200.jpg', width: 200, height: 200 },
+     *         { uri: 'https://example.com/photo-800.jpg', width: 800, height: 800 },
+     *     ]}
+     * />
+     * ```
+     *
+     * - The view picks once it has been laid out. One that has no size (e.g.
+     *   sized from `onLoad`) loads the largest.
+     * - When the view's size changes so that another size fits better, it
+     *   loads that one (with its load events), and keeps showing the current
+     *   image until then, without a `transition`.
+     * - Each size is cached separately. A `cacheKey` applies to its own entry:
+     *   give each size its own key (or none), or the sizes would replace each
+     *   other in the cache.
+     * - `FastImage.preload`, `getCachePath` and `writeToCache` take one size:
+     *   pass the one a view will show. An array fails with
+     *   `{ ok: false, error }`.
+     * - An array of one is the same as that source.
+     */
+    source?: Source | Source[] | ImageRequireSource
+    /**
+     * 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`).
+     *
+     * 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.
+     */
+    defaultSource?: ImageRequireSource
+    /**
+     * How the image fits the view, as CSS's `object-fit` does.
+     *
+     * - `'cover'`: scales it uniformly (keeping its aspect ratio) so it covers
+     *   the view (inside its borders), cropping what doesn't fit.
+     * - `'contain'`: scales it uniformly (keeping its aspect ratio) so all of
+     *   it fits in the view (inside its borders).
+     * - `'fill'`: scales its width and height separately to fill the view,
+     *   which can change its aspect ratio.
+     * - `'none'`: shows it at its own size, centered, cropped if it's larger
+     *   than the view.
+     * - `'scale-down'`: shows it at its own size, centered, or scaled down
+     *   uniformly to fit if it's larger than the view (the smaller of `'none'`
+     *   and `'contain'`).
+     *
+     * An image's own size is its size in pixels, as points (dp on Android),
+     * as CSS counts an image's pixels: a 300 × 200 image is 300 × 200 points.
+     * A bundled image (`require()`) is its size in points.
+     *
+     * It can also be set in `style`; the prop wins.
+     *
+     * @default 'cover'
+     */
+    objectFit?: ObjectFit
+    /**
+     * Where the image is in the view, as CSS's `object-position` places it:
+     * where its edges are when it doesn't fill the view exactly (`contain`,
+     * `cover`, `none` and `scale-down`; with `fill` it always fills it).
+     *
+     * - A string in CSS's syntax: one or two keywords (`'top'`,
+     *   `'left bottom'`), lengths in points (`'10px 20px'`, with `px`) or
+     *   percentages (`'25% 75%'`), or offsets from an edge
+     *   (`'right 10px bottom 20%'`). A percentage puts that point of the image
+     *   at that point of the view: `'0% 0%'` is the top-left corner,
+     *   `'100% 100%'` the bottom-right.
+     * - An object with one of `top` and `bottom` and one of `left` and
+     *   `right`, each in points (a number) or a percentage (`'25%'`), e.g.
+     *   `{ right: 10, bottom: '20%' }`. A missing axis is centered.
+     *
+     * Points are dp on Android. An invalid value is ignored (the image is
+     * centered), with a warning in development. `defaultSource` is placed
+     * the same way.
+     *
+     * @default '50% 50%'
+     * @example
+     * ```jsx
+     * <FastImage source={{ uri }} objectFit="cover" objectPosition="top" />
+     * ```
+     */
+    objectPosition?: ObjectPosition
+    /**
+     * For views that get reused for other content, such as rows in FlashList
+     * or recyclerlistview. Set it to something that identifies the content,
+     * e.g. the item's id. When it changes, the image is cleared right away (to
+     * `defaultSource`, or blank) instead of staying until the new one has
+     * loaded. Unlike changing `key`, this keeps the view, which is what list
+     * recycling is for.
+     *
+     * @example
+     * ```jsx
+     * <FastImage recyclingKey={item.id} source={{ uri: item.imageUrl }} />
+     * ```
+     */
+    recyclingKey?: string | null
+    /**
+     * How many times an animated image (GIF, animated WebP, APNG, or animated
+     * AVIF) plays:
+     *
+     * - Not set: as many times as the file says (like a browser).
+     * - `true`: forever.
+     * - `false`: once.
+     * - A number: that many times.
+     *
+     * Changing it restarts the animation.
+     */
+    loop?: boolean | number
+    /**
+     * How the image is filtered when it's drawn smaller or larger than its
+     * size (like CSS's `image-rendering`):
+     *
+     * - `'auto'`: the platform's usual filtering.
+     * - `'smooth'`: iOS only. Keeps a large image drawn much smaller than its
+     *   size (e.g. a big photo as a thumbnail, or fine lines and text) from
+     *   looking jagged or noisy. Such an image is already decoded at about the
+     *   view's size by default (see `downsample`), so this is for images shown
+     *   at less than half their size with `downsample={false}`, or a little
+     *   smaller than their size. **It uses more memory:** the image is also
+     *   kept at smaller sizes for drawing, about a third more than the decoded
+     *   image. On Android it's the same as `'auto'`.
+     * - `'pixelated'`: sharp pixels, without smoothing, e.g. for pixel art
+     *   drawn larger than its size. On Android, animated images are still
+     *   smoothed.
+     *
+     * @default 'auto'
+     */
+    imageRendering?: 'auto' | 'smooth' | 'pixelated'
+    /**
+     * Pauses an animated image (GIF, animated WebP, APNG, or animated AVIF) on
+     * the frame it's showing; `false` plays it again from there
+     * (on Android, an animated WebP or AVIF plays again from its first frame:
+     * Android can't resume one). Each image animates on its own, so pausing
+     * one doesn't pause others showing the same file.
+     */
+    paused?: boolean
+    /**
+     * Fades the image in when it loads. `true` fades for the default's
+     * duration (see `FastImage.setDefaults`), or the platform's usual length
+     * if the default doesn't fade; a number is the duration in milliseconds,
+     * `false` (or 0) is no fade, or pass a `Transition`.
+     *
+     * By default, images fade in on Android (300 ms), and not on iOS.
+     * `FastImage.setDefaults` changes that for every image; an image's own
+     * `transition` wins, and the settings it leaves out come from the
+     * default. `null` is the default.
+     *
+     * Downloads, local files (`file://`, `content://`) and bundled images
+     * (`require()`) fade in. In lists that reuse views (e.g. FlashList), set
+     * `recyclingKey`, so a reused view starts empty and its image fades in,
+     * instead of showing the previous item's image until it loads.
+     *
+     * @example
+     * ```jsx
+     * <FastImage source={{ uri }} transition />
+     * <FastImage source={{ uri }} transition={500} />
+     * <FastImage source={{ uri }} transition={{ betweenImages: true, skipOnCacheHit: 'none' }} />
+     * ```
+     */
+    transition?: boolean | number | Transition | null
+    /**
+     * Decodes a large image at about the size it's shown at, instead of at
+     * full size, so it takes much less memory.
+     *
+     * - `true`: an image at least twice the size its view needs is decoded
+     *   at about the view's size (on Android, any image larger than its
+     *   view). If the view grows, the image is decoded again for its new size
+     *   (from the disk cache).
+     * - `false`: images are decoded at full size, e.g. for an image that's
+     *   zoomed in on with a transform (a pinch-to-zoom viewer), which would
+     *   otherwise show the smaller copy enlarged. **It uses more memory:** a
+     *   12-megapixel photo takes about 48 MB decoded, however small it's
+     *   shown. On Android, an image over 16 megapixels (4096 × 4096) is
+     *   decoded at the largest size under that, which Android can still
+     *   draw.
+     *
+     * It doesn't change `onLoad`'s width and height (the image's own size) or
+     * the cached file. Photo library images are always decoded at about the
+     * view's size. Android 16 and later decode animated WebP at full size
+     * either way, and scale it as they draw it.
+     *
+     * If you control the images, serve them at the size they're shown
+     * (resized on your server or by an image CDN), which also saves
+     * bandwidth.
+     *
+     * @default true
+     */
+    downsample?: boolean
+    // The radius is converted from points to the bitmap's pixels on both
+    // platforms, so it matches React Native's Image.
+    /**
+     * Blurs the image by this radius, in points (the same radius looks about
+     * the same on iOS and Android). `0` 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.
+     *
+     * - Only the loaded image is blurred, not `defaultSource`.
+     * - An animated image (GIF, animated WebP, APNG or AVIF) shows its first frame,
+     *   blurred, and doesn't animate.
+     * - With `tintColor`, the blurred image is tinted.
+     * - The image is blurred at about the size it's shown at, off the main
+     *   thread. The cached file stays the original image, so `getCachePath`
+     *   and other views of it aren't affected.
+     * - Changing it blurs the image that's showing again, without sending the
+     *   load events again.
+     *
+     * To animate a blur, or to blur an animated image, use React Native's
+     * `filter` style instead, which the GPU draws:
+     * `style={{ filter: [{ blur: 6 }] }}`. React Native's docs list `blur` for Android 12+ only; on iOS it's behind
+     * an experimental React Native feature flag (`enableSwiftUIBasedFilters`,
+     * SwiftUI-based filters).
+     *
+     * @default 0
+     */
+    blurRadius?: number
+
+    /** Called when the image starts to load. */
+    onLoadStart?(): void
+
+    /**
+     * Called while the image downloads, with the bytes `loaded` so far, the
+     * `total`, and `progress` (`loaded / total`, from 0 to 1; the last event
+     * has 1). Not called while the total is unknown (a response without a
+     * `Content-Length`).
+     *
+     * @example
+     * ```jsx
+     * onProgress={e => console.log(e.nativeEvent.progress)}
+     * ```
+     */
+    onProgress?(event: OnProgressEvent): void
+
+    /**
+     * Called on a successful image fetch. Called with the width and height of
+     * the image itself, not of the view (on iOS, in points: an `@2x` asset
+     * reports half its pixel size).
+     *
+     * @example
+     * ```jsx
+     * onLoad={e => console.log(e.nativeEvent.width, e.nativeEvent.height)}
+     * ```
+     */
+    onLoad?(event: OnLoadEvent): void
+
+    /**
+     * Called on an image fetching error, with a message describing it (e.g.
+     * the HTTP status code). On iOS and Android, a download that gets nothing
+     * from the server for 15 seconds fails too (on Android, unless the app's
+     * OkHttp client has timeouts of its own).
+     *
+     * @example
+     * ```jsx
+     * onError={e => console.log(e.nativeEvent.error)}
+     * ```
+     */
+    onError?(event: OnErrorEvent): void
+
+    /**
+     * Called when the image finishes loading, whether it was successful or an
+     * error, with the result: `{ ok: true, width, height }` (the image's size,
+     * as `onLoad` gets it) or `{ ok: false, error }` (as `onError` gets it).
+     * TypeScript makes you check `ok` before reading the size or the error.
+     *
+     * @example
+     * ```jsx
+     * <FastImage
+     *     source={{ uri }}
+     *     onLoadEnd={(result) => {
+     *         if (result.ok) setAspectRatio(result.width / result.height)
+     *         else setFailed(result.error)
+     *     }}
+     * />
+     * ```
+     */
+    onLoadEnd?(result: LoadResult): void
+
+    /**
+     * The image's style: View's style props (`borderRadius` clips the image,
+     * and borders inset it, but padding doesn't), and `tintColor`, as with
+     * React Native's `Image` (the `tintColor` prop wins).
+     */
+    style?: StyleProp<ImageStyle>
+
+    /**
+     * If supplied, changes the color of all the non-transparent pixels to the
+     * given color.
+     */
+    tintColor?: ColorValue
+
+    /**
+     * FastImage is a single native view, which doesn't take children (since
+     * 10.0): use `FastImageBackground` for content over an image.
+     *
+     * @hidden
+     */
+    children?: "FastImage doesn't take children: use FastImageBackground for content over an image"
+}
+
+const resolveDefaultSource = (
+    defaultSource?: ImageRequireSource,
+): string | object | null => {
+    if (!defaultSource) {
+        return null
+    }
+    const resolved = Image.resolveAssetSource(defaultSource)
+    if (!resolved) {
+        return null
+    }
+    // Android takes the uri, and loads it as a Drawable with React Native's
+    // helpers; iOS the image source ({ uri, width, height, scale }).
+    return Platform.OS === 'android' ? resolved.uri : resolved
+}
+
+// The native loopCount: -1 for the file's own, 0 for forever, or a number of
+// plays. Always sent, since native would reset a removed prop to 0 (forever).
+function loopCount(loop: boolean | number | undefined) {
+    if (loop === undefined) return -1
+    if (loop === true) return 0
+    if (loop === false) return 1
+    return Number.isFinite(loop) ? Math.max(1, Math.floor(loop)) : 0
+}
+
+// onLoadEnd's result from the native event (ok with the image's size, or not
+// ok with the error).
+function loadResult(event: {
+    ok?: boolean
+    width?: number
+    height?: number
+    error?: string
+}): LoadResult {
+    return event.ok
+        ? { ok: true, width: event.width ?? 0, height: event.height ?? 0 }
+        : { ok: false, error: event.error ?? 'Failed to load the image' }
+}
+
+// The native view's handledEvents (see specs/FastImageViewNativeComponent.ts):
+// the events with a handler, which are the only ones it sends.
+function handledEvents({
+    onLoadStart,
+    onProgress,
+    onLoad,
+    onError,
+    onLoadEnd,
+}: FastImageProps) {
+    return (
+        (onLoadStart ? 1 : 0) |
+        (onProgress ? 2 : 0) |
+        (onLoad ? 4 : 0) |
+        (onError ? 8 : 0) |
+        (onLoadEnd ? 16 : 0)
+    )
+}
+
+// The platform's usual fade length: Glide's and React Native's Image's on
+// Android, Core Animation's default on iOS.
+function usualFadeMs() {
+    return Platform.OS === 'ios' ? 250 : 300
+}
+
+// The native transition props. Always sent, so removing `transition` goes
+// back to the default.
+type TransitionProps = {
+    transitionDuration: number
+    transitionBetweenImages: boolean
+    transitionSkipOnCacheHit: string
+}
+
+const NO_TRANSITION: TransitionProps = {
+    transitionDuration: 0,
+    transitionBetweenImages: false,
+    transitionSkipOnCacheHit: 'memory',
+}
+
+// A transition (an image's, or setDefaults') over `base`: the settings it
+// leaves out come from base, and null (or undefined) is base. true, or a
+// missing duration, is base's duration if it fades, otherwise the platform's
+// usual one.
+function resolveTransition(
+    transition: FastImageProps['transition'],
+    base: TransitionProps,
+): TransitionProps {
+    if (transition == null) return base
+    if (transition === false) return { ...base, transitionDuration: 0 }
+    const usual =
+        base.transitionDuration > 0 ? base.transitionDuration : usualFadeMs()
+    if (transition === true) return { ...base, transitionDuration: usual }
+    const { duration, betweenImages, skipOnCacheHit }: Transition =
+        typeof transition === 'number' ? { duration: transition } : transition
+    const resolvedDuration = duration ?? usual
+    return {
+        transitionDuration:
+            typeof resolvedDuration === 'number' && resolvedDuration > 0
+                ? resolvedDuration
+                : 0,
+        transitionBetweenImages: betweenImages ?? base.transitionBetweenImages,
+        transitionSkipOnCacheHit:
+            skipOnCacheHit ?? base.transitionSkipOnCacheHit,
+    }
+}
+
+// The built-in default: Android fades images in, as React Native's Image does;
+// iOS doesn't, as UIImageView and SDWebImage don't.
+function builtInTransition() {
+    return resolveTransition(Platform.OS === 'android', NO_TRANSITION)
+}
+
+// The default transition set with FastImage.setDefaults (undefined: the
+// built-in one).
+let defaultTransition: TransitionProps | undefined
+
+// React Native's global: true in development (Metro and React Native's Jest
+// preset set it), false in release builds.
+declare const __DEV__: boolean
+
+function FastImageBase({
+    source,
+    defaultSource,
+    tintColor,
+    onLoadStart,
+    onProgress,
+    onLoad,
+    onError,
+    onLoadEnd,
+    style,
+    children,
+    objectFit,
+    objectPosition,
+    loop,
+    transition,
+    forwardedRef,
+    ...viewProps
+}: FastImageProps & { forwardedRef: React.Ref<any> }) {
+    const {
+        fallback,
+        resizeMode: _resizeMode,
+        ...props
+    } = viewProps as typeof viewProps & {
+        // Removed in 10.0 (React Native's Image instead of FastImage's view).
+        fallback?: unknown
+        // Removed in 10.0 (objectFit instead): ignored, so it reaches no
+        // native prop.
+        resizeMode?: unknown
+    }
+    if (__DEV__ && fallback !== undefined) {
+        warnOnce(
+            'fallback',
+            "react-native-fast-image: `fallback` was removed in 10.0, and does nothing: images always load natively. Remove it, or use React Native's Image for those images.",
+            'warn',
+        )
+    }
+    // FastImage is a single native view: children aren't rendered (as with
+    // React Native's Image).
+    if (__DEV__) {
+        warnIfChildren(children)
+    }
+    // tintColor can also be set in style, as with React Native's Image. The
+    // prop wins.
+    const resolvedTintColor =
+        tintColor != null ? tintColor : fromStyle(style, 'tintColor')
+    const fit = resolveObjectFit(objectFit, style)
+    const position = objectPositionOrCentered(objectPosition)
+
+    // Several sources are picked from natively, for the view's size; one in
+    // an array is a plain source.
+    const sources = Array.isArray(source)
+        ? source.length === 1
+            ? undefined
+            : source
+        : undefined
+    const single = Array.isArray(source) ? source[0] : source
+    const resolvedSource = sources
+        ? undefined
+        : Image.resolveAssetSource(single as any)
+    const resolvedDefaultSource = resolveDefaultSource(defaultSource)
+
+    return (
+        <FastImageView
+            {...props}
+            ref={forwardedRef}
+            // Clips the image to borderRadius by default, as React Native's
+            // Image does.
+            style={[styles.image, style]}
+            // null (no key) as undefined, which the native prop takes.
+            recyclingKey={props.recyclingKey ?? undefined}
+            loopCount={loopCount(loop)}
+            {...resolveTransition(
+                transition,
+                defaultTransition ?? builtInTransition(),
+            )}
+            source={resolvedSource}
+            sources={sources}
+            defaultSource={resolvedDefaultSource}
+            onFastImageLoadStart={onLoadStart}
+            onFastImageProgress={onProgress}
+            // The native views only send the events with a handler (and only
+            // track progress with onProgress).
+            handledEvents={handledEvents({
+                onLoadStart,
+                onProgress,
+                onLoad,
+                onError,
+                onLoadEnd,
+            })}
+            onFastImageLoad={onLoad}
+            onFastImageError={onError}
+            onFastImageLoadEnd={
+                onLoadEnd &&
+                ((event: { nativeEvent: any }) =>
+                    onLoadEnd(loadResult(event.nativeEvent)))
+            }
+            // After style, whose tintColor and objectFit reach the native
+            // view's props too: these win.
+            tintColor={resolvedTintColor}
+            objectFit={fit}
+            objectPositionX={position.x.fraction}
+            objectPositionXOffset={position.x.offset}
+            objectPositionY={position.y.fraction}
+            objectPositionYOffset={position.y.offset}
+        />
+    )
+}
+
+const FastImageMemo = memo(FastImageBase)
+
+// What a ref to FastImage or FastImageBackground gets: FastImage's native
+// view, or FastImageBackground's view. Typed as a View's (they have the same
+// methods, e.g. measure). ComponentRef, as
+// React Native's types declare View as a class, and its Strict TypeScript API
+// (opt-in from 0.80, the default from 0.87) as a function component that takes
+// a ref.
+type ViewRef = React.ComponentRef<typeof View>
+
+const FastImageComponent: React.ForwardRefExoticComponent<
+    FastImageProps & React.RefAttributes<ViewRef>
+> = forwardRef((props: FastImageProps, ref: React.Ref<ViewRef>) => (
+    <FastImageMemo forwardedRef={ref} {...props} />
+))
+
+FastImageComponent.displayName = 'FastImage'
+
+/** A preloaded source that loaded (and is now cached). */
+export interface PreloadSuccess {
+    /** The source's uri. */
+    uri: string
+    ok: true
+    /** The image's width (as in `onLoad`). */
+    width: number
+    /** The image's height (as in `onLoad`). */
+    height: number
+}
+
+/** A preloaded source that failed to load. */
+export interface PreloadFailure {
+    /** The source's uri (none for a source without one, e.g. `null`). */
+    uri?: string
+    ok: false
+    /** What went wrong. */
+    error: string
+}
+
+/**
+ * `preload`'s result for a source. Check `ok` to tell which it is: e.g.
+ * `if (result.ok)` narrows it to a `PreloadSuccess`, with its size. Reading
+ * `width` or `error` without checking is a type error.
+ */
+export type PreloadResult = PreloadSuccess | PreloadFailure
+
+// A result as native sends it (without the uri).
+type NativePreloadResult =
+    | Omit<PreloadSuccess, 'uri'>
+    | Omit<PreloadFailure, 'uri'>
+
+const noResult: NativePreloadResult = { ok: false, error: 'No result' }
+
+// The native module, or an error saying why it's missing, thrown when a
+// function is called (as React Native's own optional modules do), so
+// importing FastImage works without it (Jest, Expo Go).
+function nativeModule(): NonNullable<typeof NativeFastImageModule> {
+    if (!NativeFastImageModule) {
+        throw new Error(
+            "react-native-fast-image: the native module FastImageModule isn't " +
+                'in this app. Rebuild the app after installing the package ' +
+                '(run pod install on iOS). It needs the New Architecture, and ' +
+                "isn't in Expo Go: use a development build. In Jest, mock the " +
+                'function (e.g. jest.spyOn(FastImage, "preload")).',
+        )
+    }
+    return NativeFastImageModule
+}
+
+export interface FastImageStaticProperties {
+    /**
+     * @deprecated `resizeMode` was removed in 10.0, and a `resizeMode` prop
+     * is ignored: use `objectFit` instead (`stretch` is `fill`, `center` is
+     * `scale-down`). Kept so code that reads it doesn't throw.
+     */
+    resizeMode: typeof resizeMode
+    /**
+     * @deprecated Use the strings instead, e.g. `priority: 'high'`.
+     */
+    priority: typeof priority
+    /**
+     * @deprecated Use the strings instead, e.g. `cache: 'immutable'`.
+     */
+    cacheControl: typeof cacheControl
+    preload: (sources: Source[]) => Promise<PreloadResult[]>
+    /**
+     * Removes every image from the memory cache. Resolves once it's done, or
+     * not `ok` with the error if it couldn't (Android: Glide failed to
+     * start). Never rejects.
+     */
+    clearMemoryCache: () => Promise<ClearCacheResult>
+    /**
+     * Removes every image from the disk cache, and the HTTP cache of
+     * `cache: 'web'` images. Resolves once it's done, or not `ok` with the
+     * error if it couldn't (Android: Glide failed to start). Never rejects.
+     */
+    clearDiskCache: () => Promise<ClearCacheResult>
+    /**
+     * The path of the source's downloaded file in the disk cache, downloading
+     * it first if it isn't there (without decoding it). With
+     * `cache: 'cacheOnly'`, or a `cacheKey` without a `uri`, it doesn't
+     * download. Never rejects.
+     */
+    getCachePath: (source: Source) => Promise<CachePathResult>
+    /**
+     * Stores a local image file (a `file://` uri or a path, or on Android a
+     * `content://` uri) as the source's image in the disk cache, so views and
+     * preloads of the source show it without downloading it. A source with a
+     * `cacheKey` doesn't need a `uri`. Resolves with its cached file. Doesn't
+     * replace an image that's already cached, and isn't for `cache: 'web'`
+     * sources. Never rejects.
+     */
+    writeToCache: (source: Source, file: string) => Promise<CachePathResult>
+    /**
+     * Changes the cache's limits at runtime (only those given; 0 for no
+     * limit, null to go back to the app's native config) and saves them, then
+     * resolves with the limits in effect and the disk cache's size; without
+     * limits, it only resolves with them. iOS applies changes at once.
+     * Android only has `maxDiskSize`, applied when Glide starts: at once if
+     * it hasn't started yet in this launch, otherwise from the next launch.
+     * FastImage starts it when its first view is created (before the view has
+     * a source), and for `preload`, `getCachePath`, `writeToCache`,
+     * `clearDiskCache` and `configureCache` itself, even without limits (e.g.
+     * to read the disk cache's size).
+     */
+    configureCache: (limits?: CacheLimits) => Promise<CacheState>
+    /**
+     * Changes the defaults of every image (only those given; null goes back
+     * to the built-in one). An image already showing uses a change once one
+     * of its props changes, for its next load. Not saved: call it before
+     * images render, e.g. in index.js.
+     */
+    setDefaults: (defaults: FastImageDefaults) => void
+}
+
+/** `FastImage.setDefaults`'s settings. */
+export interface FastImageDefaults {
+    /**
+     * The `transition` of images that don't set one (an image's own settings
+     * win, and those it leaves out come from this). `null` goes back to the
+     * built-in default (see `transition`).
+     */
+    transition?: boolean | number | Transition | null
+}
+
+const FastImage: React.ForwardRefExoticComponent<
+    FastImageProps & React.RefAttributes<ViewRef>
+> &
+    FastImageStaticProperties = FastImageComponent as any
+
+FastImage.cacheControl = cacheControl
+
+FastImage.priority = priority
+
+FastImage.resizeMode = resizeMode
+
+FastImage.setDefaults = ({ transition }: FastImageDefaults = {}) => {
+    if (transition === null) {
+        defaultTransition = undefined
+    } else if (transition !== undefined) {
+        defaultTransition = resolveTransition(transition, builtInTransition())
+    }
+}
+
+// preload, getCachePath and writeToCache take one source per image, not
+// several sizes of one: pick the size (e.g. the one a view will show).
+const ONE_SOURCE =
+    'Takes one source, not an array of sizes: pass the size to use'
+
+// Whether a source is an object, which native can read. Other values (null, a
+// url string, a number, an array) are sent as {}, which fails as a source
+// without a uri: native would crash reading them as a source.
+const isSourceObject = (source: unknown): source is Source =>
+    typeof source === 'object' && source !== null && !Array.isArray(source)
+
+FastImage.preload = (sources: Source[]) =>
+    // Entries that aren't source objects are sent as {}, so native results
+    // line up with the sources (iOS drops null entries). Arrays' results are
+    // replaced.
+    Promise.resolve(
+        nativeModule().preload(
+            sources.map((s) => (isSourceObject(s) ? s : {})),
+        ) as Promise<NativePreloadResult[]>,
+    ).then((results?: NativePreloadResult[]) =>
+        sources.map((source, i): PreloadResult => {
+            if (Array.isArray(source)) {
+                return { ok: false, error: ONE_SOURCE, uri: undefined }
+            }
+            const uri = isSourceObject(source) ? source.uri : undefined
+            const result = results?.[i] ?? noResult
+            if (!result.ok) return { ...result, uri }
+            // Native already fails a source without a uri.
+            return typeof uri === 'string'
+                ? { ...result, uri }
+                : { ok: false, error: 'Invalid source: no uri', uri }
+        }),
+    )
+
+FastImage.clearMemoryCache = (): Promise<ClearCacheResult> =>
+    nativeModule().clearMemoryCache() as Promise<ClearCacheResult>
+
+FastImage.clearDiskCache = (): Promise<ClearCacheResult> =>
+    nativeModule().clearDiskCache() as Promise<ClearCacheResult>
+
+FastImage.configureCache = (limits?: CacheLimits): Promise<CacheState> => {
+    // Sent as the limits to set (numbers) and the names of those to reset
+    // (null), never as null values: iOS's TurboModule leaves those out of the
+    // object it passes, so both platforms read resets from `reset`.
+    const set: { [name: string]: number } = {}
+    const reset: string[] = []
+    for (const [name, value] of Object.entries(limits ?? {})) {
+        if (value === null) reset.push(name)
+        else if (typeof value === 'number') set[name] = value
+    }
+    return nativeModule().configureCache({
+        ...set,
+        reset,
+    }) as Promise<CacheState>
+}
+
+FastImage.writeToCache = (
+    source: Source,
+    file: string,
+): Promise<CachePathResult> =>
+    Array.isArray(source)
+        ? Promise.resolve({ ok: false, error: ONE_SOURCE })
+        : Promise.resolve(
+              nativeModule().writeToCache(
+                  isSourceObject(source) ? source : {},
+                  file,
+              ) as Promise<CachePathResult>,
+          )
+
+FastImage.getCachePath = (source: Source): Promise<CachePathResult> =>
+    Array.isArray(source)
+        ? Promise.resolve({ ok: false, error: ONE_SOURCE })
+        : Promise.resolve(
+              nativeModule().getCachePath(
+                  isSourceObject(source) ? source : {},
+              ) as Promise<CachePathResult>,
+          )
+
+const styles = StyleSheet.create({
+    image: {
+        overflow: 'hidden',
+    },
+})
+
+export interface FastImageBackgroundProps extends Omit<
+    FastImageProps,
+    'style' | 'children'
+> {
+    /** The container's style; the image fills it. */
+    style?: StyleProp<ViewStyle>
+    /** The image's style. */
+    imageStyle?: StyleProp<ImageStyle>
+    /** A ref to the image (the FastImage inside). */
+    imageRef?: React.Ref<any>
+    /** Content shown on top of the image. */
+    children?: React.ReactNode
+}
+
+/**
+ * An image with content on top of it, like React Native's `ImageBackground`: a
+ * view that the image fills, with the children on top (`FastImage` is a single
+ * native view, which doesn't take children). The other props go to the image;
+ * the ref is the view's.
+ */
+export const FastImageBackground: React.ForwardRefExoticComponent<
+    FastImageBackgroundProps & React.RefAttributes<ViewRef>
+> = forwardRef(
+    (
+        {
+            style,
+            imageStyle,
+            imageRef,
+            children,
+            importantForAccessibility,
+            ...props
+        }: FastImageBackgroundProps,
+        ref: React.Ref<ViewRef>,
+    ) => (
+        <View
+            accessibilityIgnoresInvertColors
+            importantForAccessibility={importantForAccessibility}
+            style={style}
+            ref={ref}
+        >
+            <FastImageComponent
+                {...props}
+                importantForAccessibility={importantForAccessibility}
+                style={[StyleSheet.absoluteFill, imageStyle]}
+                ref={imageRef}
+            />
+            {children}
+        </View>
+    ),
+)
+
+FastImageBackground.displayName = 'FastImageBackground'
+
+export default FastImage