Support for LiveViewNative? about surface HOT 5 OPEN

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

from surface.

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

from surface.

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!

from surface.

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

from surface.

@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"
[...]

from surface.