Getting Started
Mix.install(
[
{:kino_live_view_native, github: "liveview-native/kino_live_view_native"}
],
config: [
live_view_native: [plugins: [LiveViewNativeSwiftUi]]
]
)
KinoLiveViewNative.start([])
Overview
Our Interactive Guides are a step-by-step interactive tutorial for LiveView Native using Livebook. Livebooks are interactive Elixir notebooks. These interactive guides focus on teaching LiveView Native concepts and will assume the reader already has a baseline knowledge of Phoenix LiveView applications.
For the best experience, we recommend running these guides in Livebook so that you can see how the examples affect a native application. Each Livebook notebook has a "Run in Livebook" badge you can use to automatically import the guide into Livebook. Alternatively, you can also read through these guides and experiment with examples provided in your own Phoenix project.
Guides are isolated from each other, so you can complete guides in any order. However, the guides are made to be completed chronologically for the most complete learning experience.
Prerequisites
To use these guides, you'll need to install the following prerequisites:
While not necessary for our guides, we also recommend you install the following for general LiveView Native development:
Hello World
If you are not already running this guide in Livebook, click on the "Run in Livebook" badge at the top of this page to import this guide into Livebook.
Then, you can evalate the following smart cell and visit http://localhost:4000 to ensure Livebook is working properly.
require KinoLiveViewNative.Livebook
import KinoLiveViewNative.Livebook
import Kernel, except: [defmodule: 2]
defmodule Server.HomeLive do
use Phoenix.LiveView
use LiveViewNative.LiveView
@impl true
def render(%{platform_id: :swiftui} = assigns) do
~SWIFTUI"""
<Text>
Hello Again from LiveView Native!
</Text>
"""
end
def render(assigns) do
~H"""
<div style="color: red;">Hello from LiveView!</div>
"""
end
end
|> KinoLiveViewNative.register("/", ":index")
import KinoLiveViewNative.Livebook, only: []
:ok
If you make a change to the above LiveView and re-evaluate the cell. You should see the change automatically live reload on the browser.
For example, change Hello from LiveView!
to Hello again from LiveView!
and re-evaluate the cell to see the text change.
Troubleshooting
Some common issues you may encounter are:
- Another server is already running on port 4000.
- Your version of Livebook is out of date.
- Your version of Elixir/Erlang is out of date.
- Your version of Xcode is out of date.
Make sure you have the latest versions of all necessary software installed, and ensure there are no other servers running on port 4000. If that does not resolve the issue, you can Raise an Issue to receive support from the LiveView Native team.