Root layout, Sidebar, Snackbar, Bottom Sheet, Modal

[tonymurray]

In the NativeScript Preview App, there are Examples of layouts (in the section: 'RootLayout') with demos of key UI elements: Bottom Sheet, Mini Bottom Sheet, Custom Modal, Snackbar, Sidebar. I cannot find how to construct these elements in the Svelte Native documentation (searching for 'Sheet', 'Snackbar' or 'Sidebar' - there is documentation on Modals). I maybe expected to find them in the RootLayout section: https://svelte-native.technology/docs#rootlayout. Is the relevant documentation in there somewhere I'm missing, or perhaps not yet added?

[vallemar]

@tonymurray if you want to pass a custom svelte component? If this is what you want you can do this:

import { CoreTypes, getRootLayout } from '@nativescript/core';
import { NativeViewElementNode, createElement } from 'svelte-native/dom';

function createNativeView(component, props?: any) {
    const fragment = createElement('fragment');
    const viewInstance = new component({ target: fragment, props });
    const element = fragment.firstElement() as NativeViewElementNode<View>;
    return { element, viewInstance };
}
const nsView = createNativeView(MyComponent).element.nativeView

getRootLayout()
  .open(nsView, {
            shadeCover: {
            color: '#000',
            opacity: 0.7,
            tapToClose: true
            },
            animation: {
            enterFrom: {
                opacity: 0,
                translateY: 500,
                duration: 500
            },
            exitTo: {
                opacity: 0,
                duration: 300
            }
            }
        })
  .catch(ex => console.error(ex))
})

Updated example with imports

[tonymurray]

Thanks for the code! - I will try that out.
I'm just trying to recreate the NativeScript example layouts demoed in the App for now. (Will check Nativescript docs)

[vallemar]

@tonymurray good! Here you have a example of rootLayout https://github.com/vallemar/nativescript-dominative-vue-3/blob/master/app/use/useRootLayout.ts this is vue, you only need change the method the createNativeView for the svelte view, and the components is here https://github.com/vallemar/nativescript-dominative-vue-3/tree/master/app/components/root-layout

[tonymurray]

Thanks, I'm still trying to get it to work. I created a mock-up here:

https://stackblitz.com/edit/nativescript-stackblitz-templates-oxtmjz?file=app/components/Home.svelte

Only the first modal window using "import { showModal } " works, the other two cause a crash. No doubt I'm missing something key. Any help appreciated!

[vallemar]

@tonymurray You were quite wrong here, you didn't declare the createElement method correctly "I didn't put it here either". showModalWindow was being called wrong, you need to access the function with this https://stackblitz.com/edit/nativescript-stackblitz-templates-7rykdh?file=app%2Fcomponents%2FHome.svelte%3AL106. You also lacked declaring your rootLayout element, I recommend taking a look at https://docs.nativescript.org/ui-and-styling.html#rootlayout .
In short, this example works! https://stackblitz.com/edit/nativescript-stackblitz-templates-7rykdh?file=app%2Fcomponents%2FHome.svelte

[tonymurray]

Many thanks @vallemar - that helps a lot!; also the links.
I also added the other elements (Snackbar and Sidebar) in the following version:
https://stackblitz.com/edit/nativescript-stackblitz-templates-ky7fni?file=app/components/Home.svelte

[tonymurray]

@vallemar - or someone with time + patience :) I am now trying to close the Modal via a button click (in the modal rather than clicking outside it, like: { closeModal } from 'svelte-native'.

I added 2 functions to ModalB.svelte:
https://stackblitz.com/edit/nativescript-stackblitz-templates-ky7fni?file=app/components/ModalB.svelte but neither working

Option 1: https://docs.nativescript.org/ui-and-styling.html#rootlayout

• Not able to get the value for nsView
  re: getRootLayout().close(nsView)

Option 2: trying to implement the method mentioned in the linked application:
https://github.com/williamjuan027/nativescript-rootlayout-demo

[tonymurray]

To follow-up: One option that works is to use:
getRootLayout().closeAll()
As per https://svelte-native.technology/docs#rootlayout
https://stackblitz.com/edit/nativescript-stackblitz-templates-ky7fni?file=app/components/Sidebar.svelte

[jasongitmail]

Old thread, but for others, this also works to close the modal using a button inside of it:

<script lang="ts">
  function onClose(args: any) {
    const page = args.object.page;
    page.closeModal();
  }
</script>

<frame>
  <page>
    <actionBar title="Settings"  >
      <actionItem text="Close" on:tap={onClose} />
    </actionBar>

    <!-- content here -->
  </page>
</frame>