question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Image iOS render wrong origin

See original GitHub issue

Image rendering on iOS seems to be not quite right.

Following code

<Svg width="100" height="100">
  <Image
    x="0"
    y="0"
    width="200"
    height="200"
    href={this.props.image}
  />
</Svg>

produces screen shot 2017-04-21 at 10 07 38

while following is expected: screen shot 2017-04-21 at 10 07 53

Setting the y property to -50, however, makes it render correctly:

<Svg width="100" height="100">
  <Image
    x="0"
    y="-50"
    width="200"
    height="200"
    href={this.props.image}
  />
</Svg>

I did not quite understand yet what is the rational of the number -50 here. The issue seems to be with the origin, the image is rendere, somehow.

On Android, everything seems to be correct.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:5
  • Comments:5

github_iconTop GitHub Comments

1reaction
lschmierercommented, Jun 6, 2018

@msand I have no idea… switched to Flutter long time ago…

0reactions
msandcommented, Oct 19, 2018

v8 has been released, this issue has likely been fixed in https://github.com/react-native-community/react-native-svg/pull/763 which is available since v7 up.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Background Image not Displaying Correctly in iOS
I am not sure this will work but the problem is while rendering the inner image its not able to render the background...
Read more >
Can't Render to ImageView from UIImagePickerController
For whatever reason, my code does not result in the rendering of a user selected photo (from his photo library) to an image...
Read more >
Images not rendering properly on ios after code-push ... - GitHub
First is a background image for a chat. It had transparency (by mistake) and for some reason it was resized incorrectly. It was...
Read more >
Images - React Native
Static Image Resources​ · Same system on Android and iOS. · Images live in the same folder as your JavaScript code. · No...
Read more >
Top 10 Ways to Fix Unable to Load Video or Photo Error on ...
So, if your iPhone is unable to load the video, wait for a while for the rendering to take place in the background...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found