peoplewaredo / nativescript-svg Goto Github PK

View Code? Open in Web Editor NEW

70.0 70.0 55.0 4.52 MB

Nativescript plugin - support for .SVG file format

License: Other

Ruby 0.46% TypeScript 52.21% HTML 0.52% CSS 1.19% JavaScript 45.62%

nativescript-svg's People

Contributors

Stargazers

Watchers

nativescript-svg's Issues

Ns 3, Angular 4, webpack

Hi again,

I am trying to make this work with NS 3, Angular 4 and Webpack AOT. But there are so many issues I have not idea what is wrong.

Running npm run start-android-bundle --aot --display-error-details (as per http://docs.nativescript.org/angular/tooling/bundling-with-webpack.html) throws an error:

ERROR in ../~/nativescript-svg/svg.common.js
Module not found: Error: Can't resolve 'ui/core/proxy' in 'C:\Users\dvdbrk\Native app\node_modules\nativescript-svg'
@ ../~/nativescript-svg/svg.common.js 8:12-36
@ ../~/nativescript-svg/svg.android.js
@ ./app.component.ts
@ ./app.component.ngfactory.ts
@ ./app.module.ngfactory.ts
@ ./main.aot.ts`

Is Ns 3 supported? Is webpack supported? Any ideas how to fix this?

Error: -[SVGKImage _isResizable]: unrecognized selector sent to instance 0x7be887a0

When I run the demo app from the repo on iOS emulator (iPhone 5s iOS 9.3) in debug or livesync modes I get the error: Error: -[SVGKImage _isResizable]: unrecognized selector sent to instance 0x7be887a0

Rendering Fails Silently in Nativescript Angular 6 using CLI

I'm able to get this library to load the SVGs as described in typescript, but it never renders in home.component.tns.html

I've confirmed that all svg resources (and jpgs and pngs) are migrating successfully to platforms under ios/(displayname)/app/images

<StackLayout  xmlns:svg="nativescript-svg">
    <SVGImage src="~/images/nativescript.svg" height="100" width="100"></SVGImage>
    <Image src="~/images/nativescript.svg"  height="100" width="100"></Image>
    <svg:SVGImage src="https://media4.giphy.com/media/3uyIgVxP1qAjS/200.svg" height="200" />
</StackLayout>

background?

Hi,

Is it possible to load the SVG as a background of a container (StackLayout, etc.) in NativeScript via an .scss file from /resources/?

Thank you!

Could not load view for: SVGImage.Error: Could not find module '../'

I'm getting the following error when using nativescript-svg with nativescript 3.3.0 and typescript 2.4.2:

Could not load view for: SVGImage.Error: Could not find module '../'

Switch to a maintained, more complete Android library

First, thank you for your contributions to the OSS world! I have a small request:

The android library you are wrapping (svg-android) has not been updated in 5 years and has never accepted a single PR - most would consider it dead. It is also missing much of the core SVG functionality (see: pents90/svg-android#12) such as simple gradients.

I would suggest looking at the possibility of moving to a supported and nearly feature complete option such as: https://github.com/BigBadaboom/androidsvg

I'm sure there are other options, but this one has over 300 commits and looks to be actively maintained. It also appears to support nearly all of the SVG spec, other than filters.

Thank you for your time!

Cannot set src as URL

Nativescript / Typescript / Android

I am able to display SVG's in my app if the SVG file is located somewhere in my project. However, if I try to get an SVG to display from a URL then I am getting an error.

I made sure to have this in my Android Manifest file:
<uses-permission android:name="android.permission.INTERNET"/>

Here is the code in my XML file:

<Page
    xmlns="http://schemas.nativescript.org/tns.xsd"
    xmlns:svg="nativescript-svg"
    >

    <FlexboxLayout>

        <!-- This works -->
        <svg:SVGImage src='~/images/nativescript.svg' />


        <!-- This gives the error below -->
        <svg:SVGImage src='https://svgshare.com/i/KRC.svg' />

        <!-- This also gives the error below -->
        <svg:SVGImage src='https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/basura.svg' />

    </FlexboxLayout>
</Page>

Error:

JS: Error during navigation: Error: Building UI from XML. @views/app-info/app-info.xml:13:9
JS:  > definition.fromUrl(...).then is not a function

Here is the StackTrace:

System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method run failed
System.err: Error: Building UI from XML. @./views/app-info/app-info.xml:13:9
System.err:  > definition.fromUrl(...).then is not a function
System.err:
System.err: StackTrace:
System.err: ScopeError(file: node_modules\@nativescript\core\utils\debug.js:63:0)
System.err:     at SourceError(file: node_modules\@nativescript\core\utils\debug.js:74:0)
System.err:     at (file: node_modules\@nativescript\core\ui\builder\builder.js:224:0)
System.err:     at (file: node_modules\@nativescript\core\ui\builder\builder.js:202:0)
System.err:     at (file: node_modules\@nativescript\core\xml\xml.js:146:0)
System.err:     at push.../node_modules/@nativescript/core/js-libs/easysax/easysax.js.EasySAXParser.parse(file: node_modules\@nativescript\core\js-libs\easysax\easysax.js:751:0)
System.err:     at push.../node_modules/@nativescript/core/xml/xml.js.XmlParser.parse(file: node_modules\@nativescript\core\xml\xml.js:193:0)
System.err:     at push.../node_modules/@nativescript/core/ui/builder/builder.js.XmlStringParser.parse(file: node_modules\@nativescript\core\ui\builder\builder.js:208:0)
System.err:     at parseInternal(file: node_modules\@nativescript\core\ui\builder\builder.js:170:0)
System.err:     at loadInternal(file: node_modules\@nativescript\core\ui\builder\builder.js:97:0)
System.err:     at push.../node_modules/@nativescript/core/ui/builder/builder.js.Builder.createViewFromEntry(file: node_modules\@nativescript\core\ui\builder\builder.js:37:0)
System.err:     at push.../node_modules/@nativescript/core/ui/frame/frame-common.js.FrameBase.replacePage(file: node_modules\@nativescript\core\ui\frame\frame-common.js:541:0)
System.err:     at push.../node_modules/@nativescript/core/ui/frame/frame-common.js.FrameBase._handleLivesync(file: node_modules\@nativescript\core\ui\frame\frame-common.js:508:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view/view-common.js.ViewCommon._onLivesync(file: node_modules\@nativescript\core\ui\core\view\view-common.js:135:0)
System.err:     at push.../node_modules/@nativescript/core/ui/frame/frame-common.js.FrameBase._onLivesync(file: node_modules\@nativescript\core\ui\frame\frame-common.js:493:0)
System.err:     at (file: node_modules\@nativescript\core\ui\core\view\view-common.js:140:0)
System.err:     at push.../node_modules/nativescript-ui-sidedrawer/ui-sidedrawer.common.js.RadSideDrawer.eachChildView(file: node_modules\nativescript-ui-sidedrawer\ui-sidedrawer.common.js:145:0)
System.err:     at push.../node_modules/@nativescript/core/ui/core/view/view-common.js.ViewCommon._onLivesync(file: node_modules\@nativescript\core\ui\core\view\view-common.js:139:0)
System.err:     at push.../node_modules/@nativescript/core/ui/frame/frame.js.Frame.reloadPage(file: node_modules\@nativescript\core\ui\frame\frame.android.js:73:0)
System.err:     at livesync(file: node_modules\@nativescript\core\application\application-common.js:81:0)
System.err:     at __onLiveSync(file: node_modules\@nativescript\core\application\application.android.js:205:0)
System.err:     at (file: app\app.ts:32:21)
System.err:     at invoke(file: node_modules\@nativescript\core\timer\timer.android.js:20:30)
System.err:     at run(file: node_modules\@nativescript\core\timer\timer.android.js:24:0)
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1286)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:1173)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1160)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1138)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1134)
System.err:     at com.tns.gen.java.lang.Runnable.run(Runnable.java:17)
System.err:     at android.os.Handler.handleCallback(Handler.java:789)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:98)
System.err:     at android.os.Looper.loop(Looper.java:164)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:6541)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)
JS: >>> Application Error: UncaughtErrorEvent: Error: Calling js method run failed
JS: Error: Building UI from XML. @./views/app-info/app-info.xml:13:9
JS:  > definition.fromUrl(...).then is not a function Event: UncaughtErrorEvent

IOS: svg not displayed when its container is not visible on screen

Say I have a container (menu / stackLayout) with visibility:collapsed.
If this container contains a SVGImage, the SVG will be displayed on Android but not on IOS (and it will require a src change to start showing)

Support of animated SVG

Hello @victorsosa

Can you please update us on this project status. Are you still working on the version 1.6 ?
I am sure most of them are waiting for the ability to use animated SVG Files in NS as we do in the Web.

I really hope that you still maintain this project otherwise, please let us know how to use animated SVG.

Thanks a lot,

Nicolas

"not a Doxygen trailing comment" when building for iOS

After adding nativescript-svg to my project, I started to get this error. How can I fix this?

/Users/murat.corlu/works/bilibu/platforms/ios/Pods/SVGKit/Source/Parsers/SVGKParseResult.h:20:59: warning:
      not a Doxygen trailing comment [-Wdocumentation]
@property(nonatomic,strong) SVGSVGElement* rootOfSVGTree; /*< both are ...
                                                          ^~~
                                                          /**<
/Users/murat.corlu/works/bilibu/platforms/ios/Pods/SVGKit/Source/Parsers/SVGKParseResult.h:21:58: warning:
      not a Doxygen trailing comment [-Wdocumentation]
@property(nonatomic,strong) SVGDocument* parsedDocument; /*< both are n...
                                                         ^~~
                                                         /**<
6 warnings generated.
** BUILD FAILED **

Aspect Ratio Ignored in iOS

Is there any way to enforce aspect ratio in iOS? At present, the nativescript.svg stretches to fill the width of the container and height, completely ignoring both viewbox and preserveaspectratio parameters.

SVG is not displayed on Android

HI ,
I add this plugin at my project , but SVG is not displayed on Android
this plugin Works well on ios.
Not even a demo version

SVG Image frm URL throws with android.os.NetworkOnMainThreadException

When I try to load online SVG file it throws an error.
Code used:

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:svg="nativescript-svg" loaded="pageLoaded">
  <StackLayout>
    <svg:SVGImage src="https://media4.giphy.com/media/3uyIgVxP1qAjS/200.svg" height="200" />
  </StackLayout> 
</Page>

Error throw:

java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.footballApp/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: 
Calling js method onCreate failed

Error: Building UI from XML. @file:///app/main-page.xml:42:5
    android.os.NetworkOnMainThreadException
      android.os.StrictMode$AndroidBlockGuardPolicy.onNetwork(StrictMode.java:1273)
    java.net.InetAddress.lookupHostByName(InetAddress.java:431)
    java.net.InetAddress.getAllByNameImpl(InetAddress.java:252)
    java.net.InetAddress.getAllByName(InetAddress.java:215)
    com.android.okhttp.internal.Network$1.resolveInetAddresses(Network.java:29)
    com.android.okhttp.internal.http.RouteSelector.resetNextInetSocketAddress(RouteSelector.java:188)
    com.android.okhttp.internal.http.RouteSelector.nextProxy(RouteSelector.java:157)
    com.android.okhttp.internal.http.RouteSelector.next(RouteSelector.java:100)
    com.android.okhttp.internal.http.HttpEngine.createNextConnection(HttpEngine.java:357)
    com.android

RuntimeException when loading importing in Vue app

In my app.js file I have:

import Vue from 'nativescript-vue';
import * as Svg from "nativescript-svg";

but it fails as soon as I add the import with this error:

System.err: java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: 
System.err: Error calling module function 
System.err: Error calling module function 
System.err: Error calling module function 
System.err: TypeError: Cannot read property 'extend' of undefined
System.err: File: "/data/data/myproject/files/internal/ts_helpers.js, line: 63, column: 13
System.err: StackTrace: 
System.err:     Frame: function:'__extends', file:'/data/data/myproject/files/internal/ts_helpers.js', line: 63, column: 14
System.err:     Frame: function:'', file:'file:///data/data/myproject/files/app/tns_modules/nativescript-svg/svg.js', line: 130, column: 5
System.err:     Frame: function:'', file:'file:///data/data/myproject/files/app/tns_modules/nativescript-svg/svg.js', line: 150, column: 2
System.err:     Frame: function:'require', file:'', line: 1, column: 266
System.err:     Frame: function:'', file:'file:///data/data/myproject/files/app/tns_modules/nativescript-svg/svg.common.js', line: 6, column: 18
System.err:     Frame: function:'require', file:'', line: 1, column: 266
System.err:     Frame: function:'', file:'file:///data/data/myproject/files/app/app.js', line: 34767, column: 18
System.err:     Frame: function:'__webpack_require__', file:'file:///data/data/myproject/files/app/app.js', line: 47, column: 30
System.err:     Frame: function:'', file:'file:///data/data/myproject/files/app/app.js', line: 34612, column: 14
System.err:     Frame: function:'__webpack_require__', file:'file:///data/data/myproject/files/app/app.js', line: 47, column: 30
System.err:     Frame: function:'Object.defineProperty.value', file:'file:///data/data/myproject/files/app/app.js', line: 24592, column: 24
System.err:     Frame: function:'__webpack_require__', file:'file:///data/data/myproject/files/app/app.js', line: 47, column: 30
System.err:     Frame: function:'', file:'file:///data/data/myproject/files/app/app.js', line: 19225, column: 18
System.err:     Frame: function:'__webpack_require__', file:'file:///data/data/myproject/files/app/app.js', line: 47, column: 30
System.err:     Frame: function:'', file:'file:///data/data/myproject/files/app/app.js', line: 102, column: 18
System.err:     Frame: function:'', file:'file:///data/data/myproject/files/app/app.js', line: 105, column: 10
System.err:     Frame: function:'require', file:'', line: 1, column: 266
System.err: TypeError: Cannot read property 'extend' of undefined
System.err: File: "<unknown>, line: 1, column: 265

Not sure if that's something related to webpack ("webpack": "^3.12.0")
The version of "nativescript-vue": "^2.0.0",

Thanks in advance.

Cannot set size

My loaded SVG file is shown stretched, so I wanted to set the widht and height of the view manually, but it seems it's not supported.
There is only a getter for width and height properties but no setter:

Object.defineProperty(ImageSourceSVG.prototype, "width", {
        get: function () {
            if (this.nativeView) {
                return this.nativeView.size.width;
            }
            return NaN;
        },
        enumerable: true,
        configurable: true
    });

Failed to find module: "nativescript-svg", relative to: /app/tns_modules/

Hi i would like to use the plugin but it failed constantly.

is there a sample app to test it?

Nicky

nativescript-svg will it work for typeScript

hi team

can you please tell me how to include the SVG image in the typescript after installing the plugin

tns plugin add nativescript-svg

and also tried to include the below code in the HTML but it doesn't work

StackLayout>
        <Image src="~/images/1.svg" stretch ="none" />    
  </StackLayout>

It would be great if you help me with this

It's not display svg with angular,typescript

I used it in my app.module.ts like this:
import { registerElement } from "nativescript-angular/element-registry"; registerElement("SvgImage", () => require("nativescript-svg").SVGImage);
and here is html:
<SvgImage src="~/static/avatar_default_chat.svg"></SvgImage>
Is any place I did wrong?
by the way , my tns --version is 5.0
Would u like tell me how to fix it, thanks very much.

Failed to find module: "ui/core/proxy"

hi
error with svg
java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.mobileapp/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Failed to find module: "ui/core/proxy", relative to: app/tns_modules/

iOS ERROR TypeError: UIDevice.currentDevice is not a function

Xcode 8.1

To reproduce:
clone the repo, start demo

Cannot read property 'svgandroid' of undefined

I am using the angular implementation but it throws an error when the app starts. I write this in the constructor to test things out

var svgFile = new ImageSourceSVGModule.ImageSourceSVG();

        var url = 'https://css-tricks.com/wp-content/uploads/2015/05/kiwi.svg';
        var loaded = svgFile.loadFromUrl(url);        

        if(loaded){
            alert("object loaded");
        } else {
            alert("error");
        }

Any ideas?

Fatal error came while building after adding the svg plugin.

Iam developing ios and android application using nativescript-angular.Fatal error came while building the project in ios.
The error is:

Users/admin/Documents/Transapp-03-04-2019/trunk/Mobile Frontend/transapp/platforms/ios/internal/main.m:8:10: error: 'TNSExceptionHandler.h' file not found with <angled> include; use "quotes"
      instead
#include <TNSExceptionHandler.h>
         ^~~~~~~~~~~~~~~~~~~~~~~
         "TNSExceptionHandler.h"
/Users/admin/Documents/Transapp-03-04-2019/trunk/Mobile Frontend/transapp/platforms/ios/internal/main.m:11:10: error: 'TNSDebugging.h' file not found with <angled> include; use "quotes"
      instead
#include <TNSDebugging.h>
         ^~~~~~~~~~~~~~~~
         "TNSDebugging.h"
/Users/admin/Documents/Transapp-03-04-2019/trunk/Mobile Frontend/transapp/platforms/ios/internal/main.m:12:10: fatal error: 'TKLiveSync.h' file not found
#include <TKLiveSync.h>
         ^~~~~~~~~~~~~~
3 errors generated.
note: Using new build systemnote: Planning buildnote: Constructing build description
** ARCHIVE FAILED **

```  How to fix the issue?

TypeError: Could not load view for: SVGImage

Hi, I tested demo-angular and it runs but the svg is not showed. The console shows this message:

TypeError: Could not load view for: SVGImage.Error: com.tns.NativeScriptException: Failed to find module: "../", relative to: app/tns_modules/nativescript-svg/angular/

Could not load view for SVGImage

Could not load view for: SVGImage.Error: com.tns.NativeScriptException: Failed to find module: "../", relative to: app/tns_modules/nativescript-svg/angular/ is the error thrown at me when trying to use your plugin with angular. Trace leads to /angular/nativescript-svg-module.ts's require("../").SVGImage statement requiring a non-existent file.
Is there anything I can be doing wrong?

TypeError: undefined is not a function (near '...definition.fromUrl(value).then...')

Did anyone get the following error before? I have no idea what the problem is …

In this case svg is a valid URL to an existing SVG.

CONSOLE LOG file:///app/tns_modules/@angular/core/bundles/core.umd.js:3194:24: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
CONSOLE ERROR [native code]: ERROR TypeError: undefined is not a function (near '...definition.fromUrl(value).then...')
CONSOLE ERROR [native code]: ERROR CONTEXT {
"view": {
"def": {
"nodeFlags": 33734657,
"rootNodeFlags": 33554433,
"nodeMatchedQueries": 0,
"flags": 0,
"nodes": [
{
"nodeIndex": 0,
"parent": null,
"renderParent": null,
"bindingIndex": 0,
"outputIndex": 0,
"checkIndex": 0,
"flags": 33554433,
"childFlags": 180225,
"directChildFlags": 49153,
"childMatchedQueries": 0,
"matchedQueries": {},
"matchedQueryIds": 0,
"references": {},
"ngContentIndex": null,
"childCount": 3,
"bindings": [],
"bindingFlags": 0,
"outputs": [],
"element": {
"ns": "",
"name": "ActionBar",
"attrs": [
[
"",
"class",
"action-bar"
],
[
"",
"title",

I'm using the following versions: [email protected], [email protected] and [email protected]

Please let me know, when you need further details.

Thanks and best,
Chris

not working in nativescript 7

On upgrading to nativescript 7 (and getting over many other problems), SVGImage does not seem to be compatible with the new version.
Or maybe it's only the vue-js wrapper? Which I have registered with

Vue.registerElement('SVGImage', () => require('@jnorkus/nativescript-svg').SVGImage);

Exception output on startup:

JS: {NSVue (Vue: 2.6.12 | NSVue: 2.8.1)} -> CreateElement(svgimage)
JS: TypeError: Class constructor View cannot be invoked without 'new'
JS: [Vue warn]: Error in nextTick: "TypeError: Cannot read property '$scopedSlots' of undefined"
System.err: An uncaught Exception occurred on "main" thread.
System.err: Unable to start activity ComponentInfo{com.my.domain/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onCreate failed
System.err: TypeError: Cannot read property 'setAttribute' of undefined
System.err:
System.err: StackTrace:
System.err: java.lang.RuntimeException: Unable to start activity ComponentInfo{com.loytec.lweb804/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onCreate failed
System.err: TypeError: Cannot read property 'setAttribute' of undefined
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3114)
System.err:     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3257)
System.err:     at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:78)
System.err:     at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:108)
System.err:     at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:68)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1948)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:106)
System.err:     at android.os.Looper.loop(Looper.java:214)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:7050)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:494)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:965)
System.err: Caused by: com.tns.NativeScriptException: Calling js method onCreate failed
System.err: TypeError: Cannot read property 'setAttribute' of undefined
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1302)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:1188)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1175)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1153)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1149)
System.err:     at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:29)
System.err:     at android.app.Activity.performCreate(Activity.java:7327)
System.err:     at android.app.Activity.performCreate(Activity.java:7318)
System.err:     at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1271)
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3094)
System.err:     ... 11 more

Note: I'm using the plugin-version from @jnorkus, but looking at the repository tree, I suspect all will have the same problem.

Angular7 Android doesn't work

Is that plugin compactible with newest angular (7) and nativeScript (5) ?

I have created a new angular template project with nativescript CLI, added this plugin and I can't force it work, in general I have problem with path to file source, but using the same path for png file it's fine

By default with angular shared code project we should put all resources in src/assets

<StackLayout class="page">
   <SVGImage src="~/assets/images/nativescript.svg" height="100" width="100"></SVGImage>
</StackLayout>

JS: ERROR Error: java.io.FileNotFoundException: /data/data/org.nativescript.nowy/files/app/assets/images/nativescript.svg (No such file or directory)

I tried as well images folder in root of src, in app folder and so on... :

<StackLayout class="page">
   <SVGImage src="~/images/nativescript.svg" height="100" width="100"></SVGImage>
</StackLayout>

JS: ERROR Error: java.io.FileNotFoundException: /data/data/org.nativescript.nowy/files/app/images/nativescript.svg (No such file or directory)

I tried to use platform resources folder:

<StackLayout class="page">
    <SVGImage src="res://nativescript.svg" height="100" width="100"></SVGImage>
</StackLayout>

then no error but no image as well, even in official githab version with angular 4

When trying to load external resources:

<StackLayout class="page">
    <SVGImage src="https://svgshare.com/i/BjR.svg" height="100" width="100"></SVGImage>
</StackLayout>

JS: ERROR Error: Cannot convert object to Ljava/lang/String; at index 0

AOT: Unexpected value 'NativeScriptSvgModule'. Please add a @NgModule annotation.

I am getting this error when building with AOT option.

ERROR in : Unexpected value 'NativeScriptSvgModule in /Users/jnorkus/code/secret-app/node_modules/@teammaestro/nativescript-svg/angular/nativescript-svg-module.d.ts' imported by the module 'SecretModule in /Users/jnorkus/code/secret-app/app/pages/home/secret/secret.module.ts'. Please add a @NgModule annotation.

System.err: remove failed: EACCESS

Hello,

I'm trying to use this module but just by requiring the package the app is broken.

var ImageSourceSVGModule = require("nativescript-svg");

After adding that line anywhere in my app I get the following:

System.err: remove failed: EACCES (Permission denied): data/local/tmp/org.my.app/sync/tns_modules/nativescript-svg

It obviously is saying there is no permissions to do something into that directory not sure what is trying to do, or if I need to enable something? I don't see anything related in the documentation.

I really would appreciate if you provide with some directions.

Regards
Jon

Using with an Angular2 NativeScript project

Hi there,

This project looks great, but I can't figure out how to use it in an Angular2 NativeScript project.

I use this in my component:

    registerElement("Svg", () => require("nativescript-svg").SVGImageElement);

And this in my component HTML:

<Svg src="https://css-tricks.com/wp-content/uploads/2015/05/kiwi.svg" width="100" height="100"></Svg>

But nothing loads - am I doing something wrong?

I have also tried

registerElement("Svg", () => require("nativescript-svg").SVGImage);

Any help would be much appreciated, and thank you for the project!

Cheers,
Josh

Styling SVG with css - Is it possible ?

Hello,

Do you think there's any chance we can style the svg from css within nativescript ?

Thank you !

SVGImage from URL throws 'Cannot convert object to java/lang/String'

Hi,

trying to load an SVG from URL by using the Tag in View, I get the type conversion error (see image and full stack log). As seen in image, the response to be parsed as SVG is actually a Promise.

type_error.txt

Can't build demo

I don't seem to be able to build the demo app on Mac. Running the following in the demo folder results in a build error:

$ tns build ios

$ tns run ios

iOS

The following build commands failed:
	CompileC /Users/daniel_rochelle/Library/Developer/Xcode/DerivedData/demo-gysnbxxljfxegdfoslhyhbuzhvly/Build/Intermediates/Pods.build/Debug-iphonesimulator/SVGKit.build/Objects-normal/i386/CAShapeLayerWithHitTest.o SVGKit/Source/QuartzCore\ additions/CAShapeLayerWithHitTest.m normal i386 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)

Android:

* Where:
Build file '/Users/daniel_rochelle/Documents/GitHub/repos/nativescript-svg/demo/platforms/android/build.gradle' line: 705

* What went wrong:
Execution failed for task ':myMergeDex'.
> Multiple dex files define Lcom/tns/NativeScriptApplication;

I've also tried $ npm install before building with the same result.

Any ideas? Thanks

OSX: 10.11.6
XCode: 8.2.1
┌──────────────────┬─────────────────┬────────────────┬──────────────────┐
│ Component        │ Current version │ Latest version │ Information      │
│ nativescript     │ 2.4.2           │ 2.4.2          │ Up to date       │
│ tns-core-modules │ 2.0.1           │ 2.4.4          │ Update available │
│ tns-android      │ 2.0.0           │ 2.4.1          │ Update available │
│ tns-ios          │ 2.4.0           │ 2.4.0          │ Up to date       │
└──────────────────┴─────────────────┴────────────────┴──────────────────┘

After further testing it seems I am also unable to build a basic app using the official NativeScript Hello World Template after installing this plugin.

Same error as above.

Do you have support for nativescript-vue?

Hello, I was wondering if this plugin is supported on nativescript-vue. I have tried to register it as a plugin https://nativescript-vue.org/en/docs/getting-started/nativescript-plugins/ however it did not work, it always throw a module not found error.

Module not found: Error: Can't resolve 'nativescript-svg' in '/Users/ricardoorellana/Documents/native_script_projects/castle-mobile/src' @ ./src/main.js 29:9-36

Unable to find a target named `demo-App`

[!] Unable to find a target named demo-App, did find ....
Processing node_modules failed. Error: Command pod failed with exit code 1

Get this on "tns build ios".

nativescript-svg: 1.1.4
tns 2.5.4
tns-core-modules: 2.5.2
tns-ios: 2.5.0
Xcode: 8.2.1

Has this project been abandoned?

Hi @victorsosa,

are you still maintaining this project? As far I can see, you have the only SVG NativeScript plugin. It would be a shame to see it die.

Weird PodFile after installing

When I use this add this plugin with tns add plugin, my PodFile now becomes:

Notice the use_frameworks! twice

use_frameworks!

target "nativescriptapp" do
# Begin Podfile - /Users/dolan/tube-map-live/nativescript-app/node_modules/nativescript-svg/platforms/ios/Podfile
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

  use_frameworks!    

	pod 'SVGKit', :git => 'https://github.com/SVGKit/SVGKit.git', :branch => '2.x'


# End Podfile

# Begin Podfile - /Users/dolan/tube-map-live/nativescript-app/node_modules/nativescript-plugin-firebase/platforms/ios/Podfile
platform :ios, '9.0'

pod 'Firebase/Core', '~> 5.15.0'

# Authentication
pod 'Firebase/Auth'

# Realtime DB
#pod 'Firebase/Database'

# Cloud Firestore (sticking to 0.14 for now because of build error - see https://github.com/firebase/firebase-ios-sdk/issues/2177)
pod 'FirebaseFirestore', '~> 0.14.0'

# Remote Config
#pod 'Firebase/RemoteConfig'

# Performance Monitoring
#pod 'Firebase/Performance'

# Crash Reporting
#pod 'Firebase/Crash'

# Crashlytics
#pod 'Fabric'
#pod 'Crashlytics'


# Firebase Cloud Messaging (FCM)
#pod 'Firebase/Messaging'

# Firebase Cloud Storage
#pod 'Firebase/Storage'

# Firebase Cloud Functions
#pod 'Firebase/Functions'

# AdMob
#pod 'Firebase/AdMob'

# Invites
#pod 'Firebase/Invites'

# Dynamic Links
#pod 'Firebase/DynamicLinks'

# ML Kit
#pod 'Firebase/MLVision'
#pod 'Firebase/MLVisionTextModel'
#pod 'Firebase/MLVisionBarcodeModel'
#pod 'Firebase/MLVisionFaceModel'
#pod 'Firebase/MLVisionLabelModel'
#pod 'Firebase/MLModelInterpreter'

# Facebook Authentication
pod 'FBSDKCoreKit', '~> 4.38.0'
pod 'FBSDKLoginKit', '~> 4.38.0'

# Google Authentication
pod 'GoogleSignIn'
# End Podfile
end

missing angular TS files in npm package

Angular SVGDirective not working when using with typescript. Because the files below is not available in npm package. When I copy these files from GIT project, Angular directive works fine. Can you please add these TS files to npm package?

nativescript-svg-directives.ts
nativescript-svg-module.ts

nativescript-svg breaks nativescript-plugin-firebase

I have a project that uses nativescript-plugin-firebase and when I added nativescript-svg as a dependency to my project, builds starts to fail immediately with this error:

/Users/murat.corlu/works/bilibu/platforms/ios/Pods/FirebaseFirestore/Firestore/core/src/firebase/firestore/model/document.h:20:10: fatal error:
      'Firestore/core/src/firebase/firestore/model/field_path.h' file not found
#include "Firestore/core/src/firebase/firestore/model/field_path.h"
         ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1 warning and 1 error generated.
** BUILD FAILED **

If I remove nativescript-svg it works again. Do you have any suggestion?

NativeScript Vue integration

How to use this plugin for the nativescript-vue?

Using this plugin with Angular flavor of nativescript

Hi i'm trying to use this plugin with angular flavor of nativescript, but unfortunately it doesn't work.

this is how i imported the SVGImage:

import { registerElement } from "nativescript-angular/element-registry";
registerElement("SvgImage", () => require("nativescript-svg").SVGImage);

error trace:

EXCEPTION: Uncaught (in promise): Error: Error in ...page.component.html:11:3 caused by: Could not load view for: SvgImage.TypeError: Cannot read property 'id' of undefined
ORIGINAL STACKTRACE:
Error: Uncaught (in promise): Error: Error in ...page.component.html:11:3 caused by: Could not load view for: SvgImage.TypeError: Cannot read property 'id' of undefined

if i have some time i will try to understand the error and make a PR, but i can't right now

Issue with the path

I think the path is incorrect: require("../").SVGImage

nativescript-svg/src/angular/nativescript-svg-module.ts

Line 12 in a87237b

registerElement("SVGImage", () => require("../").SVGImage);

What do you think to use require("../svg").SVGImage instead?
Thanks in advance

Change Path Color of SVG

Hi there,

Thanks for creating a great package, I have successfully got the base functionality operational.

One issue that I've encountered is changing the default black path of my SVG image to something different like green.

Typically in CSS you would use the fill declaration to change the color of the SVG path but in Nativescript-Vue this declaration doesn't seem to work.

Any insight into how to change the path color of an SVG inside a Nativescript application would be greatly appreciated.

Not working with tns 3.3.0 - CocoaLumberjack/Classes/DDOSLogger error

I'm using Xcode 9.1, tns 3.3.0 and it breaks on build with following:

