How to set as require() within Image component?

[tgoldenberg]

I would like to use the RN doc example for a bounce effect on an <Icon/>. However, the Facebook example uses an Animated.Image component. I tried setting the source to the <Icon/> but with no luck at all. Could you give an example of how to do so?
Thanks!

[oblador]

Hi, I'd try to wrap the icon in an Animated.View instead, but if you need Animated.Image specifically for some reason you can always use Icon.getImageSource.

[tgoldenberg]

@oblador Here is a gist of how I am trying to use Icon.getImage - https://gist.github.com/tgoldenberg/5f9185111972d9d412cf. I tested to make sure the regular Icons are working, so it's a little confusing. Also, if I used the Animated.Image component, then the icon would still stay the same size, when what I want is the icon to adjust size for the bounce effect. Do you see a solution to this?

[oblador]

You are not referencing the icon you created, try source={this.state.userIcon} instead.

[tgoldenberg]

@oblador Yeah, with that change it still produces no content. I also tried having an if / else statement to make sure that an undefined value doesn't get passed as the uri, but nothing. Could you maybe post an example that works? I think it would be very useful.

[oblador]

Well you're not using your Animated.Value anywhere, try something like:

<Animated.Image
  source={this.state.userIcon}
  style={{flex: 1, width: 20, width: 20, transform: [{scale: this.state.bounceValue}]}}
/>

[tgoldenberg]

Ugh, this is frustrating, but I already did that. I modified the original file to make a brief example and must have left that part out. Sorry for not providing a good example, but I'm pretty sure I am following the other instructions. If you or someone else can get something working locally and verify, that would probably be the best way.

[oblador]

Lol, I did verify it locally.

[tgoldenberg]

So I updated the gist. I'm not even able to render the <Image> element with the uri properly. Can you tell me what I'm doing wrong? Or maybe share your own example that you verified?

[tgoldenberg]

Now I'm able to use the this.state.userIcon and access that image in my browser when I plug in the value. But still the <Image> isn't working with it as the uri. Very confused :/

[tgoldenberg]

I hope that there will be some example of this in the docs to make it clearer. I am giving up on this for now, but I hope that it gets resolved soon.

[oblador]

Dude, I'd suggest you read the docs and the examples from React Native. The absolute easiest way is to use Animated.View like I suggested:

<Animated.View style={{transform: [{scale: this.state.bounceValue}]}}>
  <Icon
    name="rocket"
    size={40}
  />
</Animated.View>

[tgoldenberg]

@oblador, Yes, the Animated.View works, but doesn't achieve what I want to achieve, which is to modify the transform of the icon. Can you please put an example using <Animated.Image />, setting the source to an Icon, that works?

[oblador]

But it does work! You need help with RN basics and it seems I can't help you realize that. This is not a bug so try SO and see if they are more pedagogic.

[tgoldenberg]

@oblador I thank you for the help. I was able to get it working by wrapping it in an Animated.View. However, I would disagree that this isn't a bug. There is no documentation in the examples for having an <Image/> component with the correct local file source, and the error messages I was getting could be experienced by anyone in the future. However, it seems that you must be frustrated from the request, so apologies from my side.