I am trying to use svg images for android in native-script. Here is my code
<StackLayout xmlns:svg="#teammaestro/nativescript-svg">
<svg:SVGImage src="~/images/app_settings.svg" height="250" width="250" /> </StackLayout>
I am using this native-script plugin . However I am not getting any error. But the images are not showing in android emulator.
Finally, I solved this issue on my side.
Firstly, I use this package from SergeyMell: nativescript-svg. Those two packages are very similar since they both forked this same package peoplewareDo/-nativescript-svg.
I moved all the SVG files from App_Ressources to an assets folder in the app folder.
Then I added this line in webpack.config.js:
{ from: '**/*.svg', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } }
Finally,
<SVGImage src="~/assets/file.svg"></SVGImage>
This answer is not a big thing but now it's working fine for my project. Some of the steps were already done and the big changes are the folders move. Perhaps Android ignores for some conditions some files from App_Resources.
I hope it'll help as it worked for me.
Related
I have a background image in src/assets folder which I try to get access to from src/screens/splash/index.js as such:
import {ImageBackground} from 'react-native';
import React from 'react';
export default function SplashScreen() {
return (
<ImageBackground
source={require('../../assets/bg1.jpg')}
resizeMode={'cover'}
style={{flex: 1}}>
</ImageBackground>
);
}
Returns this error:
None of these files exist:
bg1.jpg
src\assets\bg1.jpg\index(.native|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
If i move the image in any other folder, for example screens and change source to:
source={require('../../screens/bg1.jpg')}
its working fine.
Im baffled and wondering the reason behind it?
Is it maybe because I use react-native cli and renamed the tsx file created originally to js?
Here is a picture in case it helps understanding the problem.
After trying everyting was suggested in the comments, nothing has worked so far. I went ahead and continue building the app (following a tutorial) and re-compiled the application, now on an other computer and it started working!
The only change that I made since added the assets folder and the image that following the documentation integration-with-android-fragment I added few extra lines to MainActivity.java as suggested.
import android.os.Bundle;
and
private Bundle getLaunchOptions(String message) {
Bundle initialProperties = new Bundle();
initialProperties.putString("message", message);
return initialProperties;
}
Now im not 100% sure this was the solution to the problem, but I assume it must have been as no other changes has been made to the code since the error message appeared..
That is also possible that on my other computer it still wouldnt work, so the error is rooted somewhere within how my computer handeled these packadges. Unfortunately Im unable to test this theory for the next 2 weeks, but will share it whatever it concludes.
I am having an issue in the android emulator where my svg/icon Layers are showing as black. This sometimes effects highway/road markers as well as my map markers. The plugin is currently using the default marker, but I have also provided my own png file and they both suffer from this problem.
Sometimes zooming in will fix it (as can be seen for one of the markers in the image below)
I am yet to test this on any other device and have only been using an android emulator from android studio.
Some extra details
I am running nativescript with Angular (and TS), I have commented out any extraneous code that adds markers etc and am still having the issue on highway number markers (example below). Here is my template:
<StackLayout class="page">
<ContentView height="100%" width="100%">
<Mapbox
accessToken="token"
mapStyle="streets"
[latitude]=defaultLocation.latitude
[longitude]=defaultLocation.longitude
hideCompass="true"
zoomLevel="8"
showUserLocation="false"
disableZoom="false"
disableRotation="false"
disableScroll="false"
disableTilt="false"
(mapReady)="onMapReady($event)">
</Mapbox>
</ContentView>
</StackLayout>
It seems like I can trigger this with a call to removeMarkers and addMarkers with this code:
updateUserMarker(loc) {
console.log("updating user location marker with loc: ", loc)
this.map.removeMarkers([this.userMarker.id]);
this.userMarker.lat = loc.latitude;
this.userMarker.lng = loc.longitude;
this.map.addMarkers([this.userMarker]);
}
I had the same problem and I removed Android Studio and reinstalled and downloaded a new OS image and it seems to have fixed the problem.
Not sure you still have this issue but thought I would put this here for any new users with the issue as this was the only post I could find relating to this.
If you are running this on an emulator then make sure to go to it's settings and select the following :
OpenGL ES renderer as "SwiftShader"
OpenGL ES API Level as "Renderer maximum"
and restart the android emulator.
I am trying to use icon font FontAwesome in Nativescript application, which is possible according to this article https://www.nativescript.org/blog/mobile-app-best-practices---use-font-instead-of-image-to-show-an-icon
I did everything that is described in that article:
Added .ttf in app/fonts
Added class in app.css
.fa{
font-family: "FontAwesome";
}
Used it in XML like so
text="" class="fa"
But result is rather disappointing:
I also tried the "\uf230" syntax, but that renders as plain text.
What am I doing wrong?
Could be a few things. Does it work on iOS? As your CSS definition is iOS compatible, not Android as Android needs the actual filename (without extension) whereas iOS needs the font name. So I have this to be xplatform-ready (the file is 'fontawesome-webfont.ttf'):
.fa {
font-family: 'FontAwesome', fontawesome-webfont;
}
The \f005 syntax is OK (<Label class="fa" [text]="'\uf005'"></Label>), but I'm using the splendid nativescript-ngx-fonticon plugin (there's also a non-Angular one) to be able to do this instead:
<Label class="fa" [text]="'fa-shopping-basket' | fonticon"></Label>
To make it work, you must make sure that the "fonts" directory is inside the "app" folder and that the following files exist:
font-awesome.eot
font-awesome.ttf
I opted to adopt this font as the default of my application, so I do not have to worry about where I'm going to use it and how much to enter the right class, everything is getting very good and the result is perfect.
In CSS, you only have to define a selector according to your interest for the source to be used, so just use the directive:
page {
font-family: 'FontAwesome'
}
Then where you want an icon, just use an html entity that represents it as it searches the site: http://fontawesome.io/icons/
See images:
You can see this video where I was based to start. It corrects in the video the extension used to be attentive.
I implemented Android Bootstrap library:
https://github.com/Bearded-Hen/Android-Bootstrap
Everything works fine, but icons in buttons are not displayed.
I add font-awesome file into asset folder, but still without successful result.
How can be this solved?
Thanks for any help.
Try what it worked for me, make sure that "android-support-v4.jar" file in libs folder (assuming that you're working in eclipse) is the same copy in AndroidBootstrap library project and your project.
This might only partially solve your problem, you might have problems with the icon not displaying when you change orientation (landscape/portrait) and there might be better solution, but this is my quick fix:
in OnResume add:
if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE){
bbYourButton1.setLeftIcon("fa-heart");
bbYourButton2.setRightIcon("fa-twitter");
}
If there is a problem loading the font, you should get the reason in the log cat, as we can see in com / beardedhen / androidbootstrap / BootstrapButton.java at line 343
Log.e("BootstrapButton", "Could not get typeface because " + e.getMessage());
So, go to the logcat and see if you can understand what happened.
Anyways, the better start point is to import the AndroidBootstrapTest project and see if everything works.
Just copy fontawesome-webfont.ttf into assets folder of your project.
I am currently developing a cross platform mobile app using phonegap 2.5. When app starts it loads a json file for setting the app's language. It works perfectly in android but in ios it gets me that error: failed loading: locales/el-GR/translation.json. I tried to change the relative path for locales folder or move the current folder to other scope but neither seems to work.
WWW subfolder path
_www/
__index.html
__js/
___some js files like as main.js, cordova.js,jqmobi.min.js, i18next-1.7.1.min.js e.t.c.
__locales/
___en-US/
____translation.json
And the function i call in main.js:
i18n.init(
{
lng: AppSettings.Language.get(),
fallbackLng: 'en-US',
/* Where __lng__/__ns__.json = en-US/translation.json */
resGetPath : '/locales/__lng__/__ns__.json',
resPostPath: '/locales/__lng__/__ns__.json',
debug: true
},
function(){
}
);
In main.js i give the relative url path for loading translation.json (locales/en-US/translation.json). This works fine in android but in ios it doesn't seem to load it.
So, if you can, i could need some help.
Does iphone understand differently the relative paths of a phonegap mobile app?
What path should i give so that the app loads the translation.json?
If you need more info tell me.
Ty in advance.