How Svelte-Native Works?

I would like to know how Svelte-Native works so I will create a little application with this framework this time.

Svelte-Native works on top of NativeSctipt so to start to create an application I need to install NativeScript globally:

 npm install -g nativescript

In my case, I needed to use sudo to install it correctly.
To verify if NativeScript is installed I run a command ns
in my terminal and I have lots of information:

This is a native application so I need a device to run it. Here there are links for NativeScript Playground for different platforms:
apple and Android

Is a time to create a little application:

ns create stoicQuotes --svelte

And project is installed:

I had a little problem configuring the environment of my app and I found a solution here and I published an answer on StackOverfolw here
I needed

# link and alias the installed python3
# version to be available to XCode as python
sudo ln -s $(which python3) /usr/local/bin/python
python3 -m pip install --upgrade pip
python3 -m pip install six

and after I needed to install the ios platform

tns platform add ios

And now I can run an app:

ns run ios

Now I go to Home.svelte and I change some code to see how It works:
Home.svelte

<page>
    <actionBar title="quote of the day" /> //here I change titlle from "Home" to "quote of the day"
    <gridLayout class="home"> //her I add a class home
        <label class="info">
            <formattedString>
                <span class="fas" text="&#xf135;" />
                <span text=" {message}" />
            </formattedString>
        </label>
    </gridLayout>
</page>

<script lang="ts">
    let message: string = "My new page is here"
</script>

<style>
    .info .fas {
        color: #893aff; // here I change a color of icone
    }
    .home{
        background: #3aff96; //here I add background color
    }
    .info {
        font-size: 20;
        horizontal-align: center;
        vertical-align: center;
    }
</style>

I continue to change the Home.svelte. For correctly showing my quote I need which displays text in many lines. I need also a working button to search for a new quote. To display all these elements I need in my app also a new tag: :
Home.svelte

<page class="page">
    <actionBar title="quote of the day" class="action-bar">
    </actionBar>
    <stackLayout class="home">
        <textView text={message} class="quote"/>
        <button text="Next quote" on:tap="{ onTap }" class="button" />
    </stackLayout>
</page>

<script>
    import { alert } from '@nativescript/core/ui/dialogs'

    let message = "This is a long text to see if text view works correctly "
    const onTap = () => alert('Tne button works good!');
</script>

<style>
    .home{
        background-color: #3aff96;
    }
    .quote{
        color: blue;
        font-size: 20rem;
        font-weight: 600;
    }
</style>

All seems to work correctly.

I would like to have some images in my app so I import the component . This is a nativeScript element so it is written with the first letter in low case. At the same time, I would like to choose an image randomly. For this, I created a folder of images in the app folder and I downloaded some images of flowers from pixabay
So Home.svelte is like this (without style):

<page class="page">
    <actionBar title="quote of the day" class="action-bar">
    </actionBar>
    <stackLayout class="home">
        <image  src = "~/images/img{imgNumber}.png"/> <!--here I put image with variable wit will change dynamicly-->
        <textView text={message} class="quote"/>
        <button text="Next quote" on:tap="{ onTap }" class="button" />
    </stackLayout>
</page>

<script>
    //import { alert } from '@nativescript/core/ui/dialogs'

    let message = "This is a long text to see if text view works correctly "
    let min = 1
    let max = 10
    let imgNumber = 1

    function randomImage() {
    imgNumber = Math.floor(Math.random() * (max - min)) + min; // Here this function choose a random image
    }

   $: imgNumber ? 1 : randomImage(); // this is a reactf variable

    const onTap = () => randomImage();
</script>

Now is the time to implement a different quota of stoic philosophers. For this, I create a little file quotes.js in the folder app with variable quotes with quotes, authors, and ids.
Home.svelte

<page class="page">
    <actionBar title="quote of the day" class="action-bar">
    </actionBar>
    <stackLayout class="home">
        <image  src = "~/images/img{imgNumber}.png"/>
        <textView text={quote} class="quote"/>
        <textView text={author} class="quote"/>
        <button text="Next quote" on:tap="{ onTap }" class="button" />
    </stackLayout>
</page>

<script>
    //import { alert } from '@nativescript/core/ui/dialogs'
    import { quotes } from '../quotes.js'

    let min = 1
    let max = 10
    let imgNumber
    let quote
    let author 

    function randomImage() {
    imgNumber = Math.floor(Math.random() * (max - min)) + min; 
    }

    function randomQuote(){
        let i = Math.floor(Math.random() * quotes.length)
        quote = quotes[i].quote
        author = quotes[i].author
        return quote, author
    }
    randomQuote()

    function randomItems(){
        randomImage();
        randomQuote();
    }

   $: imgNumber ? 1 : randomImage();


    const onTap = () => randomItems() ;
</script>

This is a time to take care of CSS a little bit.

<page class="page">
    <actionBar title="quote of the day" class="action-bar">
    </actionBar>
    <stackLayout class="home">
        <image class="img"  src = "~/images/img{imgNumber}.png"/>
        <textView text={quote} class="quote"/>
        <label class="info">
            <formattedString>
                <span text=" {author}" class="author"/>
            </formattedString>
        </label>
        <button text="Next quote" on:tap="{ onTap }" class="button" />
    </stackLayout>
</page>

<script>
    import { quotes } from '../quotes.js'

    let min = 1
    let max = 10
    let imgNumber
    let quote
    let author 

    function randomImage() {
    imgNumber = Math.floor(Math.random() * (max - min)) + min; 
    }

    function randomQuote(){
        let i = Math.floor(Math.random() * quotes.length)
        quote = quotes[i].quote
        author = quotes[i].author
        return quote, author
    }
    randomQuote()

    function randomItems(){
        randomImage();
        randomQuote();
    }

   $: imgNumber ? 1 : randomImage();


    const onTap = () => randomItems() ;
</script>

<style>
    .home{
        background: rgb(105,134,14);
        background: linear-gradient(90deg, rgba(105,134,14,1) 0%, rgba(121,161,91,1) 100%);
    }
    .quote{
        color: #24261c;
        text-align: center;
        font-size: 30rem;
        font-weight: 600;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .author{
        color: #24261c;
        text-align: center;
        font-size: 20rem;
        font-weight: 400;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .info{
        text-align: center;

    }
    .button{
        background: rgb(220,162,219);
        background: linear-gradient(90deg, rgba(220,162,219,1) 0%, rgba(75,83,174,1) 100%);
        color: #24261c;
        font-size: 20rem;
        border-radius: 0 20px

    }
    .img{
        border-radius: 0 50px;
        margin: 20px;
        border: solid 5px #24261c;
    }
</style>

If you want to see the code you can find it here
Have a nice weekend.