@jeremistadler/faster-image

A performant way to render images in React Native (iOS only, Android defaults to the standard component Image) with a focus on speed and memory usage. Powered by Nuke, the smallest and most performant image loading library for iOS and macOS.

The framework is lean and compiles in under 2 seconds¹. Nuke has an automated test suite 2x the size of the codebase itself, ensuring excellent reliability. Every feature is carefully designed and optimized for performance.

Features

• [x] Fast image loading
• [x] Memory and disk caching
• [x] Placeholder support:
  • [x] blurhash
  • [x] thumbhash
  • [x] Base64 encoded image
• [x] Animated transition
• [x] Failure image
• [x] Typescript support
• [x] Written in Swift

Installation

yarn add @jeremistadler/faster-image

Usage

import { FasterImageView } from '@jeremistadler/faster-image';

<FasterImageView
  rounded={true}
  onError={(event) => console.warn(event.nativeEvent.error)}
  style={{ width: 300, height: 300 }}
  thumbhash="k0oGLQaSVsJ0BVhn2oq2Z5SQUQcZ"
  cachePolicy="discNoCacheControl"
  transitionDuration={0.3}
  url="https://picsum.photos/seed/3240/4000/3000"
/>;

Props

Prop	Type	Default	Description
url	string		The URL of the image
style	object		The style of the image
resizeMode	string	contain	The resize mode of the image
thumbhash	string		The thumbhash of the image as a base64 encoded string to show while loading
blurhash	string		The blurhash of the image to show while loading
showActivityIndicator	boolean	false	Whether to show the UIActivityIndicatorView indicator when the image is loading
base64Placeholder	string		The base64 encoded placeholder image to show while the image is loading
cachePolicy	string	memory	The cache policy of the image
transitionDuration	number	0.75	The transition duration of the image
rounded	boolean	false	Round the image into a circle
failureImage	string		If the image fails to download this will be set (blurhash, thumbhash, base64)
progressiveLoadingEnabled	boolean	false	Progressively load images
onError	function		The function to call when an error occurs. The error is passed as the first argument of the function
onSucess	function		The function to call when the image is successfully loaded

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT