Unlock the Power of Native Mobile Apps with Svelte Native

What is Svelte Native?

Svelte Native is a revolutionary framework that combines the strengths of Svelte and NativeScript to create high-performance native mobile applications. By bridging these two powerful technologies, developers can now write mobile app logic with Svelte while building a UI with custom Svelte Native components, which are essentially NativeScript components under the hood.

Getting Started with Svelte Native

To begin, install NativeScript globally by running the command:

npm install -g nativescript

Next, create a Svelte Native starter app by running:

npx degit svelte-native/template my-app

Finally, install the required dependencies and run your app on a physical device or iOS simulator using:

ns preview

ns run ios

Working with Svelte Native Components

Svelte Native comes with a range of built-in components that are actually NativeScript components in disguise. To demonstrate how they work, let’s explore the button component.

<Button on:tap={() => console.log('Button clicked!')}>Click me!</Button>

Notice how we use the on:tap event instead of on:click, following NativeScript’s implementation of event handlers.

Building a Simple iOS App with Svelte Native

In this example, we’ll create a mobile app that fetches data from an external API and renders it using the listView component. We’ll also learn how to pass and receive props from the navigate function.

Creating the Svelte App

First, create the parent component of our app in App.svelte. Import Svelte and create our Svelte app.

import { onMount } from 'velte';

let users = [];

async function getUsers() {
  // make an asynchronous call to an API and save the result to the users array
}

onMount(getUsers);

Creating the Svelte UI

Now, let’s work on our app’s UI. Use the flexboxLayout to align our content, which works similarly to flexbox in CSS.

<flexboxLayout>
  
</flexboxLayout>

By default, the flexboxLayout aligns our content in a row.

Creating a Details Page

Remember when we passed the clicked item in the props to our navigate function earlier? Now, we need to receive that data in the Details.svelte component.

export let user;

Use the exported user prop to access the data via user.

The Future of Svelte Native

Although Svelte Native is a community project without official support from Svelte and NativeScript yet, it shows great promise. With its efficient performance and basic components, Svelte Native is an exciting framework to watch.

Check out the demo code on GitHub and share your thoughts on this article!