react-native-fast-image: ios: Local image not rendering

I found solution. If your image like this require('someImage.png'), you should put width and height for it with styles and it will work.

I have same issue. have any suggest to solve it?

Just use Image from react-native on IOS, my rendering issue with images was only on Android. Even with a release build.

I ctrl+f all instances of <Image …> and replaced with <FastImage …>.

It worked for all network-loaded images without any further modifications. However, local images loaded with uri (and not require) did not render at all.

Same issue here

I found solution. If your image like this require('someImage.png'), you should put width and height for it with styles and it will work.

I am passing the height/width for image container and FastImage component as well <FastImage style={imageViewStyle} source={{ uri: 'https://assets.alliedelec.com/f_auto,q_auto,c_scale,w_100/70102769.jpg', }} resizeMode={FastImage.resizeMode.contain} onError={_imageLoadFailed} onLoadEnd={_imageLoaded} height={100} width={100} /> but still not getting the image.

I’ve found that this package does not work with “required/local” images. You cannot use <FastImage src={require('myImage.png')}/> instead however, you can use your required images just using the standard image library. Since these are compiled in to the build of the application, I find there’s no loading time. Example below.

const myImage = require('someImage.png');

render() {
  return (
    <Image src={myImage} resizeMode={'cover'}/>
  );
}

If you’re downloading images from an API of some sorts, or even direct URL’s and saving them for caching purposes using something like RNFS you can use a local uri to display that image.

I like to do something like this as it works around my application.

let dirs = RNFetchBlob.fs.dirs;

RNFetchBlob.fs.ls(dirs.DocumentDir)
  .then((files) => {
    for (var i = 0; i < files.length; i++) {
      let fileName = files[i].split('.');

      if (fileName[0] === 'background') {
        window.local_background = dirs.DocumentDir + '/' + files[i];
        continue;
      }

      if (fileName[0] === 'logo') {
        window.local_logo = dirs.DocumentDir + '/' + files[i];
        continue;
      }
    }
  })

This allows me to simply call something like:

if (window.local_background.length > 0) {
  return ( 
    <FastImage style={styles.backgroundImg}
    source={
      {
        uri: window.local_background,
        priority: FastImage.priority.high,
      }
    }
    resizeMode={FastImage.resizeMode.cover}
    />
  )
} else {
  return ( 
    <Image style={styles.backgroundImg} source = {myProjectLocalImage} resizeMode = {'cover'}/>
  )
}

I hope this helps with everyones confusion about local images.