Allow to change "container" element on Image component

[nartc]

Is your feature request related to a problem? Please Describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Sometimes I want to animate the Image component and its parent/wrapper component, I'd have to wrap the Image with another Animated.View and add animated values to the this Animated.View style props. containerStyle on the Image component refers to a normal non-animated View so adding animated value to containerStyle results in an error.

Describe the solution you'd like
A clear and concise description of what you want to happen.
Add a container prop to Image component that will receive a different component other than View. Allowing modifying the container using prop will reduce the hierarchy to the component tree.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
If a container prop doesn't cut it, allow a prop to notify the Image component that its parent should be an Animated component. However, I think this alternative approach would be bad because there is not one defactor Animation library out there. How to determine which Animated API to use would be a hassle. (or impossible)

Additional context
Add any other context or screenshots about the feature request here.

[iRoachie]

Can you use the createAnimatedComponent function from Animated to do this?

import { Animated } from 'react-native'
import { Image } from 'react-native-elements'

const AnimatedImage = Animated.createAnimatedComponent(Image);

// Use as normal animated component
<AnimatedImage />

[nartc]

@iRoachie I sure can. In face if I want to animate the Image, that’s what I have to do. But there are cases I want to animate both the Image and the Image container as well. Changing Image to AnimatedImage does not automatically change the View (parent) to AnimatedView. “containerStyle” prop is still a normal View’s StyleProps, it’s not working with animated value.

[iRoachie]

Can you explain in an example what you would animate? I don't see a use case where you would want to animate the container itself.

https://snack.expo.io/@roach_iam/amused-carrot

[nartc]

@iRoachie Yes. In my case, I want to animate the Image on scroll. If I only animate the Image height, the image will shrink. To achieve the desired behavior, I need to animate the height of the Container as well as the position (I use translateY for the Container in this case).

1. Image size pertained. Desired behavior. Animated Container's Height and TranslateY
   

<Animated.View
              style={{
                height: animatedImageHeight,
                transform: [{ translateY: animatedImageTranslateY }],
                opacity: animatedImageOpacity
              }}
            >
              <Image
                source={{ uri: getImageUri() }}
                style={{
                  width: fullWidth,
                  height: 562
                }}
                PlaceholderContent={<ActivityIndicator />}
                resizeMethod={'scale'}
                resizeMode={'stretch'}
              />
</Animated.View>

2. Position example. Animating Image's translateY
   

<AnimatedImage
              source={ { uri: getImageUri() } }
              style={ {
                width: fullWidth,
                height: 562,
                transform: [
                  { translateY: animatedImageTranslateY }
                ]
              } }
              PlaceholderContent={ <ActivityIndicator/> }
              resizeMethod={ 'scale' }
              resizeMode={ 'stretch' }
/>

I intentionally leave the height hardcoded to 562 because I don't want to shrink the image.

3. Shrink example. Animating Image's height
   

<AnimatedImage
              source={ { uri: getImageUri() } }
              style={ {
                width: fullWidth,
                height: animatedImageHeight
              } }
              PlaceholderContent={ <ActivityIndicator/> }
              resizeMethod={ 'scale' }
              resizeMode={ 'stretch' }
/>

Disclaimer: I might be doing something terribly wrong here as I am new to React Native, let along animations. So if you could point me to the right direction for this Issue to be closed without much effort, I'd gladly do so.

[nartc]

Any update on this? Apparently, my GIFs are expired. If you haven't got a chance to see them, I can update them. Let me know. Thanks

[iRoachie]

Can you update them? Sorry about that. You can actually add your gifs here in the issue. Github will upload them

[nartc]

@iRoachie I've solved the issue. Turned out it's just some animations problem on my part. Thanks for your time.