npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@nativescript-community/ui-appbar

v1.4.2

Published

App bar and page: Material top app bar (collapsing, lift on scroll) on Android, native navigation bar on iOS

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

classicoldsongclassicoldsongasharghiasharghifarfromrefugefarfromrefugeeddyverbruggeneddyverbruggenrigor789rigor789walkerrunpdxwalkerrunpdxdnrdnrkeerlkeerlcvietorcvietorbradmartinbradmartinrdlabordlabotralvestralvescjohn001cjohn001jcassidyavjcassidyavsebjeansebjeanedusperoniedusperoniammarahm-edammarahm-edmayerlenchmayerlenchdgmachadodgmachado

Keywords

NativeScriptJavaScriptAndroidiOS

Readme

| iOS | Android | | --- | --- | | | |

Table of Contents

Installation

npm install @nativescript-community/ui-appbar

The Android components use Material 3: see the repository README for the theme.

Usage

| | Android | iOS | |---|---|---| | AppPage | Page whose content is in a CoordinatorLayout (nested in the Page root: compatible with gesturehandler) | regular Page | | AppBar | MaterialToolbar in an AppBarLayout, M3 CollapsingToolbarLayout for medium / large | the navigation bar (Liquid Glass buttons on iOS 26), large title |

<appPage>
  <appBar title="Inbox" subtitle="3 unread" size="large" scrollBehavior="lift" />
  <collectionview ... />
</appPage>

Register the svelte elements once (registerElement of svelte-native): import { register } from '@nativescript-community/ui-appbar/svelte'; register();.

API

| property | | |---|---| | size | small (default), medium, large: title that collapses with the scroll | | scrollBehavior (Android notes: the surface of the bar is the AppBarLayout, the toolbar is flat and transparent; the icons follow the css color, the surface the css background-color, else the theme colors; lift changes the surface color and the status bar area follows) | none, lift (elevation / separator only when content scrolls under the bar), hide (the whole bar, also a large one, leaves the screen when scrolling down and comes back when scrolling up) | | subtitle, formattedTitle | subtitle, title with spans | | translucent | the content scrolls under the bar, which is see through: iOS a blur tinted with the color of the bar, Android the color of the bar at 85%. Set scrollTarget; the scrolling view must be the content of the page (iOS) | | searchable, searchHint | search: iOS UISearchController under the title, Android a collapsible SearchView action. Events searchChange, searchSubmit, searchCancel (text) | | searchMode | Android: collapsible (default, a search icon in the bar) bar (Material 3 SearchBar under the title which opens a full screen SearchView; its suggestions / results go in <appPageSearchContent>, a child of the page) or inline (Material 3 SearchBar that morphs into an editable field in place: filter your content from searchChange, no full screen view; without a title the bar hosts the navigation icon and the actions, closeSearch() closes it) | | searchPlacement | iOS 26: where the search bar goes: stacked (under the title, default), integrated (a glass button / field in the bar), integratedButton, integratedCentered, automatic | | scrollTarget, scrollTargetId | the scrolling view the bar follows (iOS: setContentScrollView), as a view or by its id in the page. By default (Android) the first scrolling view of the content is searched: giving it spares that search |

Status and limits: see APPBAR_PLAN.md. On iOS a large title on a pushed page uses the UIKit Always mode, which never shows the inline title: a title view is shown while the bar is collapsed (the height of the bar tells). On the root page of the Frame UIKit does it. On Android the bar draws under the status bar (edge to edge) and the page handles the inset.

Items

<appBarItem> is the core ActionItem with menu (items of @nativescript-community/ui-menu: iOS native menu of the bar button, Android popup menu) and prominent (iOS 26 tinted glass).

<appBar title="Inbox">
  <appBarItem text="More" icon="sys://ellipsis" menu={[{ title: 'Share', onSelect }, { separator: true }, { title: 'Delete', destructive: true }]} />
  <appBarItem text="Edit" prominent />
</appBar>

Hide on scroll

hideOnScroll (the scrolling view) of @nativescript-community/ui-floatingactionbutton and @nativescript-community/ui-bottomnavigationbar: hidden when the content scrolls down, shown when it scrolls up.

<appPage>
  <appBar searchable searchMode="bar" on:searchChange={(e) => (query = e.text)} />
  <collectionview ... />
  <appPageSearchContent><label text="results for {query}" /></appPageSearchContent>
</appPage>

On iOS searchMode and searchContent are ignored: the UISearchController is used, filter the main content from searchChange.

badge on an item (and on a bottom item): a number, a text or true (a dot). Android BadgeDrawable, iOS 26 UIBarButtonItemBadge (the iOS 26.5 bottom toolbar does not draw it, the navigation bar does).

A view inside the item is its actionView: use our components in the bar. The view gets its own tap event. On iOS 26 the system puts it in a Liquid Glass capsule, use a plain / text variant of the button.

<appBarItem ios.position="right" android.position="actionBar">
  <uibutton text="Go" variant="text" on:tap={go} />
</appBarItem>

Bottom items

bottomBarStyle (Android: floating, the default, a Material 3 Expressive floating toolbar over the content, or bottomAppBar; iOS ignores it) and bottomItems ({ text, icon, spacer, menu, color, onTap }, event bottomItemTap; color tints the button (icon and text) on both platforms, e.g. the error color for a delete action; menu makes the button open a menu: iOS native, Android popup above the bar): iOS the bottom toolbar of the navigation controller (Liquid Glass buttons on iOS 26, spacer is a flexible space), Android a Material BottomAppBar (with scrollBehavior="hide" it hides on scroll; the actions are at the start, spacer is ignored). The last items of the scrollTarget stay above the Android bar. The icons of the Android bars take the color of the bar (color css, else the theme colorOnSurface) and follow a dark / light switch.

<appBar bottomItems={[{ icon: 'sys://house', text: 'Home', onTap }, { spacer: true }, { icon: 'sys://plus', text: 'Add', onTap }]} />

Custom views (Android)

<appBarSearchField> (searchField) replaces the built-in text field of the inline search by any NativeScript TextField (core, or @nativescript-community/ui-textfield). The bar puts it between the back and the clear buttons and keeps searchChange, searchSubmit, the clear button and the keyboard working with it. <appBarBottomView> (bottomView) puts any view in the floating bottom toolbar instead of the bottomItems buttons (bottomItems stay the default; the bottomAppBar style ignores bottomView). Both are ignored on iOS.

<appBar searchable searchMode="inline" on:searchChange={(e) => (query = e.text)}>
  <appBarSearchField><textfield hint="Search" /></appBarSearchField>
  <appBarBottomView><stacklayout orientation="horizontal"><button text="Share" /></stacklayout></appBarBottomView>
</appBar>

Overlay

Views anchored to the page itself (a FAB, a bottom bar) go in <appPageOverlay>, not in the page content: on Android the content of an AppPage is taller than the screen while a medium / large bar is expanded, so a bottom anchored view would be off screen. On iOS the overlay is laid out over the content, inside the safe area; its empty areas let the touches go through.

<appPage>
  <appBar ... />
  <collectionview ... />
  <appPageOverlay>
    <uifloatingactionbutton verticalAlignment="bottom" horizontalAlignment="right" />
  </appPageOverlay>
</appPage>

Demos and Development

Repo Setup

The repo uses submodules. If you did not clone with --recursive then you need to call

git submodule update --init

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

To develop and test: if you use yarn then run yarn if you use pnpm then run pnpm i

Interactive Menu:

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

Build

npm run build.all

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

Demos

npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue] Instead you work in demo-snippets/[ng|react|svelte|vue] You can start from the install.ts of each flavor to see how to register new demos

Contributing

Update repo

You can update the repo files quite easily

First update the submodules

npm run update

Then commit the changes Then update common files

npm run sync

Then you can run yarn|pnpm, commit changed files if any

Update readme

npm run readme

Update doc

npm run doc

Publish

The publishing is completely handled by lerna (you can add -- --bump major to force a major release) Simply run

npm run publish

modifying submodules

The repo uses https:// for submodules which means you won't be able to push directly into the submodules. One easy solution is t modify ~/.gitconfig and add

[url "ssh://[email protected]/"]
	pushInsteadOf = https://github.com/

Questions

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.