LiveViewNative

Client Spec {: .info}

format: :swiftui
module_suffix: "SwiftUI"
template_sigil: ~LVN
component: LiveViewNative.SwiftUI.Component
targets: ~w{ios ipados macos maccatalyst watchos tvos visionos unknown}

The LiveViewNative Swift package lets you use Phoenix LiveView to build native iOS apps with SwiftUI.

Installation

Elixir

If available in Hex, the package can be installed by adding live_view_native_swiftui to your list of dependencies in mix.exs:

def deps do
  [
    {:live_view_native_swiftui, "~> 0.4.0-rc.0"}
  ]
end

SwiftUI

You can install the client either by running the generator from Elixir or you can manually add to an existing Xcode project.

Generate Project

1. Run mix help lvn.swiftui.gen to see the options available for the generator
2. Run mix lvn.gen --no-copy to print the configuration settings to add to support SwiftUI in your application.
3. Run mix lvn.swiftui.gen to ensure you get the properly generated files. Please note this may overwrite an existing Xcode project.

Add to existing Xcode project

1. Run mix lvn.swiftui.gen --no-xcodegen
2. In Xcode go to Package Dependencies
3. Select File → Add Packages...
4. Enter the package URL https://github.com/liveview-native/liveview-client-swiftui
5. Select Add Package

Post-Installation

After installation will want to enable an exist LiveView for LiveView Native SwiftUI.

1. Run mix lvn.gen.live swiftui <ContextModule>
2. Add use <NativeModule>, :live_view to the LiveView module

Example

> mix lvn.gen.live swiftui Home
* creating lib/my_demo_web/live/home_live.swiftui.ex
* creating lib/my_demo_web/live/swiftui/home_live.swiftui.neex

defmodule MyDemoWeb.HomeLive do
  use MyDemoWeb, :live_view
  use MyDemoNative, :live_view
end

Finally, if you generated your Xcode project from the Mix task you can open the MyDemoWeb.xcodeproj file within native/swiftui.

Usage

This plugin provides the SwiftUI rendering behavior of a Phoenix LiveView. Start by adding this plugin to a LiveView. We do this with LiveViewNative.LiveView:

defmodule MyAppWeb.HomeLive do
  use MyAppWeb :live_view
  use LiveViewNative.LiveView,
    formats: [:swiftui],
    layouts: [
      swiftui: {MyAppWeb.Layouts.SwiftUI, :app}
    ]

end

then just like all format LiveView Native rendering components you will create a new module namespaced under the calling module with the module_suffix appended:

defmodule MyAppWeb.HomeLive.SwiftUI do
  use LiveViewNative.Component,
    format: :swiftui

  def render(assigns, _interface) do
    ~LVN"""
    <Text>Hello, SwiftUI!</Text>
    """
  end
end

Further details on additional options and an explanation of template rendering vs using render/2 are in the LiveView Native docs.

Documentation can be generated with ExDoc and published on HexDocs. Once published, the docs can be found at https://hexdocs.pm/live_view_native_swiftui.