Image URL not supported in react-native-svg - react-native

I'm working with the library react-native-svg: https://github.com/react-native-community/react-native-svg to clip an image with a custom shape.
This is my code:
<Svg
height="100"
width="100">
<Defs>
<ClipPath id="clip">
<Circle cx="50%" cy="50%" r="40%"/>
</ClipPath>
</Defs>
<Image
width="100%"
height="100%"
href={{uri : 'http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg'}}
clipPath="url(#clip)"/>
</Svg>
Here's the sample that I referred to: https://github.com/react-native-community/react-native-svg#image for the Image part (Note: Under SVG tag, the native-react-svg custom defined Image tag is used) but it only supports local images.
I tried to dig deeper and found that it uses a resolveAssetSource function that probably only helps it load local images. I couldn't fix it though.
Anyone got a clue on what can be done to make this work?

I recently published react-native-remote-svg package that lets you load local and remote svg images. You can directly point to actual .svg files and don't need to recreate svg in a jsx file. Please give it a try and let me know if you face any issues.

Related

SVG <LinearGradient> appears black on PDF export (PhantomJS)

In our application we generate lots of various PDFs containing SVGs, and all of them render without any issues. The only exception is this linear gradient. Is there anything wrong about this SVG?
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="476" height="227">
<defs>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#008000">
</stop>
<stop offset="50%" stop-color="#ff0000">
</stop>
<stop offset="100%" stop-color="#0000ff">
</stop>
</linearGradient>
</defs>
<rect x="17.393672215737514" y="205.945" width="122.87932223519165" height="10.055" stroke="none" stroke-width="0" fill="url(#gradient)"></rect>
</svg>
Update
As confirmed by K J the SVG is fully valid. So that must be some phantomJS rendering problem. Although I doubt that during all those years that PhantomJS is being actively used no one else faced same problem (generating PDFs containing SVGs with linear gradients seems a pretty common use case to me). PhantomJS-2.1.1 uses QtWebKit 538.1, but I wasn't able to find anyone reporting any related issues neither for phantomjs nor for qtwebkit.
Also I had a suspicion that it might be somehow related to <base> tag. I've met multiple times information about <base> tag influencing the url referencing <linearGradient> ID. But after doing some testing I came to conclusion that this is not the case, because when url is bad, my gradient element is completely blank.
I'm including this image to show my webpage against PDF output:
Nothing wrong with that SVG gradient when converted in any suitable fashion
Thus the problem must lie in the application tolerance of that input.
There are no reported open issues related to gradient, https://github.com/ariya/phantomjs/search?q=gradient&type=issues, so perhaps you need to open a fresh one with your coding method.

Button with Image Xamarin.Forms

I'm developing a cross pltform app with Xamarin.Forms. I want to make a button with an image but I dont know how to specify the path of the imge. When I use this annotation it works:
<Button Text="Naviga tra i Piani del Museo" Image="foo.png"/>
but when my image is inside some folders (folder1/folder2) the following code doesn't work:
<Button Text="Naviga tra i Piani del Museo" Image="folder1/folder2/foo.png"/>
So how can I correctly specify the path of my image?
You can't nest the images in folders. iOS and Android expect them to be resources, and WP expects them to be in the App's root folder.
The Xamarin Forms docs has a section on working with images.
Keeping the image common using PCL is a difficult task.
So do it separately.
Keep in mind that you have to copy the images to Resources>drawable in case of android project.
For using folders for Xamarin.Forms project this is what worked for me.
You need to put your resources (image file in this case), to folder inside Xamarin.Form project (for this example folder is called "Assets") and set Build Action "Content".
Secondly for resources to work with Android you need to put files to Resources>drawable folder inside Android project (here you cannot use any folders), Set Build Action "AndroidResource".
<ContentPage.Resources>
<ResourceDictionary>
<OnPlatform x:Key="StartButtonImage"
x:TypeArguments="FileImageSource"
Android="button_image.png"
WinPhone="Assets\button_image.png"
iOS="Assets/button_image.png"/>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<Grid>
<Button Image="{StaticResource StartButtonImage}" BackgroundColor="Transparent"/>
</Grid>
</ContentPage.Content>
Pay attention that for iOs you need to make path using "/" and for WinPhone/UWP using "\".
You should specify Image property of button in OnPlatform tag to give different path for each platform. This is the example of Box View, you can try the same for Button Image property.
<BoxView HorizontalOptions="Center">
<BoxView.Color>
<OnPlatform x:TypeArguments="Color"
iOS="Green"
Android="#738182"
WinPhone="Accent" />
</BoxView.Color>
<BoxView.WidthRequest>
<OnPlatform x:TypeArguments="x:Double"
iOS="30"
Android="40"
WinPhone="50" />
</BoxView.WidthRequest>
</BoxView>

