chitezh / react-native-svg-image Goto Github PK

View Code? Open in Web Editor NEW

53.0 53.0 9.0 2.19 MB

Load SVG images from network; Does not work with local svgs

License: MIT License

JavaScript 100.00%

react-native svg svg-images

react-native-svg-image's People

Contributors

Stargazers

Watchers

Forkers

brentvatne expertping countable-us noodyyeung t1amat9409 tristola svengiebel

react-native-svg-image's Issues

Images size regression with React Native 0.47.0

Since we upgraded yesterday, our SVG images size has changed, see below.

Will investigate and come up with a solution.

PropTypes is undefined with React 16

React 16 is out, need to fix the PropTypes issue.

Property 'startInLoadingState'

If the property 'startInLoadingState' is set to true the SVGImage shows the ActivityIndicator like expected. Unfortunately it doesn't hide it and shows the image when finished loading.

Local SVG files

Is it possible to load a local file instead of URL? If i download the dumbbell.svg (https://fluent-panda.appspot.com.storage.googleapis.com/dumbbell.svg) file from the example in the readme and tries to load it using source={{uri: require('./dumbbell.svg')}}, I get the following error: TypeError: invalid svg.

Loading the SVG from the URL as in the example in the readme works just fine though.

RN 0.56 isn't supported

WebView require new property (originWhitelist={['*']}) to display static html:
https://facebook.github.io/react-native/docs/0.56/webview#source

Unable to show local svg image

Hello,

I am trying to load a local svg image using SVGImage tag, but it shows a faint box instead of the actual image. The same image works fine if loaded from a server url.

Can you please help me out here. I need to show local images in my application. Following is the code snippet i am working on :

<View style={{ flex: 1 }}>
        <SVGImage
          style={{ width: 80, height: 80 }}
          source={{uri:'./dumbbell.svg'}}
        />
</View>

Output:

Thanks in advance! 😄

Margin on SVG

There is a margin around the image. Already tried setting padding and margin to 0 but no success. Can you bring more insight to this issue?

version: 1.1.3
react-native-svg version: 5.1.8

eliminate extra margin

There is an extra margin when using SVGImage compared to using Image.

The following patch should fix the issue.

@@ -37,6 +37,7 @@
                 max-height: 100%;
                 margin: 0 auto;
             }
+            body { margin: 0; }
           </style>
         </head>
         <body>

Error: The file name must end with .xml or .png

I get the error,

Error: The file name must end with .xml or .png

following is the code I am using,
<SVGImage style={{ width: 30, height: 30 }} source={require('../../res/images/facebook_icon.svg')} />

How to use this component to display the SVG as a background image?

How to use this component to display the SVG as a background image?
when we use normal View container and Image component we can use some styling using absolute positioning to make it work as a background image inside the app but with your component how can I accomplish the same thing?

chitezh / react-native-svg-image Goto Github PK

react-native-svg-image's People

Contributors

Stargazers

Watchers

Forkers

react-native-svg-image's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs