Monsieur Zartosht

Monsieur Zartosht

Who am I?

A very simple blog that belongs to a very simple full-stack web developer about his daily life and struggles through coding. here you will find many things such as music, movies, and code (lots of codes!)


What I write about


Recent Posts

Make placeholder for images in react-native

When using ReactNative for making a mobile app sometimes it is good to have a placeholder (or loading) for online images. In React for showing an online image there is no way to know if loading of that image failed.

Table of contents

    When using ReactNative for making a mobile app sometimes it is good to have a placeholder (or loading) for online images. In React to showing an online image, there is no way to know if the loading of that image failed.

    Placeholder for online images

    For making that create an HOC (Higher Order Component). I named it ImageWithLoader.

    import React     from "react";
    import { Image } from "react-native";
    
    class ImageWithLoader extends React.PureComponent {
        constructor(props) {
            super(props);
    
            this.state = {
                uri: undefined
            };
        }
    
        componentDidMount() {
            Image.prefetch(this.props.source.uri).then(() => {
                this.setState({
                    uri: this.props.source.uri
                });
            }).catch((error) => {
                this.setState({
                    uri: false
                });
            });
        }
    
        render() {
            const {style = {},
                onLoadStart = () => {},
                onLoadEnd = () => {}, onLoad = () => {},
                onError = () => {},
                resizeMethod = "auto",
                resizeMode = "center"
            } = this.props;
    
            return (
                <Image source={(() => {
                        if (this.state.uri === undefined) {
                            return require("PATH_TO_LOADER");
                        }
    
                        if (this.state.uri === false) {
                            return require("PATH_TO_PLACEHOLDER");
                        }
    
                        return {uri: this.state.uri}
                })()} style={style}
                       resizeMode={resizeMode}
                       resizeMethod={resizeMethod}
                       onLoadStart={onLoadStart}
                       onLoadEnd={onLoadEnd}
                       onLoad={onLoad}
                       onError={onError}/>
            );
        }
    }
    
    export default ImageWithLoader;

    In this component, I created a state with uri, and in componentDidMount the image URI will be prefetched. If it fails to show an image and while trying shows a loader! Simple as that.

    Now for using this component, all you have to do is this:

    return (
        <ImageWithLoader source={{uri: `URI`}}
               style={{
                   width: WIDTH,
                   height: HEIGHT
               }}
               resizeMethod={"scale"} resizeMode={"cover"}/>
    )

    VoilĂ !


    Posted in Front-end , Javascript , React , ReactNative on by

    Share this post: