Nativescript Core examples

[glorious73]

I could not find a demo for Nativescript core so I created one (to save time for others). It draws both a simple black rectangle on a page and an svg from a certain source.

• File structure:

  ...
  package.json
  app
     app-root.xml
     welcome
        welcome-page.xml
        welcome-page.js
        welcome-view-model.js (if needed)
   ...

• package.json

{
  "name": "canvas and svg example",
  "main": "app/app.js",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@nativescript-community/arraybuffers": "^1.1.5",
    "@nativescript-community/ui-canvas": "^4.6.13",
    "@nativescript-community/ui-svg": "^0.1.25",
    "@nativescript/core": "~8.6.0",
    "@nativescript/theme": "^3.0.2"
  },
  "devDependencies": {
    "@nativescript/android": "8.6.2",
    "@nativescript/ios": "8.6.3",
    "@nativescript/webpack": "~5.0.18"
  }
}

ui-canvas example

• app-root.xml

<Frame defaultPage="~/views/welcome/welcome-page" id="topmost"></Frame>

• welcome-page.xml

<Page loaded="onLoaded" xmlns="http://www.nativescript.org/tns.xsd" xmlns:cv="@nativescript-community/ui-canvas">
    <StackLayout>
        <Label text="text before" textWrap="true" />
        <cv:CanvasView width="400" height="400" draw="onDraw"/>
        <Label text="text after" textWrap="true" />
    </StackLayout>
</Page>

• welcome-page.js

import { Color } from "@nativescript/core";
import { Paint, createRect } from "@nativescript-community/ui-canvas";

const { WelcomeViewModel } = require("./welcome-view-model");

const welcomeViewModel = new WelcomeViewModel();

export const onLoaded = (args) => {
    const page = args.object;
    page.bindingContext = welcomeViewModel;
};

export const onDraw = (event) => {
    try {
        const paint = new Paint();
        paint.setColor(new Color('black'));
        paint.strokeWidth = 10;
        event.canvas.drawRect(createRect(0, 0, 400, 400), paint);
    }
    catch(err) {
        console.log(err);
    }
}

ui-svg example

• Same file structure as above.

• Note that you need to install @nativescript-community/arraybuffers, @nativescript-community/canvas, and @nativescript-community/ui-svg to avoid dependency-related errors. Also, no need for the use of Javascript since we are directly using SVGView.

• app-root.xml

<Frame defaultPage="~/views/welcome/welcome-page" id="topmost"></Frame>

• welcome-page.xml

<Page loaded="onLoaded" actionBarHidden="true" xmlns="http://www.nativescript.org/tns.xsd" xmlns:cv="@nativescript-community/ui-canvas" xmlns:svg="@nativescript-community/ui-svg">
    <StackLayout>
        <Label text="text before" textWrap="true" />
        <!--Make sure the src file exists-->
        <svg:SVGView height="300" src="~/assets/svg/example.svg" stretch="aspectFit" />
        <Label text="text after" textWrap="true" />
    </StackLayout>
</Page>

[farfromrefug]

@glorious73 awesome will add it to the readme!