How Svelte-Native Works?
Tags: javascript, svelte, sveltenative, tutorial
Published: 2022-07-15 03:25:05

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:

![ns informations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/seygjuq4swsjmpirfgmh.png)

This is a native application so I need a device to run it. Here there are links for NativeScript Playground for different platforms:
[apple](https://apps.apple.com/us/app/nativescript-playground/id1263543946?ls=1) and [Android](https://play.google.com/store/apps/details?id=org.nativescript.play)

Is a time to create a little application:

```
ns create stoicQuotes --svelte
```
And project is installed: 

![installed project 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/597m3hgpe9fqekdd8bcc.png)


![installed project 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v2z0clqbgj0aayamncm1.png)

I had a little problem configuring the environment of my app and I found a solution [here](https://docs.nativescript.org/environment-setup.html#macos-ios) and I published an answer on StackOverfolw [here](https://stackoverflow.com/questions/72966632/your-environment-is-not-configured-properly-with-svelte-native)
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
```

![Working app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nkblyu26oueat7vyfujr.png)

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>
```

![changed home](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fpmtbki45dyvtla91kfz.png)

I continue to change the Home.svelte. For correctly showing my quote I need <textView> 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: <stackLayout>:
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>

```

![working tags](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5i45m87vrlj2zgcbuqdq.png)

All seems to work correctly.

I would like to have some images in my app so I import the component <image>. 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](https://pixabay.com/)
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>
```
![changing images1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o96d6fnlrx5xt6sm0isq.png)
![changing images2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vaqy159b1dn3noqjavb.png)

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>
``` 

![random items 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rvjawu16swu4r6lfyqyd.png)

![random items 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8azz4syo9ioihfss0uok.png)

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>
```

![random item 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14c392le2s1kmewjm78k.png)

If you want to see the code you can find it [here](https://github.com/Deotyma/svelte_natve_stoic_quote)
Have a nice weekend.