Mobile app development with LiveView Native and Elixir
Tags: liveviewnative, elixir, mobile, phoenix
Published: 2024-06-24 15:44:03

## What is LiveView Native

LiveView Native is a new framework by Dockyard.

### Do more with less, with LiveView Native

As their tag line suggests, it allows Elixir developers to create mobile applications using LiveView, enabling teams to seamlessly build both web and mobile applications with Elixir. Similar to how React Native works for JavaScript, LiveView Native enhances team efficiency by eliminating the need for multiple frameworks or programming languages.

According to DockYard CEO Brian Cardarella, "With Phoenix handling your web views, your mobile native views, and serving as your server-side framework, it creates a more unified and single-stack team."

LiveView Native empowers even small engineering teams to develop custom web and mobile applications, leveraging Elixir and LiveView’s speed, reliability, and concurrency benefits. It helps meet product deadlines faster by reducing obstacles and potential delays since one team can handle both web and native development.

The benefits extend beyond development, as a single team can manage both web and mobile applications, removing barriers related to multiple frameworks and languages, thus achieving more with fewer resources.

Additionally, LiveView Native doesn’t force developers to use a single UI across all platforms. Whether building for iOS or Android, it provides tools to create applications that look and function like true native products, using templates that utilize the native component UI for each platform.

## Setup

**Prerequisite**: You have already installed elixir, phoenix framework along with Xcode and Android studio on you'r machine.

Since android version of LiveView Native is not stable yet, we will be setting up only iOS app in this blog.

With this enough information, let's start with building live view native with Phoenix application.

Let's start with creating phoenix app first with following command

```
mix phx.new native_demo
```

Our actual live view integration starts from here.

Open project folder in any of your favourite code editor, I am using VS Code in this case.

Make sure that your project is using elixir version 1.15 and above.

![Elixir vesion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/clig79qmaqcxnzux9ygm.png)


Now start making changes in the code as shown below.

`mix.exs`

```
{:live_view_native, github: "liveview-native/live_view_native", branch: "main", override: true},
{:live_view_native_stylesheet, github: "liveview-native/live_view_native_stylesheet", branch: "main"},
{:live_view_native_swiftui, github: "liveview-native/liveview-client-swiftui", branch: "main"},
{:live_view_native_live_form, github: "liveview-native/liveview-native-live-form"},
{:live_view_native_jetpack, github: "liveview-native/liveview-client-jetpack", branch: "main"}
```


And add following line to `config.exs` (I somehow missed this step, Thanks to @maratk )

```
config :live_view_native, plugins: [
  LiveViewNative.SwiftUI
]
```

Post this, install dependencies manually using following command.

```
mix deps.get
```

Live view native will some mix tasks to your project to help you out with setup of live view native.

Let's setup live view native in our app using following command in the terminal

```
mix lvn.setup
```

This command will create some necessary files in our project.


You can learn more about lvn task from below command.

```
mix help lvn.swiftui.gen
```



After that run the following command in the terminal

```
mix lvn.swiftui.gen
```

This command will create new swiftui project under the native directory which got created automatically in the root directory of the project. Also it will create some core components for swiftui.

Incase you lost those changes from terminal, no need to worry. You can use following command to see it again.

```
mix lvn.gen --no-copy
```

This command will show the list of changes that we are supposed to add manually into our application. Please make sure that your make all the changes that are mentioned under the header `LVN - Required`
This is the most crucial step in the live view native integration.



Now, head over to the `components` directory of the app and create new directory with the name `layouts_swiftui` and add 2 new files with the name `app.swiftui.neex` and `root.swiftui.neex` with following content.

`root.swiftui.neex`

```
<.csrf_token />
<Style url={~p"/assets/app.swiftui.styles"} />
<NavigationStack>
  <%= @inner_content %>
</NavigationStack>
```


`app.swiftui.neex`

```
<%= @inner_content %>
```


Then create a new directory with the name `styles` with the same level as that of `components` directory and add 2 new files with the name `app.jetpack.ex` and `app.swiftui.ex` with following content.

`app.jetpack.ex`

```
defmodule NativeDemoWeb.Styles.App.Jetpack do
  use LiveViewNative.Stylesheet, :jetpack

  ~SHEET"""
  """  
end

```


`app.swiftui.ex `

```
defmodule NativeDemoWeb.Styles.App.SwiftUI do
  use LiveViewNative.Stylesheet, :swiftui

  ~SHEET"""
  """  
end

```


Now, create a new directory with the name `live` with the same level as that of `components` directory and add 2 new files with the name `home_live.ex` and `home_live.swiftui.ex` with following content.

`home_live.ex`

```
defmodule NativeDemoWeb.HomeLive do
  use NativeDemoWeb, :live_view

  use LiveViewNative.LiveView,
    formats: [:swiftui],
    layouts: [
      swiftui: {NativeDemoWeb.Layouts.SwiftUI, :app}
    ]

  def render(assigns) do
    ~H"""
    <div>
      Hello from Web
    </div>
    """
  end
end
```

`home_live.swiftui.ex`

```
defmodule NativeDemoWeb.HomeLive.SwiftUI do
  use NativeDemoNative, [:render_component, format: :swiftui]

  def render(assigns, _interface) do
    ~LVN"""
    <VStack id="hello-ios">
      <HStack>
        <Text>Hello iOS!</Text>
      </HStack>
    </VStack>
    """
  end
end
```

Then, open the `router.ex` and add following code.


![router.ex](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ir7r8vljvhbbxbldlyt.png)



After making those changes, folder structure of project's `lib` directory will look something like this.


![lib directory structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezd6u2g2cnt1alb2koi6.png)


After this, head out to `native/swiftui` directory and open the file with the extension `.xcodeproj` and then when you try to run the app on simulator, xcode will show popup like shown below.


![xcode popup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qul07bwq6z4etxg8rs6d.png)

All that you have to do is click on `Trust & Enable All`. 


Then try to re-run the application from xcode, you can see some error  as shown below.


![xcode error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kwdvi4evnf6ie6bjd1t.png)

Then you have to select any error, you will see following popup.


![xcode popup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02dc98cf7jsy019vqi65.png)

We need to click on `Trust & Enable` button. We have to perform this steps for all the errors.

Once you done with enabling all the macros, try to build and run the app.


If everything done properly, you should be able to see following screen on iOS simulator


![Mobile app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gj3euza6p32f33a4n82.png)

and if you hit `http://localhost:4000/home` from your browser, should be able to see following.


![Web app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dy307cvqr200i5xd7da3.png)


If you are able to see this on your simulator and browser, congratulations. You have successfully integrated live view native into phoenix aplication.

You can find sample code on [Github](https://github.com/rushikeshpandit/live_view_native_demo)

In case if you face any issue, try deleting `_build` directory and compile code again using `mix compile` command.

If you have any suggestions/doubts or stuck somewhere in this process, feel free to reach to me via one of the following method.

LinkedIn : https://www.linkedin.com/in/rushikesh-pandit-646834100/
GitHub : https://github.com/rushikeshpandit
Portfolio : https://www.rushikeshpandit.in


In my next blog, I will be covering the about how to handle the states in web and mobile app when using live view native.


![Counter demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30kne0dympc8kdqtrmgc.gif)


Stay tuned!!!

 #myelixirstatus , #liveviewnative , #dockyard , #elixir , #phoenixframework