-
-
Notifications
You must be signed in to change notification settings - Fork 80
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[BottomNavigation] How can I use with Svelte? #427
Comments
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. |
@ohmaha @dnicer3 yes svelte needs a special component for this. |
I got this working on Stackblitz Preview today with help on the NS Discord. Install the plugin in package.json Register the plugin in app.tsimport {
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<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> |
@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 |
@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); |
@NoelOConnell Unfortunately, nothing is changing. ( |
@dnicer3 I have the plugin installed as a dev dependency. Not sure if that makes a difference. |
@NoelOConnell can you send your link of Stackblitz? |
@vallemar here's the playground I'm experimenting with. https://stackblitz.com/edit/nativescript-stackblitz-templates-t1fr9o |
@NoelOConnell I have even changed it to devDependencies, but still nothing... |
@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 |
@NoelOConnell thank you for assistance, however, mine code is 100% same but not working )) |
@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 I updated the
Try running |
@NoelOConnell you are the God, thanks. Finally, it's working! |
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? |
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?
The text was updated successfully, but these errors were encountered: