search

seekshiva / react-native-remote-svg

Adds support for loading svg images in React Native
MIT License
184 stars 71 forks source link

iOS physical device shows no SVG images, Android works #11

Open thijssmudde opened 6 years ago

thijssmudde commented 6 years ago

The iOS simulator works exactly as intended. However, the SVG images are not shown when loaded on Expo on a physical iOS device. It works on Android however.

I have a project where this error is shown: https://exp.host/@fullhdpixel/groenteboer

Test it here: https://expo.io/appetize-simulator?url=https://expo.io/@fullhdpixel/groenteboer

Usage in App

<Product source={Images.peren}/>

Here is the styled component

import styled from 'styled-components'
import normalize from '../Helpers/normalizeSize'

export const Product = styled.Image`
  flex: 1;
  width: null;
  height: ${normalize(130)}px;
  width: 100%;
`

Images.js

peren: require('../Assets/Images/Products/peren.png'),

rahulpatel commented 5 years ago

👍 on this, I'm seeing the same issue.

@fullhdpixel did you find the cause of this?

ismnoiet commented 5 years ago

@rahulpatel I'm experiencing the same issue, I think it is because the image is imported from another file, here is an example:

// images.js
export default {
  MY_IMAGE: require('../path_to_svg_image'),
};

// MyComponent.js
import { MY_IMAGE } from '../config/images';
// ...
<Image source={MY_IMAGE} /> // this won't work
<Image source={require('../path_to_svg_image')} /> // this will work
vatichild commented 3 years ago

put <meta name="viewport" content="width=device-width, initial-scale=1"> between <head></head> in node_modules/react-native-remote-svg/SvgImage.js

nrajiv84 commented 1 year ago

put <meta name="viewport" content="width=device-width, initial-scale=1"> between <head></head> in node_modules/react-native-remote-svg/SvgImage.js

@Vatia13 For running in local we can manually add in node modules. But how could we achieve this in staging environments and production ?

melnikovkolya commented 4 months ago

@vatichild Thank you very much for this fix.

Do you plan to make a pull request with this change?