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

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. The newly added Hybrid Assets feature allows you to bundle remote assets in your build, fetching from the network only when necessary. Notably, while it provides these enhanced capabilities for remote images, it seamlessly integrates with the standard React Native Image component when handling local assets using require.

• 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.
• Hybrid Assets: Bundle remote assets within your build and only fetch from the network if assets are not included.

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

yarn add react-native-blasted-image

cd ios && pod install

npx expo install react-native-blasted-image

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 }}
/>

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

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

The Hybrid Assets feature allows you to bundle remote assets directly into your build ensuring they are available locally while still enabling network fetching when necessary. This approach can significantly reduce bandwidth usage especially if you know in advance which assets will be used when you bundle your app.

To fully utilize the Hybrid Assets feature it's important to follow the same folder structure remotely as you do locally. This makes it easier to update your project with new assets while keeping everything organized and simplify the process of integrating updates.

When using Expo you can take advantage of the automatic asset bundling feature by adding this to your app.json file and running prebuild. The bundling feature will automatically copy and reference hybrid assets from the ./assets/blasted-image/* directory on both iOS and Android platforms following the same folder structure as your remote assets.

{
  "expo": {
    "plugins": [
      "react-native-blasted-image",
      {
        "assetsPath": "/project-root/assets/blasted-image"
      }
    ]
  }
}

Note: The assetsPath property is optional. By default, it will use the path ./assets/blasted-image

npx expo prebuild

If you prefer to manage your hybrid assets manually or if you are using Bare React Native you need to do the following.

1. Copy your hybrid assets to ./android/app/src/main/assets/blasted-image/

1. Copy your hybrid assets to ./ios/Resources/blasted-image/
2. Reference your hybrid asset folder in Xcode (Resources -> blasted-image) and make sure it is included in the Build Phase.

Local files                         # Files included in your build
│
├── assets                          # Inside root directory of your project
│   │
│   ├── blasted-image               # All images in this folder are checked against the matching location on your cloud storage.
│   │
│   ├────── image_or_folder_1	 
│   ├────── image_or_folder_2        
│   └────── ...    
└── ...
	
Remote files                        # Files in the cloud, for example Firebase etc.
│
├── image_or_folder_1               # Available in hybrid assets, not downloaded
├── image_or_folder_2               # Available in hybrid assets, not downloaded
├── image_or_folder_2               # Not available in hybrid assets, download and cache
└── ...

Note: If you use manual bundling your hybrid assets should not be placed inside the root of your project directory but rather in Resources for iOS and assets for Android.

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();
  };
}, []);

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.

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.

• BlastedImage - MIT ©️ xerdnu
• SDWebImage - MIT
• Glide - BSD, part MIT and Apache 2.0. See the LICENSE file for details.