react-native-fast-image
react-native-fast-image copied to clipboard
Android not triggering onLoadEnd if image width and height is 0
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.
same issue
remove {width: 0, height: 0} works fine for me, use overlay view using position absolute
trying to use display: none
, also faced this, onLoadEnd didn't get triggered.
so switching to opacity: <condition> ? 1 : 0
on my case.