How I can set placeholder image

[wdayanand]

[Fsarmento]

I have been setting placeholders like this and it works:

import { placeholder } from '../assets/images'

(...)
render() {
  const imgSource = this.props.imgUri ? { uri: this.props.imgUri } : placeholder

  return (
    <FastImage source={imgSource} style={styles.imageStyle} />
  )
}

[rendomnet]

@Fsarmento your placeholder is not correct. Placeholder must be visible unless source is not dowloaded. Or if source was not downloaded at all(because of some error or not reachable)

In original <Image component there is prop defaultImage which is working on iOS and doing what I have described above.

[Fsarmento]

Oh, I see. There is an older issue for that - #5. In the last comment there is a workaround using 2 overlapped Images.

[dlferro]

Anyone coming across this. I had done a similar wrapper to manage placeholder images as the previous comment mentions, however you'll start to hit performance issues when you're dealing with a large number of images and having to update state. I found leveraging the ImageBackground component a suitable alternative if you're dealing with non transparent images. Definitely look forward to a native solution via the library itself.

[nica0012]

Really waiting on this!

[devpascoe]

Oh for sure, would love this.

[EgidioCaprino]

This PR adds placeholder prop https://github.com/DylanVann/react-native-fast-image/pull/409

[byteab]

wrap it in a helper component

({actualSource, placeHolder}) => {
    const [source, setSource] = useState(placeHolder)
    <FastImage  source={source}. onLoadEnd={ () => setSource({uri: actualSource}) }/>
}

[muhammad786]

Seems still no support for a placeholder, following is my workaround for placeholder

<View> { loading && <MImage containerStyle={imageStyle} uri={placeholderUri} /> } <FastImage style={loading?{width:0, height:0}:imageStyle} source={uri} onLoad={()=>{ setTimeout(()=>{ setLoading(false) },100) }} resizeMode={FastImage.resizeMode.contain} /> </View>

[chramos]

Seems still no support for a placeholder, following is my workaround for placeholder

<View> { loading && <MImage containerStyle={imageStyle} uri={placeholderUri} /> } <FastImage style={loading?{width:0, height:0}:imageStyle} source={uri} onLoad={()=>{ setTimeout(()=>{ setLoading(false) },100) }} resizeMode={FastImage.resizeMode.contain} /> </View>

I did something like that but I noticed that I lost the cache feature... I mean, every time I "rerender" my component I see the placeholder and after some milliseconds I see the real image

[AJV2018]

                    <ImageBackground
                        style={styles.dp}
                        source={require('../../assets/item-img-placeholder.png')} >
                        <FastImage
                            style={styles.dp]}
                            source={{
                                uri: state.image,
                            }}
                        />
                    </ImageBackground>

[fukemy]

                    <ImageBackground
                        style={styles.dp}
                        source={require('../../assets/item-img-placeholder.png')} >
                        <FastImage
                            style={styles.dp]}
                            source={{
                                uri: state.image,
                            }}
                        />
                    </ImageBackground>

wrap inside imagebackground took more performance

[DylanVann]

This library now supports defaultSource, if that doesn't meet your needs you could try something else from this thread, like the layering solution.

[yoann84]

It's super laggy with default source with Flashlist (didn't try with flatlist)