chanphiromsok / faster-image Goto Github PK

This project forked from candlefinance/faster-image

Fast image loading for React Native backed by performant native libraries.

License: MIT License

JavaScript 0.35% Ruby 0.81% C 0.02% Objective-C 0.50% Java 1.43% Kotlin 3.68% TypeScript 2.08% Objective-C++ 0.22% Swift 90.90%

faster-image's Introduction

image-demo.mp4

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

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.

Coil performs a number of optimizations including memory and disk caching, downsampling the image in memory, automatically pausing/cancelling requests, and more.

Features

Installation

yarn add @candlefinance/faster-image

Usage

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

<FasterImageView
  style={styles.image}
  onSuccess={(event) => {
    console.log(event.nativeEvent);
  }}
  onError={(event) => console.warn(event.nativeEvent.error)}
  source={{
    transitionDuration: 0.3,
    borderRadius: 50,
    cachePolicy: 'discWithCacheControl',
    showActivityIndicator: true,
    url: 'https://picsum.photos/200/200?random=1',
  }}
/>;

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 (Android not tested)
blurhash	string		The blurhash of the image to show while loading (iOS only)
showActivityIndicator	boolean	false (iOS only)	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 (iOS) Android (100)	The transition duration of the image
borderRadius	number	0	border radius of image
failureImage	string		If the image fails to download this will be set (blurhash, thumbhash, base64)
progressiveLoadingEnabled	boolean	false	Progressively load images (iOS only)
onError	function		The function to call when an error occurs. The error is passed as the first argument of the function
onSuccess	function		The function to call when the image is successfully loaded