npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

Iโ€™ve always been into building performant and accessible sites, but lately Iโ€™ve been taking it extremely seriously. So much so that Iโ€™ve been building a tool to help me optimize and monitor the sites that I build to make sure that Iโ€™m making an attempt to offer the best experience to those who visit them. If youโ€™re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, ๐Ÿ‘‹, Iโ€™m Ryan Hefnerย  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If youโ€™re interested in other things Iโ€™m working on, follow me on Twitter or check out the open source projects Iโ€™ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soonโ€“ish.

Open Software & Tools

This site wouldnโ€™t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you ๐Ÿ™

ยฉ 2024 โ€“ย Pkg Stats / Ryan Hefner

@d11/react-native-fast-image

v8.8.1

Published

๐Ÿšฉ FastImage, performant React Native image component.

Downloads

17,315

Readme

โš ๏ธ This is a fork of react-native-fast-image. All credit goes to the original author.

FastImage

A high-performance image component for React Native, now fully optimized for the New React Native Architecture! ๐ŸŽ‰

๐Ÿš€ Whatโ€™s New?

FastImage now includes:

  • TurboModules and Fabric Renderer compatibility for enhanced performance.
  • AVIF Image Support for next-gen image formats.
  • Numerous bug fixes and performance improvements over the original repository.

๐Ÿ”ฅ Why Choose FastImage?

FastImage is a drop-in replacement for React Nativeโ€™s Image component, offering solutions for common image loading challenges like:

  • Flickering during loading
  • Cache inconsistencies
  • Slow loading from cache
  • Overall suboptimal performance

FastImage leverages SDWebImage (iOS) and Glide (Android) for native caching and high efficiency.

Version Downloads Build Status Code Coverage

Watch on GitHub Star on GitHub Tweet

โš™๏ธ Features

  • โœ… Aggressive caching for high speed.
  • โœ… Customizable authorization headers.
  • โœ… Priority-based image loading.
  • โœ… Preloading for instant display.
  • โœ… Full GIF and AVIF support.
  • โœ… Support for borderRadius.
  • โœ… Support for Fabric Renderer (v8.7.0+).
  • โœ… Support for TurboModules (v8.8.0+).

๐Ÿ“ฆ Installation

To install FastImage in your project, run:

Using yarn:

yarn add @d11/react-native-fast-image
cd ios && pod install

Or using npm:

npm install @d11/react-native-fast-image
cd ios && pod install

Note: You must be using React Native 0.60.0 or higher to use the most recent version of @d11/react-native-fast-image.

Usage Example

import FastImage from "@d11/react-native-fast-image";
import * as React from "react";

const YourImage = () => (
  <FastImage
    style={{ width: 200, height: 200 }}
    source={{
      uri: "https://unsplash.it/400/400?image=1",
      headers: { Authorization: "someAuthToken" },
      priority: FastImage.priority.normal,
    }}
    resizeMode={FastImage.resizeMode.contain}
  />
);

๐ŸŒ Already Using Glide with an AppGlideModule?

If you're already using Glide and an AppGlideModule, read this guide to ensure smooth integration.

๐Ÿ›ก๏ธ ProGuard Config

If using ProGuard, add these rules to android/app/proguard-rules.pro:

-keep public class com.dylanvann.fastimage.* {*;}
-keep public class com.dylanvann.fastimage.** {*;}
-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public class * extends com.bumptech.glide.module.AppGlideModule
-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
  **[] $VALUES;
  public *;
}

๐Ÿ“– API Documentation

Properties

| Property | Type | Description | |------------------------|----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | source | object | Source for the remote image. Accepts an object with sub-properties like uri, headers, priority, and cache. | | source.uri | string | The URL to load the image from. e.g., "https://unsplash.it/400/400?image=1". | | source.headers | object | Headers to load the image with, e.g., { Authorization: "someAuthToken" }. | | source.priority | FastImage.priority | Load priority: - FastImage.priority.low - FastImage.priority.normal (Default) - FastImage.priority.high | | source.cache | FastImage.cacheControl | Cache control: - FastImage.cacheControl.immutable (Default) - FastImage.cacheControl.web - FastImage.cacheControl.cacheOnly | | defaultSource | number | An asset loaded with require() or import. Note: on Android, defaultSource does not work in debug mode. | | resizeMode | FastImage.resizeMode | Resize mode: - FastImage.resizeMode.contain - FastImage.resizeMode.cover (Default) - FastImage.resizeMode.stretch - FastImage.resizeMode.center | | onLoadStart | function | Callback when the image starts to load. | | onProgress | (event: OnProgressEvent) => void | Callback when the image is loading, with event.nativeEvent.loaded and event.nativeEvent.total bytes. | | onLoad | (event: OnLoadEvent) => void | Callback when the image is successfully loaded, with event.nativeEvent.width and event.nativeEvent.height values. | | onError | function | Callback when an error occurs in loading the image or the source is malformed (empty or null). | | onLoadEnd | function | Callback when the image finishes loading, regardless of success or failure. | | style | ViewStyle | Style for the image component, supports borderRadius. | | fallback | boolean | If true, it will fall back to using Image. This still applies styles and layout as with FastImage. | | tintColor | number or string | Color tint for all non-transparent pixels in the image. | | testID | string | Optional ID for testing, such as with react-test-renderer. |

Static Methods

| Method | Description | |----------------------------------|----------------------------------------------------------------------------------------------------------| | FastImage.preload(sources: object[]) | Preloads images for faster display when they are rendered. Example: FastImage.preload([{ uri: "https://unsplash.it/400/400?image=1" }]). | | FastImage.clearMemoryCache(): Promise<void> | Clears all images from the memory cache. | | FastImage.clearDiskCache(): Promise<void> | Clears all images from the disk cache. |

๐Ÿ› ๏ธ Troubleshooting

If you run into issues while using this library, try the solutions in our troubleshooting guide.

๐Ÿงช Supported React Native Versions

This project aims to support the latest version of React Native, simplifying development and testing. For older versions, consider forking the repository if you require specific features or bug fixes.

๐Ÿ‘ Credits

The original idea for this module came from @vovkasmโ€™s react-native-web-image package.

Special thanks to:

  • @mobinni for help with conceptualization.
  • SDWebImage (iOS) and Glide (Android) for powerful image caching.

โš–๏ธ License

  • FastImage โ€“ MIT ยฉ DreamSportsLabs
  • SDWebImage โ€“ MIT
  • Glide โ€“ BSD, part MIT, Apache 2.0. See LICENSE for details.