Dynamically rotate an image?

I have an image that represents a compass pointer, and I’d like to rotate that image based on an app/data variable - basically indicating current wind direction. Anybody work out how to do this? I’ve tried transforms and it doesn’t work, and even if I did, I don’t know that I can tie it to an app/data variable.


Hi Chris, sorry for the long response time! You can make the transform on the Style tab by putting in the angle in degrees, for example “20deg”. However, as you noticed, the value is unfortunately not currently bindable to a variable. If you’d like, you can file a feature request here.

Hi Chris,
same issue here - did you already file a request?

Hi - well, I thought I did but I can’t locate the issue now.

So, it turns out that the SVG component is working as loosely described in the (i) hints - but only when previewed on iOS or Android.

If you preview in browser (Chrome), the svg component renders the SVG image, but updates to app/page variables do not change the SVG as expected, and javascript console sees complaints about the $placeholder tokens in the SVG XML. This is what led me to think that I didn’t understand the documentation of the component (which could use more detail to be honest).

So, if you’d like, I can open an Issue ticket for svg component preview not working in browser - if that helps?

Thanks for the quick response - your solution with coding the svg transformation by hand seems reasonable - unfortunately I have to dig into svg details as well :expressionless: didn’t expect that…
would be nice if one could set the rotation of an image to a variable instead of hardcoded values.

Oh - sorry - missed a step - yes, I wasn’t able to rotate a png via stylesheet, but I was able (sort of) to use the Dynamic SVG Component to accomplish the task. There are online svg converters that will take png to svg with varying degrees of success. (ie. https://www.pngtosvg.com/ seemed to yield the best results so far)

Then I was able to use that svg xml in the component, added a transform to rotate($angle,[x-center],[y-center]) to the svg source, and associate a dynamic parameter via an app variable.

My comment above is relating to the fact that while the dynamic svg component works for the purpose, it doesn’t work correctly for me when previewing in browser, only in the mobile app preview.

1 Like

Thank you very much!
I didn’t mention your last sentence - took me 30 minutes :laughing:
important stuff:
it doesn’t work correctly when previewing in browser, only in the mobile app preview.

right now it doesn’t take the coordinates of the rotation point, seems to rotate at the 0,0 Point - however this is probably another issue

Ya - me too - I had some issues trying to combine scale and rotation, along with rotation point - I wasn’t sure if I was doing it wrong (lack of documentation) or component isn’t 100% working. Was unclear. If you want to open an issue, I’ll vote for it. :slight_smile:

I would, if I could access the bug tracker :sweat_smile:
Screenshot from 2021-02-19 21-04-04

1 Like

Hi! Are you still unable to create the ticket? I can create one for you if it’s really still not working if you give some details about what you’d like it to entail :slight_smile:

I was able to submit a bug report…


1 Like

Hi, sorry for the late response - it has to do with the name - you are not allowed to have the term “appguyver” in your name - otherwise you will not be able to login to the bugtracker
pls. see: Cannot register on https://tracker.appgyver.com - #5 by asd_appguyver

1 Like

Hi ! Please , could someone show a simple example on how to configure this component to draw and show a rectangle or any other draw ?
It said that the strings in GitHub - react-native-svg/react-native-svg: SVG library for React Native, React Native Web, and plain are valid but when I copy and paste some examples from this website inside the Dynamic Values , SVG XML field there is no changes and no image . I’m surely doing something wrong. But Instead just give me the answer I believe if someone send an example I will take a look, study and understand.
My goal is to draw a rectangle that will represent a recipient where some amount of vegetable oil will be stored depending on how much “ml” of oil the user select :
Code text code | WTOOLS
I use the editor https://editor.method.ac/ to this draw .
The svg_3" height value will dynamically changes as the user changes the value giving impression that the oil is filling the recipient . Only this value will change.
Thanks for any idea or support