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 and ns run ios commands.
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. To add a button component, simply add the following code: <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. Then, use the getUser function to make an asynchronous call to an API and save the result to the users array. Finally, call the getUsers() function on the onMount lifecycle hook.
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. 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. Use the export let 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!