vivaxy / react-native-auto-height-image

🖼️React native auto height image
https://github.com/vivaxy/react-native-auto-height-image
MIT License
339 stars 76 forks source link

change Image to ImageBackgound #87

Closed SoniaComp closed 3 years ago

SoniaComp commented 3 years ago

For me, I more often used an "ImageBackground Component" than an "Image Component". Because for User interaction, I often used child components for an image background component.

So I want to suggest one tiny opinion for this repository as a junior react-native developer.

vivaxy commented 3 years ago

@SoniaComp Thank you for your suggestion and PR. It is possible to make it optional to support ImageBackgound? It could be more compatible to the older version.

SoniaComp commented 3 years ago

@vivaxy Thank you for your feedback.

To solve the issue, I add one more conditional expression in the "AnimatableImage.js". We don't need to add a property, because it checks children property.

One issue is that we can't use both animated and image background components together.

I try to solve that problem with following method.

const AnimatedComponent = animated ? Animated.View : Fragment
const ImageComponent = children ? ImageBackground : Image;

return < AnimatedComponent ><ImageComponent {...rest}>{children}</ImageComponent></AnimatedComponent>;

It works when animated is true or children exist. But when I try to use them together, it doesn't work.

So I choose to use an conditional expression.

Plus, I add an Animated example and an Image Background example in the Example App. And I apologize for ambiguous commit messages

vivaxy commented 3 years ago

@SoniaComp Could you please explain why we should use ImageBackground if children exists?

SoniaComp commented 3 years ago

@vivaxy Thank you for your question.

I think there are two methods to include children. We can position Image as absolute or use ImageBackground instead of Image. Using ImageBackground makes me easily change 'image' with user interactions.

The reason I tried to make a pull request was the following picture.

My client asked me to make 'image' change when a user click on 'image'(like images located in the middle). So I used ImageBackground instead of Image.

vivaxy commented 3 years ago

@SoniaComp Thank you for your explanation. This is a reasonable feature request. But it requires react-native@0.46(released on Jul 2017) or after that. I'll mention it on the README.md. Thank you again for the good job.

vivaxy commented 3 years ago

Released react-native-auto-height-image@3.2.4