Origin Image Border Radius

[jawang94]

Hi there. How would we go about adding a border radius to the origin image? Seems like something with the background is preventing the entire component from inheriting the radius.

[dev-yakuza]

Hi @jawang94

Is it related to https://github.com/dev-yakuza/react-native-image-modal/issues/30#issuecomment-744408824? 🤔

Let me know you can solve your problem with the link or not!

Thanks

[jawang94]

Yeah great! I realized I needed to add those styles and remove the backgroundColor as well. Thanks!

Follow up question, I saw in another ticket there were plans to add options to adjust the speed/easing of animations. Any estimate on this?

Also, I'll try to chip in if I have time but, I think we're re-rendering the origin image with provided props after the modal is dismissed? Seems like we share the same content image component and have a boolean to determine how to display it. Once the animation finishes it seems the image re-renders with the original styles & resizeMode. Not sure how time consuming it'd be to adjust this so that dismissing the modal smoothly transitions back into the origin.

For reference, my origin resizeMode is set to cover and the modal is set to contain with variable image dimensions so this re-render is a bit noticeable. The behavior I'm looking for is similar to reddit.

THANKS for getting this library out and maintaining it! I'll try to help with some things.

[dev-yakuza]

Follow up question, I saw in another ticket there were plans to add options to adjust the speed/easing of animations. Any estimate on this?

Yes, I will implement it someday... 😭

Also, I'll try to chip in if I have time but, I think we're re-rendering the origin image with provided props after the modal is dismissed? Seems like we share the same content image component and have a boolean to determine how to display it. Once the animation finishes it seems the image re-renders with the original styles & resizeMode. Not sure how time consuming it'd be to adjust this so that dismissing the modal smoothly transitions back into the origin.

You're right. This library will create a new image with the modal and hide the original image. After modal is hidden, the original image is shown up, so the original image is rendered again.

For reference, my origin resizeMode is set to cover and the modal is set to contain with variable image dimensions so this re-render is a bit noticeable. The behavior I'm looking for is similar to reddit.

And this is a big issue in this library. However, I couldn't find a good solution to solve it 😭

I will improve this library when I have time. And If you have time, please help me and contribute to this library 🙇‍♂️

Thanks!

[approached]

Try this config:

            <ImageModal
                resizeMode="contain"
                style={{
                    height: 300,
                    width: 300,
                    borderRadius: 300,
                }}
                modalImageStyle={{
                    height: 300,
                    width: 300,
                    borderRadius: 300,
                }}