Support for LiveViewNative?

[mayel]

As LVN is almost ready for production I was wondering if anyone's tried using Surface for it, and if not yet doable what changes would be needed?

One aspect of it would be being able to have multiple markup files for the same component/view:

• my_component.sface
• my_component.swiftui
• my_component.jetpack
• etc

[mayel]

So gave it a shot and the good news is that it mostly works! :)

Surface and LiveViewNative happily live side by side in components and views. E.g.:

        use Surface.Component
        use LiveViewNative.Component

The only thing that doesn't seem to work is collocating .sface and LVN files as I mentioned above and documented here: https://hexdocs.pm/live_view_native/render-patterns.html#external-template-files

This works in the meantime, though I'd still prefer being able to have separate files:

  def render(%{platform_id: :swiftui} = assigns) do
    # This UI renders on the iOS/Mac app
    ~SWIFTUI"""
    <VStack>
      <Text>
        Hello native!
      </Text>
    </VStack>
    """
  end

  def render(assigns) do
    assigns
    |> render_sface()
  end

[mayel]

This seems the relevant code in Surface: https://github.com/surface-ui/surface/blob/v0.11.0/lib/surface/renderer.ex

And in LVN:

• Render logic: https://github.com/liveview-native/live_view_native/blob/main/lib/live_view_native/extensions/render.ex
• Native definitions: https://github.com/liveview-native/live_view_native/blob/main/lib/live_view_native/extensions.ex#L29
• Example of how they support regular heex: https://github.com/liveview-native/live_view_native/blob/main/lib/live_view_native/platforms/web.ex

I'm happy to give it a go, though some guidance on how to best integrate them would be helpful!

[noozo]

i think it mostly works, the main issue RN is layouts, me thinks.

[mayel]

@noozo I had no issues doing this for the live layout:

defmodule MyApp.Web.LayoutLive do
        use Surface.Component
        use LiveViewNative.Component

  def render(%{platform_id: :swiftui} = assigns) do
    # This renders a layout for the iOS/Mac app
    ~SWIFTUI"""
    <VStack>
      <%= @inner_content %>
    </VStack>
    """
  end

  def render(assigns) do
  # This layout renders for the web (with Surface)
    ~F"""
    <div
      id="layout_live"
[...]

[mayel]

With the LiveViewNative 0.2 beta, there's a PR to get layouts working: liveview-native/live_view_native#108