halfnelson/svelte-native

Root layout, Sidebar, Snackbar, Bottom Sheet, Modal

tonymurray opened this issue · 9 comments

tonymurray commented

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 commented

@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 commented

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 commented

@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 commented

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 commented

@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 commented

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

  • 👍1
tonymurray commented

@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

jasongitmail commented

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>
  • 👍1