[Android] onLoad will never get fired when height and width is set to 0

[matinzd]

Describe the bug
onLoad will never get fired when height and width set to 0 on android

To Reproduce
Steps to reproduce the behavior if possible, or a link to a reproduction repo:

1. Set the initial value of height and width of FastImage component to zero
2. Then wait for loading
3. onLoad never get fired

Expected behavior
onLoad should get fired even with initial zero width and height.

Screenshots

Dependency versions

• React Native version: 0.66
• React version: 17
• React Native Fast Image version: 8.5.11

[demedos]

Related:

• Android auto size error, in hook #687
• Who can fix a copy of the wrong Android onload width and height #608
• android: fix onload not called #562
• No callbacks called, except onLoadStart #529
• Image size get from onLoad() event is incorrect on Android #461
• Methods don't work on Android #391

#446 should fix the issue but is open for almost 2 years now.
You can use patch-package to fix the issue until it gets merged; you just have to manually apply the changes of the PR to the node_modules/react-native-fast-image files and run
npx patch-package react-native-fast-image.
It is advised to delete the node_modules/react-native-fast-image/build folder before running patch-package to avoid generating a huge diff.

[sajin321]

thanks @demedos for specifying the fix, i have gone through the fix #446 but seems source is changed after that. applied fix of target size on view converter class , it is working fine now. tested on android 11 and 10. don't know much about its impact in other dependencies. i am attaching the code of patch file .

diff --git a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewConverter.java b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewConverter.java
index d86f66f..cfd7f60 100644
--- a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewConverter.java
+++ b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewConverter.java
@@ -16,6 +16,7 @@ import com.bumptech.glide.load.model.GlideUrl;
 import com.bumptech.glide.load.model.Headers;
 import com.bumptech.glide.load.model.LazyHeaders;
 import com.bumptech.glide.request.RequestOptions;
+import com.bumptech.glide.request.target.Target;
 import com.bumptech.glide.signature.ApplicationVersionSignature;
 import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
 import com.facebook.react.bridge.NoSuchKeyException;
@@ -108,6 +109,7 @@ class FastImageViewConverter {
 
         RequestOptions options = new RequestOptions()
             .diskCacheStrategy(diskCacheStrategy)
+            .override(Target.SIZE_ORIGINAL)
             .onlyRetrieveFromCache(onlyFromCache)
             .skipMemoryCache(skipMemoryCache)
             .priority(priority)

and i am using wrapper component like below to show the placeholder before image load

import React, { useState } from "react";
import { StyleSheet, Image } from 'react-native'
import FastImage from "react-native-fast-image";

const SmartImage = props => {

    const {
        source,
        defaultSource,
        resizeMode,
        style
    } = props


    const [imageLoaded, setImageLoaded] = useState(false);
    const [completed, setCompleted] = useState(false);
    const [showPlaceHolder, setShowPlaceHolder] = useState(true);
    const [showImage, setShowImage] = useState(true);



    const imageLoadEnd = () => {
        setCompleted(true);
        setShowPlaceHolder(false);
    }

    const imageLoad = () => {
        setImageLoaded(true);

    }

    const imageLoadError = () => {

        setShowImage(false);
    }


    return (
        <>

            {showImage && <FastImage
                onLoadEnd={imageLoadEnd}
                onLoadStart={imageLoad}
                onError={imageLoadError}
                source={source}
                resizeMode={resizeMode}
                style={completed && imageLoaded ? style : styles.hidden} />}
            {showPlaceHolder && <FastImage source={defaultSource} style={completed && imageLoaded ? styles.hidden : style} />}
        </>

    )

}

const styles = StyleSheet.create({

    hidden: {
        width: 0,
        height: 0
    }

})
export default SmartImage

[demedos]

Beware that this line makes android crash when huge images are being loaded as no compression will take place

.override(Target.SIZE_ORIGINAL)

[suwu150]

    const height = Platform.OS === 'android' ? ((e.nativeEvent?.source?.height * baseWidth) / e.nativeEvent?.source?.width) : (e.nativeEvent.height * baseWidth) / e.nativeEvent.width
    const imgStyle = {
      width: baseWidth,
      height: height || baseWidth
    };
    this.setState({ imgStyle: imgStyle })

rn 0.67.3 can be used.