react-native-fast-image icon indicating copy to clipboard operation
react-native-fast-image copied to clipboard

Android not triggering onLoadEnd if image width and height is 0

Open compojoom opened this issue 6 years ago • 3 comments

I was displaying a placeholder when the image is not yet loaded.

I'm doing something like this

{!this.state.loaded ? this.renderPlaceholder() : null}
<FastImage
            source={{uri: uri, cache: 'immutable'}}
            style={[{...size, borderRadius: 5}, this.state.loaded ? {} : {width: 0, height: 0}]}
            onLoadEnd={this.onLoadEnd.bind(this)}
          />
```

onLoadEnd I set the state of loaded to true. This works perfectly fine on iOS, but on Android the onLoadEnd event is never triggered when we have width and height of 0. So you end up with hacks to make it work on both Platform. I ended up ditching the 0 width and height and absolutely positioning the image behind the placeholder. This way you don't see a jump in the UI when the image gets loaded and the placeholder is destroyed.

compojoom avatar Nov 27 '18 09:11 compojoom

same issue

romk1n avatar Jan 17 '19 14:01 romk1n

remove {width: 0, height: 0} works fine for me, use overlay view using position absolute

empiteranga avatar Aug 03 '21 06:08 empiteranga

trying to use display: none, also faced this, onLoadEnd didn't get triggered.

so switching to opacity: <condition> ? 1 : 0 on my case.

samih-dev avatar Jul 30 '23 16:07 samih-dev