halfnelson/svelte-native

Uncaught TypeError: No known component for element bottomNavigation.

grabbels opened this issue · 2 comments

When using the bottomNavigation UI element the app crashes on opening returning the following error:
"NativeScript encountered a fatal error: Uncaught TypeError: No known component for element bottomNavigation."

The project the issue occurs in

Experiencing the same error.
Did you find a solution?

Got the same problem and found a solution. In the documentation is this mentioned:

https://svelte-native.technology/docs#tab-navigation
grafik

In order to use "@nativescript-community/ui-material-bottom-navigation" i had to install it via:

ns plugin add @nativescript-community/ui-material-bottom-navigation

Next I followed the instructions for using native native script plugins: https://svelte-native.technology/docs#using-nativescript-plugins

The nessecary components must be registered within the app.ts. My app.ts looks like this:

import { registerNativeViewElement } from 'svelte-native/dom'
import { svelteNativeNoFrame } from 'svelte-native'
import App from './App.svelte'

registerNativeViewElement("bottomNavigation", () => require("@nativescript-community/ui-material-bottom-navigation").BottomNavigation);
registerNativeViewElement("tabContentItem", () => require("@nativescript-community/ui-material-bottom-navigation").TabContentItem);
registerNativeViewElement("tabStrip", () => require("@nativescript-community/ui-material-bottom-navigation").TabStrip);
registerNativeViewElement("tabStripItem", () => require("@nativescript-community/ui-material-bottom-navigation").TabStripItem);

svelteNativeNoFrame(App, {})

Maybe there is a more elegant way. Im myself a beginner with svelte-native but this worked for me.