Xcode - Storyboard views size and position modified when opening

I noticed something very annoying with Xcode: I have some storyboards for which certain views size & position are systematically updated when I open them. This is annoying especially when working with a team.
Here how I produce this behavior:
I pull the app from a git repository
Open an affected storyboard doing no modification at all
git diff already tells me differences like
$ git diff
...
- <rect key="frame" x="576.99999828648401" y="11" width="170" height="20"/>
+ <rect key="frame" x="577" y="11" width="170" height="20"/>
...
- <rect key="frame" x="518.99999921768904" y="7" width="228" height="30"/>
+ <rect key="frame" x="519" y="7" width="227.99999841338541" height="30"/>
Is this happening to anybody else ?
The question is:
Why is my storyboard getting modified when I'm only opening it, and how to prevent it ?
Notice:
I realized this seems to happen only on <rect /> contained into labels & textFields
Xcode saves the storyboard layout information in an XML file (.storyboard). So any changes on the storyboard will be reflecected in that XML. Especially if you work with teammates this information might change regularly. You can try it out by moving around some items (don't change anything else) and after that start a diff with your git repository. You should see again a change in the XML. You could ignore the storyboard file in your git checkout. But this wouldn't make much sense as your teammates may have added new items to the storyboard.
Maybe this helps as well: [Xcode changes unmodified storyboard and XIB files
If I understand the first answer correct other changes might also trigger a change on the storyboard XML file.
regards
Thomas
There is a bug with storyboards that nobody's looking into it seems.
Try to split the storyboards as much as possible to reduce the chances of merge conflict and ease its eventual resolution. It can also escalate if you are using Xcode on an external display with a different resolution.
This issue can only be reduced but never solved.

How to convert SVG file to XAML in windows 8 / WinRT

How i can convert SVG file to XAML in windows 8 / WinRT. I am new to this XAML / SVG environment. So anyone please help me to implement the same in windows 8. I need to parse this svg file and need to display the content in the page through code.
For me the simplest way to do it is the following:
Open your .svg file in free vector drawing tool Inkscape
Save as "Microsoft XAML (*.xaml)"
Also you may need to update the result output file a bit after conversion, since not all XAML processing engines support converting a string to Figures (as described in the accepted answer to Why does this Xaml Path crash silverlight?). So, for example, if you have this:
<Path Fill="#FFEDEDED" StrokeThickness="1" Stroke="#FFA3A3A3" Opacity="0.7"
VerticalAlignment="Center" HorizontalAlignment="Center" >
<Path.Data>
<PathGeometry Figures="m 1 2 l 4.0525 5.2361 l 4.0527 -5.2361 z "/>
</Path.Data>
</Path>
then you will need to change it to this:
<Path Fill="#FFEDEDED" StrokeThickness="1" Stroke="#FFA3A3A3" Opacity="0.7"
VerticalAlignment="Center" HorizontalAlignment="Center"
Data="m 1 2 l 4.0525 5.2361 l 4.0527 -5.2361 z" />
- OR -
You could use a bit different way to export the xaml from Inkscape, described by Tim Heuer in accepted answer to the question Convert SVG to XAML, because both ways produce different xaml output:
Method (yes, superhack):
Use Inkscape to save as PDF
Rename the Filename extension from PDF to AI
Use Expression Design to open AI document
Export to Silverlight Canvas
UPDATE (2015-08-25)
I've found my self using the second ("hack") way more and more often rather then first (more straightforward) one, because it creates more "expectable" XAML as I would call it.
I cheated and converted my SVG to a font. First, I created the SVG, then using IcoMoon created the font. https://icomoon.io/app/#/select.
I downloaded the font's ttf into my assets folder with content.
Next I add the code. Notice the font filename, then #, then the name of the font. The text should be
<TextBlock Text="" FontFamily="/Assets/icomoon.ttf#icomoon" FontSize="45"</TextBlock>
Please take a look at this article:
Transforming SVG graphics to XAML Metro Icons
You can find here a way to convert via transforming to XPS.
You can use also an Svg2Xaml converter.
There is a free converter available in the Microsoft Store (as standalone Windows application). It is called SVG to UWP XAML Converter.
It worked without any problems converting my multi-color SVGs correctly as batch to XAML, which I added to Visual Studio within a WPF User Control (for a preview you need to select the SVG file manually)

Theme-aware XAML resources in a WP7 project

I'm making a Windows Phone 7 application and I'm a bit confused with dark/light themes.
With a panorama, you very often set a background image. The issue is it's very hard to make a picture which is right for both dark and light themes. How are we supposed to proceed?
Is there a way to force a dark/light theme for a panorama? This will avoid making theme-specific panorama background pictures. Then how do I do? I found xaml files in C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Design. If this is a right way to proceed, how can I import them for my panorama?
Or if there's no way (or if it's wrong) to force a dark/light theme: how to write conditional XAML to set correct resources? Now I have the following XAML (default.xaml) which is fine with the dark theme:
<ImageBrush x:Key="PageBackground" ImageSource="Resources/PageBackground.png" Stretch="None" />
<ImageBrush x:Key="PanoramaBackground" ImageSource="Resources/PanoramaBackground.png" Stretch="None" />
But when I use a light theme, black controls and black texts are hard to read with my dark background pictures. So I made different pictures that I can use this way:
<ImageBrush x:Key="PageBackground" ImageSource="Resources/PageBackgroundLight.png" Stretch="None" />
<ImageBrush x:Key="PanoramaBackground" ImageSource="Resources/PanoramaBackgroundLight.png" Stretch="None" />
Now my issue is to make XAML conditional to declare the right thing depending on the current theme.
I found no relevant way on the Internet. I would prefer not to use code or code-behind for that because I believe XAML is able to do this (I just don't know how).
EDIT: Code snippet to load a xaml file as ResourceDictionary
string xaml = null;
StreamResourceInfo xamlInfo = Application.GetResourceStream(new Uri("light.xaml", UriKind.Relative));
using (StreamReader sr = new StreamReader(xamlInfo.Stream))
xaml = sr.ReadToEnd();
dic = (ResourceDictionary)XamlReader.Load(xaml);
this.Resources.MergedDictionaries.Add(dic);
To force a dark or white theme you can indeed use the styles defined in the folder you pointed out. Copy and Paste the rules you need to your App.xaml (just PhoneForegroundColor, PhoneBackgroundColor and the related Brushes would be a good start).
It's probably better though to stay "theme-aware" and load a different image for light and dark themes. Here is an article explaining how to do this: http://blog.jayway.com/2010/12/16/theme-aware-panorama-background-in-windows-phone-7/
There is another possibility I've found: You can use the Coding4Fun Toolkit Converter according to these instructions. However, I'm unable to use correctly use them.
Another possibiliy is to use an OpacityMask. But this only works for black/white images :/
Yousef's solution looks interesting. but it takes too much time to load. The image will be changed round about 1s after the app started. I've tested this on a Nokia 820. I've moved the call for setting the DataContext in a Loaded Event, which was called much later. Now the call takes place in the constructor, so the image will be already set when the application displays it. However, it still adds more loading time :( Any suggestions on how to improve this?