Placeholder if child is responsible for the progress

[deadcoder0904]

If I am using an Image wih rn-placeholder like

<Placeholder.Media 
    size={60} 
    onReady={this.state.imageReady}
    >
       <Image source={img} onLoadEnd={() => this.setState({ imageReady: true })} />
</Placeholder.Media>

then the onLoadEnd method doesn't fire as Image is not rendered yet. So how do we achieve something like this with the component inside is the one which is responsible for the fetching of the Image. I think this can be its own issue.

I did find a workaround though by using {position: 'absolute'}

<Placeholder.Media 
    size={60} 
    onReady={this.state.imageReady}
    style={{position: 'absolute'}} 
    />
<Image source={img} onLoadEnd={() => this.setState({ imageReady: true })} />

but the above mentioned looks like a hack. Not really, but still it would be helpful if this library rather than not rendering it must be just not showing like {display: 'none'}. I didn't check the source code but as onLoadEnd is not firing I think its not rendering

[mfrachet]

Thank you for providing these issue and information. I'm going to make some experiments and give you some feedbacks.

For now, I think the only solution is to do what you're actually doing.

[deadcoder0904]

Cool no problem

[mfrachet]

To encounter this problem, I though that relying on styles instead of conditional element rendering would have been a good solution. I had in mind :

• Use height and width with 0 on the parent
• Using display: none property

Because relying on height and width to 0 would have moved the element (top left corner would have been placed at the center of the expected image position, see the video), I wanted to make some modification to use display style property.

My problem is that it seems that display property breaks component lifecycle. This way, I never reach the onLoadEnd callback method. Here's a snack of the display problem, take a look at this snack

To be honest, I'm a bit stuck with this usecase ^^'...

[mfrachet]

I will close this since it's not active from a while, but keep in mind the problem.

If I find anything to help you solve this issue, I'll give you some feedbacks 😄

[EdwardOwusuAdjei]

Has this been fixed so far?

[mfrachet]

Nop 😞