React-native-blasted-image NPM

:rocket: BlastedImage

A simple yet powerful image component for React Native, powered by Glide (Android) and SDWebImage (iOS).

Description

Caching remote images has always been a challenge for me with the Image component in React Native. This simplified, yet powerful component, addresses that issue head-on. It offers a robust and performant mechanism for caching remote images, ensuring they're displayed quickly.Leveraging the strengths of Glide and SDWebImage, it supports both memory and disk caching for remote images. Notably, while it provides these enhanced capabilities for remote images, it seamlessly integrates with the standard React Native Image component when handling local assets.

Features

Performance: Bypasses the React Native Image component for remote images ensuring immediate and lightning-fast display of remote images.
Cross-Platform: Works on both Android (with Glide) and iOS (with SDWebImage)
Customizable: Wrapped within a View for added layout and style customization.
Robust Caching: Benefits from both memory and disk caching for maximum performance.

Installation

Using npm:

npm install react-native-blasted-image --save

Using yarn:

yarn add react-native-blasted-image

Link native packages (iOS only)

cd ios && pod install

Usage

Here's a simple example to get you started:

import BlastedImage from 'react-native-blasted-image';

<BlastedImage 
  source={{ uri: 'https://example.com/image.png' }} 
  resizeMode="cover"
  width={200}
  height={200}
  style={{ borderRadius: 10 }}
/>

Paramaters

Parameter	Type	Description	Default
`source`	`Object` or `require`	(Required) Can be an object containing a `uri` string for remote images or local images using `require`.	-
`width`	`Number`	(Optional) Specifies the width of the image. `Overrides width in style`	100
`height`	`Number`	(Optional) Specifies the height of the image. `Overrides height in style`	100
`resizeMode`	`String`	(Optional) Resize the image with one of the options: `cover` `contain` `center` `stretch`	cover
`isBackground`	`Boolean`	(Optional) Makes the image act as a container background similar to the native `ImageBackground` component	false
`fallbackSource`	`Object`	(Optional) Object containing a `uri` string for a custom error image.	-
`onLoad`	`Function`	(Optional) Callback function that gets called when the image has loaded succesfully.	-
`onError`	`Function`	(Optional) Callback function that gets called when there was an error loading the image.	-
`style`	`Object`	(Optional) Styles to be applied to the image, e.g., `{borderRadius:20}`.See View Style Props for all available styles.	-

Methods

import BlastedImage from 'react-native-blasted-image';

BlastedImage.preload([
  { uri: 'https://example.com/image1.jpg' },
  { uri: 'https://example.com/image2.jpg', skipMemoryCache: true },
]);

Method	PropType	Description
`BlastedImage.preload()`	`Array<{ uri: string, skipMemoryCache: bool }>`	Preloads remote images from an array of URIs, with the option to preload only to disk.
`BlastedImage.clearDiskCache()`	-	Clears the disk cache for all images.
`BlastedImage.clearMemoryCache()`	-	Clears the memory cache for all images.
`BlastedImage.clearAllCaches()`	-	Clears both disk and memory caches for all images.

Events

import { NativeEventEmitter, NativeModules } from 'react-native';

const BlastedImageEvents = new NativeEventEmitter(NativeModules.BlastedImage);

useEffect(() => {
  const subscription = BlastedImageEvents.addListener('BlastedEventLoaded', (data) => {
    console.log(data.message);
  });

  return () => {
    subscription.remove();
  };
}, []);

Event	Description
`BlastedEventLoaded`	Triggered when remote images are successfully loaded.
`BlastedEventClearedMemory`	Triggered when the memory cache for all images is cleared.
`BlastedEventClearedDisk`	Triggered when the disk cache for all images is cleared.
`BlastedEventClearedAll`	Triggered when both disk and memory caches for all images are cleared.

Credits

This component was created with inspiration from react-native-fast-image that also uses Glide and SDWebImage. But due to its lack of ongoing maintenance i felt the need to develop this new image component to continue providing robust and performant caching functionality.

Contributing

Contributions are welcome! If you find a bug or have a feature request, please open an issue. If you want to contribute code, please open a pull request.