svelte-native icon indicating copy to clipboard operation
svelte-native copied to clipboard

Uncaught TypeError: No known component for element bottomNavigation.

Open grabbels opened this issue 3 years ago • 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

grabbels avatar Jan 13 '23 10:01 grabbels

Experiencing the same error. Did you find a solution?

euggedal avatar Feb 13 '23 12:02 euggedal

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.

FredericKarliczek avatar Feb 26 '23 18:02 FredericKarliczek