How to set as require() within Image component? about react-native-vector-icons HOT 14 CLOSED

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.

from react-native-vector-icons.

@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?

from react-native-vector-icons.

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

from react-native-vector-icons.

@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.

from react-native-vector-icons.

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}]}}
/>

from react-native-vector-icons.

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.

from react-native-vector-icons.

Lol, I did verify it locally.

from react-native-vector-icons.

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?

from react-native-vector-icons.

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 :/

from react-native-vector-icons.

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.

from react-native-vector-icons.

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>

from react-native-vector-icons.

@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?

from react-native-vector-icons.

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.

from react-native-vector-icons.

@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.

from react-native-vector-icons.