React-native-fast-image: Preloading local images used via require() fails

[IljaDaderko]

Sometimes with even local images take a short while to load, particularly if there are many images composing full ui i.e. games.

I thought using .preload method on my local images could elevate some bottlenecks, but following errors

export default function preloadImages() {
  FastImage.preload([
    require('../assets/images/dwarf.webp')
])

Whenever I call preloadImages I receive following error

Exception '-[__NSCFNumber objectForKeyedSubscript:]: unrecognized selector sent to instance 0xf4263c55c59de1d2' was thrown while invoking preload on target FastImageView with params (
(
1
)
)

I assume this number 1 relates to me using require. Should this be supported as part of preload or is this issue irrelevant?

[IljaDaderko]

I found a small hack-around for this by doing following, not sure how I feel about it yet nor what performance implications of this method could be, but we can get uri from require by using react-native's Image.resolveAssetSource

import { Image } from 'react-native';
import FastImage from 'react-native-fast-image';

export function preloadImages() {
  const images = [
    require('../assets/images/graphic1.webp'),
    require('../assets/images/graphic2.jpg'),
    require('../assets/images/graphic3.webp')
  ];

  const uris = images.map(image => ({
    uri: Image.resolveAssetSource(image).uri
  }));

  FastImage.preload(uris);
}

You can then use <FastImage source={require('../assets/images/graphic1.webp')} /> and image is actually already preloaded. I can see good improvement in my app, memory is not spiking, so I assume it caches to disk not ram?

[IljaDaderko]

Solution above works very well for me, only wishing for a callback on preload to know when images have loaded

[cjroth]

Worked for me too! Thanks :)

[ibnubtpn]

Hi @IljaDaderko , did your solution work on Android as well? because I still can see the loading flicker when the first time the local image loaded in the component. I've also added the priority to high when FastImage.preload

[IljaDaderko]

@ibnubtpn This was a long time ago, I believe I only tested on iOS, so not sure about Android.