[BottomNavigation] How can I use with Svelte?

[ohmaha]

I am very new and I am interested to create a mobile application by Svelte NativeScript. But I don't know how can I use the BottomNavigation. Is this library support Svelte?

[dnicer3]

Unfortunately, I would like to have a solution for Svelte as well. As far as I know, since Nativescript 8.0 was released, components BottomNavigation and Tabs are not supported by officials anymore, only by the community. I have already tried to bypass this by using a regular Nativescript and registerNativeViewElement function, however unsuccessfully.

[farfromrefug]

@ohmaha @dnicer3 yes svelte needs a special component for this. @halfnelson started working on this https://github.com/halfnelson/ui-material-components/commit/904c71ec5cc43f74dd77df99e7ec6f09357c4fdf @halfnelson what s the status on this?

[NoelOConnell]

I got this working on Stackblitz Preview today with help on the NS Discord. Here's how I set it up.

Install the plugin in package.json "@nativescript-community/ui-material-bottom-navigation": "^7.0.25" I'm using that version since a message on Discord said that was the version supported by ns preview

Register the plugin in app.ts

app.ts

import {
  BottomNavigation,
  TabContentItem,
  TabStrip,
  TabStripItem,
} from '@nativescript-community/ui-material-bottom-navigation';

.....

registerNativeViewElement('bottomNavigation', () => BottomNavigation);
registerNativeViewElement('tabStrip', () => TabStrip);
registerNativeViewElement('tabStripItem', () => TabStripItem);
registerNativeViewElement('tabContentItem', () => TabContentItem);

svelteNativeNoFrame(App, {});

Add the component to your Page.svelte

Page.svelte

<script lang="ts">
let selectedTab = 1

$:console.log({selectedTab})
</script>

<page xmlns:mdt="@nativescript-community/ui-material-bottom-navigation">
<bottomNavigation bind:selectedIndex={selectedTab}>

	<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
	<tabStrip>
		<tabStripItem>
			<label text="Home" />			
		</tabStripItem>
		<tabStripItem class="special">
			<label text="Account" />			
		</tabStripItem>
		<tabStripItem class="special">
			<label text="Search" />			
		</tabStripItem>
	</tabStrip>

	<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
	<tabContentItem>
		<gridLayout>
			<label text="Home Page" class="h2 text-center" />
		</gridLayout>
	</tabContentItem>
	<tabContentItem>
		<gridLayout>
			<label text="Account Page" class="h2 text-center" />
		</gridLayout>
	</tabContentItem>
	<tabContentItem>
		<gridLayout>
			<label text="Search Page" class="h2 text-center" />
		</gridLayout>
	</tabContentItem>

</bottomNavigation>
</page>

[dnicer3]

@NoelOConnell, as I said, I have already tried same and anyway I can not make it working... See the code and package below.

app.svelte

app.ts

package.json

[NoelOConnell]

@dnicer3 Can you try changing the order that the components are registered. I remember seeing some other issue about the order needing to be correct for tabs.

registerNativeViewElement('bottomNavigation', () => BottomNavigation);
registerNativeViewElement('tabStrip', () => TabStrip);
registerNativeViewElement('tabStripItem', () => TabStripItem);
registerNativeViewElement('tabContentItem', () => TabContentItem);

[dnicer3]

@NoelOConnell Unfortunately, nothing is changing. (

[NoelOConnell]

@dnicer3 I have the plugin installed as a dev dependency. Not sure if that makes a difference.

[vallemar]

@NoelOConnell can you send your link of Stackblitz?

[NoelOConnell]

@vallemar here's the playground I'm experimenting with.

https://stackblitz.com/edit/nativescript-stackblitz-templates-t1fr9o

[dnicer3]

@NoelOConnell I have even changed it to devDependencies, but still nothing...

[NoelOConnell]

@dnicer3 I've created a bare example that you can use to compare to your own and see if there's any differences.

https://stackblitz.com/edit/nativescript-stackblitz-templates-t1fr9o

[dnicer3]

@NoelOConnell thank you for assistance, however, mine code is 100% same but not working ))

[NoelOConnell]

@dnicer3 Yeah, I tried to run it locally with the emulator and got the same error as you. It works fine in Stackblitz so it's something to do with how the Nativescript Stackblitz has additional dependencies installed.

I looked at the package.json for ui-material-bottom-navigation and saw it has dependencies list.

I updated the package.json to include them and it worked in the emulator locally. Can you try adding these dependencies.

"@nativescript-community/ui-material-bottom-navigation": "^7.0.34",    
"@nativescript-community/ui-material-core-tabs": "^7.0.34",
"@nativescript/core": "~8.4.0",

Try running ns clean also before installing and running.

[dnicer3]

@NoelOConnell you are the God, thanks. Finally, it's working!

[vallemar]

Does this mean that plugins that need a component of the framework in question can we make them work in any framework by adding this to the page? xmlns:mdt="@nativescript-community/ui-xxxxx" ????