iOS View Hierarchy implements unneeded views

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

Yes

Tell us about the problem

The view hierarchy through NativeScript doesn’t correlate 1 to 1 for native. Instead it requires a dependency of a wrapping view to accomplish simplistic UI.

Example Scenario

Implementing a web view with a label that overlays the webview (used for tap gestures).

On a true Swift/iOS application, you can append the WebView and UILabel directly to the UIView. The view hierarchy looks something like:

This makes sense. The page is respective to a UIView and adding children to the view, directly apply to that view. No nesting, clean and minimal.

Now reproducing that exact same scenario in NativeScript…it’s not immediately possible. The page object requires you wrap your elements under a single layout. This introduces a dummy UIView which requires allocating memory for no “known” good reason.

So, in order to accomplish the exact same scenario in NativeScript we have to do this:

Page // UIView
    GridLayout // UIView
        WebView
        Label

Programmatically you can assign the content of the page, but still there doesn’t seem to be a clear way to accomplish the same scenario, unless you get down into the iOS code.

I’m a little confused why the framework has a dependency on creating a wrapping layout, when you can already directly append to the page’s UIView? The only way we can accomplish a flat hierarchy is by having a single content view attached to the page.

Which platform(s) does your issue occur on?

iOS

Please provide the following version numbers that your issue occurs with:

• CLI: 3.1.2
• Cross-platform modules: 3.1.1
• Runtime(s): 3.1.0

Please tell us how to recreate the issue in as much detail as possible.

See above.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">

    <Page.actionBar>
        <ActionBar title="My App" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>

    <WebView width="100%" height="100%" src="https://www.google.com"></WebView>
    <Label height="80" text="Testing" />
</Page>

You’ll notice the WebView is never rendered. You have to wrap the elements with a StackLayout for it to be visible.

Example of the view hierarchy with the above code.

Although memory is not the point of this issue the x2 difference of Native to NativeScript is worth mentioning.

[hshristov]

Hey guys,

First thing to notice is that we are doing cross platform framework. So while in iOS every view could have multiple views on android only ViewGroup could have sub views. So with that in mind we can’t add subviews to all views.

Another major reason is the layout. Even if we do all controls as ViewGroup underneath how do we position them? Should we stack them or use absolute positioning? Or default to flexbox layout?

That is why we have Layout containers that support multiple children and knows how to position them and single child containers like Page, ContentControl, Border, etc.

I agree that deep nesting is against performance recommendations of Google but removing this one element won’t change the app responsiveness.

Hope that this clarifies why we need that one additional view.

Let me know if something is unclear or if you need more details.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.