# LiveViewNative

> #### Client Spec {: .info}
>
> format: `:swiftui`
>
> module_suffix: `SwiftUI`
>
> template_sigil: `~LVN`
>
> component: `LiveViewNative.SwiftUI.Component`

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

## Installation

1. In Xcode, select *File → Add Packages...*
2. Enter the package URL `https://github.com/liveview-native/liveview-client-swiftui`
3. Select *Add Package*

## Usage
Create a `LiveView` to connect to a Phoenix server running on `http://localhost:4000`.

```swift
import SwiftUI
import LiveViewNative

struct ContentView: View {
    var body: some View {
        LiveView(.localhost)
    }
}
```

Now when you start up your app, the LiveView will automatically connect and serve your native app.

## Elixir Library

### Installation

If [available in Hex](https://hex.pm/docs/publish), the package can be installed
by adding `live_view_native_swiftui` to your list of dependencies in `mix.exs`:

```elixir
def deps do
  [
    {:live_view_native_swiftui, "~> 0.3.0"}
  ]
end
```

Then add the `SwiftUI` plugin to your list of LiveView Native plugins:

```elixir
config :live_view_native, plugins: [
  LiveViewNative.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`:

```elixir
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:

```elixir
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](https://github.com/elixir-lang/ex_doc)
and published on [HexDocs](https://hexdocs.pm). Once published, the docs can
be found at <https://hexdocs.pm/live_view_native_swiftui>.

## Resources

- Browse the [documentation](https://liveview-native.github.io/liveview-client-swiftui/documentation/liveviewnative/) to read about the API.
- Check out the [ElixirConf '22 chat app](https://github.com/liveview-native/elixirconf_chat) for an example of a complete app.