MyFastImage.js

// --------------- LIBRARIES ---------------
import React from 'react';
import { View, StyleSheet, Image } from 'react-native';
import FastImage from 'react-native-fast-image';
// --------------- ASSETS ---------------

// --------------- COMPONENT ---------------
const MyFastImage = ({
    style,
    placeholder,
    source,
    children,
    placeHolderResizeMode,
    placeholderStyle,
    resizeMode,
    onLoad,
    imageStyle,
}) => {
    return (
        <View style={[{ overflow: 'hidden' }, style]}>
            <Image
                source={placeholder}
                style={[
                    {
                        height: '100%',
                        width: '100%',
                        ...StyleSheet.absoluteFill,
                    },
                    placeholderStyle,
                ]}
                resizeMode={placeHolderResizeMode ?? 'cover'}
            />
            <FastImage
                style={
                    imageStyle
                        ? imageStyle
                        : {
                              height: '100%',
                              width: '100%',
                              justifyContent: 'center',
                              alignItems: 'center',
                          }
                }
                source={{
                    uri: source ?? 'https://',
                    priority: FastImage.priority.normal,
                    headers: {
                        jwt: global.accesskey,
                    },
                }}
                resizeMode={
                    resizeMode == 'contain'
                        ? FastImage.resizeMode.contain
                        : FastImage.resizeMode.cover
                }
                onLoad={onLoad}>
                {children}
            </FastImage>
        </View>
    );
};

export default MyFastImage;