search

halfnelson / svelte-native

Svelte controlling native components via Nativescript
MIT License
1.82k stars 78 forks source link

Uncaught TypeError: No known component for element bottomNavigation. #329

Open grabbels opened 1 year ago

grabbels commented 1 year ago

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

euggedal commented 1 year ago

Experiencing the same error. Did you find a solution?

FredericKarliczek commented 1 year ago

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.