View Source LiveViewNative
About
LiveView Native is a platform for building native applications using Elixir and Phoenix LiveView. It allows a single LiveView to serve both web and non-web clients by transforming platform-specific template code into native UIs:
# lib/my_app_web/live/hello_live.ex
defmodule MyAppWeb.HelloLive do
use MyAppWeb, :live_view
use MyAppNative, :live_view
end
# liv/my_app_web/live/hello_live_swiftui.ex
defmodule MyAppWeb.HelloLive.SwiftUI do
use MyAppNative, [:render_component, format: :swiftui]
def render(assigns, %{"target" => "watchos"}) do
~LVN"""
<VStack>
<Text>
Hello WatchOS!
</Text>
</VStack>
"""
end
def render(assigns, _interface) do
~LVN"""
<VStack>
<Text>
Hello SwiftUI!
</Text>
</VStack>
"""
end
end
Getting started
To get started with LiveView Native, you'll need to have an existing Phoenix Application or create a new one.
Add live_view_native
to your list of dependencies in the mix.exs
file. In addition to live_view_native
you may want to include some additional libraries:
{:live_view_native, "~> 0.3.0"},
{:live_view_native_stylesheet, "~> 0.3.0"},
{:live_view_native_swiftui, "~> 0.3.0"},
{:live_view_native_live_form, "~> 0.3.0"}
Then run:
$ mix lvn.setup
and follow the instructions on how to complete the setup process.
Native Clients
LiveView Native enables client frameworks such as:
UI Framework | Devices | LiveView Client |
---|---|---|
SwiftUI | iPhone, iPad, AppleTV, Apple Watch, MacOS, Apple Vision Pro | LiveView Native SwiftUI |
JetPack Compose | Android family | LiveView Native Jetpack |
HTML | LiveView Native HTML |
Questions?
Have a question or want some help with LiveView Native?
Check out the #liveview-native
channel on the Elixir Lang Slack.