...
Installing CocoaLumberjack (3.2.0)
Using PocketSocket (1.0.1)
Installing SVGKit (2.0.1)
Generating Pods project
Integrating client project
Sending stats
Pod installation complete! There are 2 dependencies from the Podfile and 3 total pods installed.
[WARNING]: [!] Automatically assigning platform ios with version 8.0 on target nogoshmobile because no platform was specified. Please specify a platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`.
Project successfully prepared (iOS)
Building project...
Xcode build...
/Users/damirdjordjev/nogosh-workspace/nogosh-mobile/platforms/ios/Pods/CocoaLumberjack/Classes/DDOSLogger.m:19:8: warning: 'DDOSLogger' is partial: introduced in iOS 10.0 [-Wunguarded-availability]
static DDOSLogger *sharedInstance;
       ^
In file included from /Users/damirdjordjev/nogosh-workspace/nogosh-mobile/platforms/ios/Pods/CocoaLumberjack/Classes/DDOSLogger.m:16:
/Users/damirdjordjev/nogosh-workspace/nogosh-mobile/platforms/ios/Pods/CocoaLumberjack/Classes/DDOSLogger.h:29:12: note: 'DDOSLogger' has been explicitly marked partial here
@interface DDOSLogger : DDAbstractLogger <DDLogger>
           ^
/Users/damirdjordjev/nogosh-workspace/nogosh-mobile/platforms/ios/Pods/CocoaLumberjack/Classes/DDOSLogger.m:19:20: note: annotate 'sharedInstance' with an availability attribute to silence
static DDOSLogger *sharedInstance;
                   ^
/Users/damirdjordjev/nogosh-workspace/nogosh-mobile/platforms/ios/Pods/CocoaLumberjack/Classes/DDOSLogger.m:58:17: error: static_assert failed "format argument must be a string constant"
                os_log_error(OS_LOG_DEFAULT, msg);
                ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
In module 'os' imported from /Users/damirdjordjev/nogosh-workspace/nogosh-mobile/platforms/ios/Pods/CocoaLumberjack/Classes/DDOSLogger.m:17:
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator11.1.sdk/usr/include/os/log.h:319:9: note: expanded from macro 'os_log_error'
        os_log_with_type(log, OS_LOG_TYPE_ERROR, format, ##__VA_ARGS__)
        ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator11.1.sdk/usr/include/os/log.h:475:5: note: expanded from macro 'os_log_with_type'
    _Static_assert(__builtin_constant_p(format), "format argument must be a string constant"); \
    ^              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/Users/damirdjordjev/nogosh-workspace/nogosh-mobile/platforms/ios/Pods/CocoaLumberjack/Classes/DDOSLogger.m:62:17: error: static_assert failed "format argument must be a string constant"
                os_log_info(OS_LOG_DEFAULT, msg);
                ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
In module 'os' imported from /Users/damirdjordjev/nogosh-workspace/nogosh-mobile/platforms/ios/Pods/CocoaLumberjack/Classes/DDOSLogger.m:17:
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator11.1.sdk/usr/include/os/log.h:247:9: note: expanded from macro 'os_log_info'
        os_log_with_type(log, OS_LOG_TYPE_INFO, format, ##__VA_ARGS__)
        ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator11.1.sdk/usr/include/os/log.h:475:5: note: expanded from macro 'os_log_with_type'
    _Static_assert(__builtin_constant_p(format), "format argument must be a string constant"); \
    ^              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/Users/damirdjordjev/nogosh-workspace/nogosh-mobile/platforms/ios/Pods/CocoaLumberjack/Classes/DDOSLogger.m:67:17: error: static_assert failed "format argument must be a string constant"
                os_log_debug(OS_LOG_DEFAULT, msg);
                ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
In module 'os' imported from /Users/damirdjordjev/nogosh-workspace/nogosh-mobile/platforms/ios/Pods/CocoaLumberjack/Classes/DDOSLogger.m:17:
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator11.1.sdk/usr/include/os/log.h:277:9: note: expanded from macro 'os_log_debug'
        os_log_with_type(log, OS_LOG_TYPE_DEBUG, format, ##__VA_ARGS__)
        ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator11.1.sdk/usr/include/os/log.h:475:5: note: expanded from macro 'os_log_with_type'
    _Static_assert(__builtin_constant_p(format), "format argument must be a string constant"); \
    ^              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1 warning and 3 errors generated.
** BUILD FAILED **

Failed to find module: "nativescript-svg' @1.3.4

i run nativescript-svg in my project bun not fount module ;
and try to run demo project But that did not answer;
What should I do?
An uncaught Exception occurred on "main" thread. java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.demo3/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Failed to find module: "nativescript-svg", relative to: app/tns_modules/ at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2665) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2726) at android.app.ActivityThread.-wrap12(ActivityThread.java) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1477) at android.os.Handler.dispatchMessage(Handler.java:102) at android.os.Looper.loop(Looper.java:154) at android.app.ActivityThread.main(ActivityThread.java:6119) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776) Caused by: com.tns.NativeScriptException: Failed to find module: "nativescript-svg", relative to: app/tns_modules/ at com.tns.Module.resolvePathHelper(Module.java:146) at com.tns.Module.resolvePath(Module.java:55) at com.tns.Runtime.callJSMethodNative(Native Method) at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1021) at com.tns.Runtime.callJSMethodImpl(Runtime.java:903) at com.tns.Runtime.callJSMethod(Runtime.java:890) at com.tns.Runtime.callJSMethod(Runtime.java:874) at com.tns.Runtime.callJSMethod(Runtime.java:866) at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:13) at android.app.Activity.performCreate(Activity.java:6679) at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1118) at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2618) ... 9 more

Bintray is shut down and issuing 403 errors from Gradle Build now

repositories {
    mavenCentral()
    maven { url "http://dl.bintray.com/pixplicity/android" }
}

SVG Images are not displaying

IS this repository is still maintained? I am getting an error and also the svg images are not displaying in android emulator.

ng --version

Angular CLI: 8.3.29
Node: 12.18.0
OS: linux x64
Angular: 8.2.14

tns --version
6.7.8-2020-06-27-070048-14178

<StackLayout xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:svg="nativescript-svg">
 <svg:SVGImage src="~/images/app_settings.svg" height="250" width="250" /></StackLayout>

The error trace is below :--

ERROR TypeError: definition.fromUrl(...).then is not a function
JS: ERROR CONTEXT {
JS:   "view": {
JS:     "def": {
JS:       "nodeFlags": 16793601,
JS:       "rootNodeFlags": 1,
JS:       "nodeMatchedQueries": 0,
JS:       "flags": 0,
JS:       "nodes": [
JS:         {
JS:           "nodeIndex": 0,
JS:           "parent": null,
JS:           "renderParent": null,
JS:           "bindingIndex": 0,
JS:           "outputIndex": 0,
JS:           "checkIndex": 0,
JS:           "flags": 1,
JS:           "childFlags": 16793601,
JS:           "directChildFlags": 1,
JS:           "childMatchedQueries": 0,
JS:           "matchedQueries": {},
JS:           "matchedQueryIds": 0,
JS:           "references": {},
JS:           "ngContentIndex": null,
JS:           "childCount": 9,
JS:           "bindings": [],
JS:           "bindingFlags": 0,
JS:           "outputs": [],
JS:           "element": {
JS:             "ns": "",
JS:             "name": "StackLayout",
JS:             "attrs": [
JS:               [
JS:                 "",
JS:                 "orientation",
JS:                 "horizontal"
JS:               ]
JS:             ],
JS:             "template": null,
JS:             "componentProvider": null,
JS:             "componentView"...
JS: ERROR Error: Uncaught (in promise): [object Boolean]

peoplewaredo / nativescript-svg Goto Github PK

nativescript-svg's People

Contributors

Stargazers

Watchers

Forkers

nativescript-svg's Issues

Recommend Projects

Recommend Topics

Recommend Org