Preloading local images used via require() fails

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?

[0xAsimetriq]

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?

[0xAsimetriq]

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