docs: RootLayout

[vallemar]

@Ombuweb @rigor789 For this pr I think it would be a very good idea to add an example per flavor. it's a headache how to create an NS view from a flavor component. for vue 2 this has been asked quite a few times, if it were in the documentation it would eliminate a lot of headaches https://discord.com/channels/603595811204366337/1023252817810567298/1035445806918029352

[Ombuweb]

Hi @vallemar! Some time back I tried to get that to work by following this tutorial. It's similar to your code . So, is that how to do it? Can I add that to the docs?

[vallemar]

@Ombuweb I am in favor of this, anyone who tries to use it without knowing this crashes with this and asks himself a thousand times on discord. For vue3 the way to do it is this: https://github.com/vallemar/nativescript-open-native-notifee/blob/main/src/use/useRootLayout.ts#L8 the example I sent before is for vue2

[vallemar]

@Ombuweb In addition, we could also add how to know when a rootlayout has been closed, today they just asked it on discord. The way I handle rootLayout closures is this (I don't know if it's correct): https://discord.com/channels/603595811204366337/606457523574407178/1066766503946485760

[vallemar]

@Ombuweb now that i'm even reading the post, the guy says it's better to use showModal than rootLayout because he just doesn't know that what i'm saying about adding to the documentation can be done. This further proves that it is necessary to add this to the documentation since people don't know it!. Not only for vue, but for all flavors

[Ombuweb]

The way I handle rootLayout closures is this (I don't know if it's correct)

I think we can add it for now and change it later if a better solution appears.

[Ombuweb]

Not only for vue, but for all flavors

I agree. We have the Angular example here. We need examples for the rest of the flavors.

[vallemar]

@Ombuweb this work for svelte:

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(TestComponent).element.nativeView

setTimeout(() =>{
    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))

source: https://github.com/nativescript-community/ui-material-components/blob/master/src/bottomsheet/svelte/index.ts#L18 example: https://stackblitz.com/edit/nativescript-stackblitz-templates-ve3snd?file=app%2Fcomponents%2FHome.svelte&title=NativeScript%20Starter%20Svelte

[Ombuweb]

Thanks @vallemar. Will add it.