DEV Community

Cover image for Mobile app development with LiveView Native and Elixir

Mobile app development with LiveView Native and Elixir

Rushikesh Pandit on June 24, 2024

What is LiveView Native Introducing LiveView Native, the cutting-edge framework from Dockyard Do more with less, with LiveView...
Collapse
 
demo318 profile image
Devin Mork

This post just convinced me to build my startup on Phoenix instead of Rails. Thank you!

Collapse
 
maratk profile image
Marat

Hi! Great article! Long-waited native development is coming!
However, I get error when I try to run mix lvn.swiftui.gen:

mix lvn.swiftui.gen
** (KeyError) key "swiftui" not found in: %{}
    :erlang.map_get("swiftui", %{})
    (live_view_native 0.3.0-rc.1) lib/live_view_native.ex:125: LiveViewNative.fetch_plugin!/1
    (live_view_native 0.3.0-rc.1) lib/mix/live_view_native/context.ex:60: Mix.LiveViewNative.Context.get_module_suffix/1
    (live_view_native 0.3.0-rc.1) lib/mix/live_view_native/context.ex:33: Mix.LiveViewNative.Context.build/2
    (live_view_native_swiftui 0.3.0-rc.1) lib/mix/tasks/lvn.swiftui.gen.ex:30: Mix.Tasks.Lvn.Swiftui.Gen.run/1
    (mix 1.16.0) lib/mix/task.ex:478: anonymous fn/3 in Mix.Task.run_task/5
    (mix 1.16.0) lib/mix/cli.ex:96: Mix.CLI.run_task/2
    /Users/marat/.asdf/installs/elixir/1.16.0/bin/mix:2: (file)
Enter fullscreen mode Exit fullscreen mode

Do you know what might be wrong?

Followed your instructions.
Versions

Erlang/OTP 26 [erts-14.1] [source] [64-bit] [smp:16:16] [ds:16:16:10] [async-threads:1] [jit:ns]

Elixir 1.16.0 (compiled with Erlang/OTP 24)
Enter fullscreen mode Exit fullscreen mode
Collapse
 
maratk profile image
Marat

Solved by adding

config :live_view_native, plugins: [
  LiveViewNative.SwiftUI
]
Enter fullscreen mode Exit fullscreen mode

to config.exs as described in the liveview-native/live_view_native readme.

Collapse
 
rushikeshpandit profile image
Rushikesh Pandit

Hi Marat, happy that you are able to solve it by yourself. In case you miss to add LiveView Native changes into your project, use mix lvn.gen --no-copy command to get the list of all the changes that we need to integrate manually.

Collapse
 
maratk profile image
Marat

Opening prj file in the Xcode results in the following notice:
Image description

My Xcode version is 15.3. What should I do in this case?

Collapse
 
rushikeshpandit profile image
Rushikesh Pandit

Hi Marat, seems like existing code is written with Swift 3 which is not supported by your xcode version. Try to delete "native" folder and recreate it using command mix lvn.swiftui.gen

Let me if this helps you.

Collapse
 
maratk profile image
Marat

I removed native folder, ran mix lvn.swiftui.gen and opened .xcodeproj file.
The Xcode shows me same dialog window with text:

The target “QuizArena” contains source code developed with Swift 3.x. This version of Xcode does not support building or migrating Swift 3.x targets.

Use Xcode 10.1 to migrate the code to Swift 4.
Enter fullscreen mode Exit fullscreen mode

I don't have Xcode 10.1.

Does it mean this approach will not work for me?

Thread Thread
 
rushikeshpandit profile image
Rushikesh Pandit

Hi Marat. I belive this might be some environment related issue. Please email me on rushikesh.d.pandit@gmail.com with your good time to connect and we can take a look at it. I will be happy to help you.

Thread Thread
 
maratk profile image
Marat

Thank you!

Thread Thread
 
maratk profile image
Marat • Edited

Recap: to enable the successful build on the MacOS Sonoma Xcode 15 we had to add the following adjustments:

  1. Set Swift version 15 in the project Build Settings:

Image description

  1. Since I didn't have the iOS build type in the build platform list Image description

I had to download the iPhone simulator by opening Xcode > Settings > Platform, and downloading iOS 17 simulator, and also iPhone 15 simulator available under + button.

Image description

And selecting the needed simulator version in the list or Run Destinations:
Image description

  1. Adding iPhone destination in the NativeDemo target General settings: Image description

Image description

Image description

Image description

  1. Set product module name to avoid module name "" is not a valid identifier error in NativeDemo target Build settings Packaging section:

Image description

I'm a newbie in the iPhone development so probably product name could be simpler.

  1. Set the Base SDK architecture in the NativeDemo Build settings:

Image description

After doing this I was able to build the project successfully.

Happy coding!

Collapse
 
maratk profile image
Marat

After solving the packages error I have the following one:

Image description

Any idea how to solve this?

Collapse
 
maratk profile image
Marat

somehow I solved this and got the app running in the simulator. I must say that Xcode configuring is insane...

Collapse
 
rushikeshpandit profile image
Rushikesh Pandit

I am glad that you are able to run the app on simulator. Feel free to connect with me if you face any issues with xcode.