@janiscommerce/ui-native/dist/components/atoms/Image/index.js

components library for Janis app

import React, { useState } from 'react';
import Icon from '../Icon';
import { palette } from '../../../theme/palette';
import { View, StyleSheet } from 'react-native';
import FastImage from 'react-native-fast-image';
const Image = ({ source, iconProps, iconBackgroundStyle = {}, onError, ...props }) => {
    const [showPlaceholderImage, setShowPlaceholderImage] = useState(false);
    const styles = StyleSheet.create({
        iconBackground: {
            backgroundColor: palette.white.light,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
        },
    });
    const placeholderStyle = [styles.iconBackground, iconBackgroundStyle, props.style].filter(Boolean);
    const handleError = () => {
        if (onError) {
            onError();
        }
        setShowPlaceholderImage(true);
    };
    if (showPlaceholderImage || !source) {
        return (<View style={placeholderStyle}>
				<Icon name="exclamation_circle" color={palette.white.dark} size={36} {...iconProps}/>
			</View>);
    }
    return <FastImage onError={handleError} source={source} {...props}/>;
};
export default Image;