Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@nativescript-community/ui-material-bottom-navigation
Advanced tools
Readme
Material Design's Bottom navigation component for NativeScript.
ns plugin add @nativescript-community/ui-material-bottom-navigation
Be sure to run a new build after adding plugins to avoid any issues.
IMPORTANT: Make sure you include xmlns:mds="@nativescript-community/ui-material-bottom-navigation"
on the Page element.
<Page xmlns:mdt="@nativescript-community/ui-material-bottom-navigation">
<mdt:BottomNavigation width="100%" id="main-tabview" class="main-tabview"
selectedIndexChanged="{{onSelectedIndexChanged}}"
iosOverflowSafeArea="true" selectedIndex="0" tabsPosition="bottom" swipeEnabled="false">
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
<mdt:TabStrip backgroundColor="{{ color('dark')}}" color="{{ color('blue')}}">
<mdt:TabStripItem class="tab-item">
<Image src="font://" class="fal"></Image>
<Label text="Home" ios:fontSize="10" android:fontSize="12"></Label>
</mdt:TabStripItem>
<mdt:TabStripItem class="tab-item">
<Label text="{{ L('search') }}" ios:fontSize="10" android:fontSize="12"></Label>
<Image src="font://" class="fal"></Image>
</mdt:TabStripItem>
<mdt:TabStripItem class="tab-item">
<Label text="{{ L('trips') }}" ios:fontSize="10" android:fontSize="12"></Label>
<Image src="font://" class="fal"></Image>
</mdt:TabStripItem>
<mdt:TabStripItem class="tab-item">
<Label text="{{ L('inbox') }}" ios:fontSize="10" android:fontSize="12"></Label>
<Image src="font://" class="fal" id="tab-inbox-icon-fal"></Image>
</mdt:TabStripItem>
</mdt:TabStrip>
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
<mdt:TabContentItem>
<GridLayout>
<Label text="Home" class="h2 text-center"></Label>
</GridLayout>
</mdt:TabContentItem>
<mdt:TabContentItem>
<GridLayout>
<Label text="Search Page" class="h2 text-center"></Label>
</GridLayout>
</mdt:TabContentItem>
<mdt:TabContentItem>
<GridLayout>
<Label text="TRansactions" class="h2 text-center"></Label>
</GridLayout>
</mdt:TabContentItem>
<mdt:TabContentItem>
<GridLayout>
<Label text="Inbox" class="h2 text-center"></Label>
</GridLayout>
</mdt:TabContentItem>
</mdt:BottomNavigation>
</Page>
BottomNavigation.bottom-nav {
background-color: orangered;
color: gold;
font-size: 18;
}
MDTabStripItem.tabstripitem-active {
background-color: teal;
}
MDTabStripItem.tabstripitem-active:active {
background-color: yellowgreen;
}
MDTabContentItem.first-tabcontent {
background-color: seashell;
color: olive;
}
MDTabContentItem.second-tabcontent {
background-color: slategray;
color: aquamarine;
}
MDTabContentItem.third-tabcontent {
background-color: blueviolet;
color: antiquewhite;
}
BottomNavigation TabStrip {
highlight-color: red;
}
import { NativeScriptMaterialTabsModule } from "@nativescript-community/ui-material-bottom-navigation/angular";
@NgModule({
imports: [
NativeScriptMaterialBottomNavigationModule,
...
],
...
})
<MDBottomNavigation selectedIndex="1">
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
<MDTabStrip>
<MDTabStripItem>
<Label text="Home"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
<MDTabStripItem class="special">
<Label text="Account"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
<MDTabStripItem class="special">
<Label text="Search"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
</MDTabStrip>
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
<MDTabContentItem>
<GridLayout>
<Label text="Home Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
<MDTabContentItem>
<GridLayout>
<Label text="Account Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
<MDTabContentItem>
<GridLayout>
<Label text="Search Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
</MDBottomNavigation>
import BottomNavigation from '@nativescript-community/ui-material-bottom-navigation/vue';
Vue.use(BottomNavigation);
<MDBottomNavigation selectedIndex="1">
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
<MDTabStrip>
<MDTabStripItem>
<Label text="Home"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
<MDTabStripItem class="special">
<Label text="Account"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
<MDTabStripItem class="special">
<Label text="Search"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
</MDTabStrip>
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
<MDTabContentItem>
<GridLayout>
<Label text="Home Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
<MDTabContentItem>
<GridLayout>
<Label text="Account Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
<MDTabContentItem>
<GridLayout>
<Label text="Search Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
</MDBottomNavigation>
First, register the component before any of your React NativeScript app renders. A good place to put this code is in your entrypoint file (which may be called src/app.ts
or similar), before the ReactNativeScript.start
function is called. Here's how to install it:
import { registerTabNavigationBase } from '@nativescript-community/ui-material-core/tab-navigation-base/react';
import { registerBottomNavigation } from '@nativescript-community/ui-material-bottom-navigation/react';
registerTabNavigationBase();
registerBottomNavigation();
When available (I've not implemented it at the time of writing, but intend to in time), it would be best to use this component via the bottomNavigationNavigatorFactory()
API exported by React NativeScript Navigation, as it makes nested navigation easy, but here's how to use it directly:
import * as React from 'react';
export function BottomNavigation() {
const [selectedIndex, setSelectedIndex] = React.useState(0);
return (
<bottomNavigation
selectedIndex={selectedIndex}
onSelectedIndexChanged={(args) => {
setSelectedIndex(args.newIndex);
}}
style={{ backgroundColor: 'orange' }}
>
{/* The bottomTab UI is created via tabStrip (the container) and tabStripItem (for each tab) */}
<tabStrip nodeRole="tabStrip" style={{ backgroundColor: 'red' }}>
<tabStripItem nodeRole="items">
<label nodeRole="label">Home</label>
<image nodeRole="image" src="font://" className="fas" />
</tabStripItem>
<tabStripItem nodeRole="items">
<label nodeRole="label">Account</label>
<image nodeRole="image" src="font://" className="fas" />
</tabStripItem>
<tabStripItem nodeRole="items">
<label nodeRole="label">Search</label>
<image nodeRole="image" src="font://" className="fas" />
</tabStripItem>
</tabStrip>
{/* The number of tabContentItem components should corespond to the number of TabStripItem components */}
<tabContentItem nodeRole="items">
<gridLayout style={{ backgroundColor: 'blue' }}>
<label style={{ color: 'white' }}>Home Page</label>
</gridLayout>
</tabContentItem>
<tabContentItem nodeRole="items">
<gridLayout style={{ backgroundColor: 'cyan' }}>
<label style={{ color: 'black' }}>Account Page</label>
</gridLayout>
</tabContentItem>
<tabContentItem nodeRole="items">
<gridLayout style={{ backgroundColor: 'magenta' }}>
<label style={{ color: 'black' }}>Search Page</label>
</gridLayout>
</tabContentItem>
</bottomNavigation>
);
}
Troubleshooting
If you see an error like this when writing e.g. <bottomNavigation>
into your JSX:
Property 'bottomNavigation' does not exist on type 'JSX.IntrinsicElements'.ts(2339)
Make sure that you have:
react-nativescript
npm module.@types/react
npm module, strictly with the exact version provided in the React NativeScript starter template.npm run postinstall
– to patch @types/react
.registerTabNavigationBase()
and registerBottomNavigation()
methods).@nativescript-community/ui-material-bottom-navigation/react
to jump to the file; opening the file will force it to load its provided typings.Name | Type | Description |
---|---|---|
items | Array | Gets or sets the items of the BottomNavigation. |
selectedIndex | number | Gets or sets the selectedIndex of the BottomNavigation. |
swipeEnabled | boolean | Gets or sets the swipe enabled state of the Tabs. |
offscreenTabLimit | number | Gets or sets the number of offscreen preloaded tabs of the Tabs. |
tabStrip | TabStrip | Gets or sets the tab strip of the BottomNavigation. |
tabsPosition | "top", "bottom" | Gets or sets the position state of the Tabs. Default value: top |
iOSTabBarItemsAlignment | "leading", "justified", "center", "centerSelected" | iOS Only: Gets or set the MDCTabBarAlignment of the tab bar icons in iOS. Default value: justified |
Name | Description |
---|---|
selectedIndexChanged | Emitted when the selectedIndex property is changed. |
loaded | Emitted when the view is loaded. |
unloaded | Emitted when the view is unloaded. |
layoutChanged | Emitted when the layout bounds of a view changes due to layout processing. |
FAQs
Material Design Bottom Navigation bars allow movement between primary destinations in an app. Tapping on a bottom navigation icon takes you directly to the associated view or refreshes the currently active view.
The npm package @nativescript-community/ui-material-bottom-navigation receives a total of 2,165 weekly downloads. As such, @nativescript-community/ui-material-bottom-navigation popularity was classified as popular.
We found that @nativescript-community/ui-material-bottom-navigation demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 19 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.