{"id":19220052,"url":"https://github.com/nativescript-community/ui-persistent-bottomsheet","last_synced_at":"2026-03-11T11:24:51.429Z","repository":{"id":42331461,"uuid":"311905963","full_name":"nativescript-community/ui-persistent-bottomsheet","owner":"nativescript-community","description":null,"archived":false,"fork":false,"pushed_at":"2026-02-02T11:31:53.000Z","size":6203,"stargazers_count":13,"open_issues_count":2,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-02-03T00:59:05.988Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://nativescript-community.github.io/ui-persistent-bottomsheet/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nativescript-community.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["farfromrefug"]}},"created_at":"2020-11-11T08:19:13.000Z","updated_at":"2026-02-02T11:31:57.000Z","dependencies_parsed_at":"2022-09-26T16:21:50.848Z","dependency_job_id":"bde80c48-2579-49a0-8192-1d8f85f9c207","html_url":"https://github.com/nativescript-community/ui-persistent-bottomsheet","commit_stats":{"total_commits":102,"total_committers":5,"mean_commits":20.4,"dds":0.4901960784313726,"last_synced_commit":"575170b3778c5237b93b63218db50f9f0e9ce97f"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/nativescript-community/ui-persistent-bottomsheet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-persistent-bottomsheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-persistent-bottomsheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-persistent-bottomsheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-persistent-bottomsheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nativescript-community","download_url":"https://codeload.github.com/nativescript-community/ui-persistent-bottomsheet/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-persistent-bottomsheet/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29084091,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-04T03:31:03.593Z","status":"ssl_error","status_checked_at":"2026-02-04T03:29:50.742Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T14:33:47.963Z","updated_at":"2026-03-11T11:24:51.415Z","avatar_url":"https://github.com/nativescript-community.png","language":"TypeScript","funding_links":["https://github.com/sponsors/farfromrefug"],"categories":["Plugins"],"sub_categories":["UI Plugins"],"readme":"\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\n\u003c!--  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      DO NOT EDIT THIS READEME DIRECTLY! Edit \"bluesprint.md\" instead.\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --\u003e\n\u003ch1 align=\"center\"\u003e@nativescript-community/ui-persistent-bottomsheet\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\t\t\u003ca href=\"https://npmcharts.com/compare/@nativescript-community/ui-persistent-bottomsheet?minimal=true\"\u003e\u003cimg alt=\"Downloads per month\" src=\"https://img.shields.io/npm/dm/@nativescript-community/ui-persistent-bottomsheet.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://www.npmjs.com/package/@nativescript-community/ui-persistent-bottomsheet\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@nativescript-community/ui-persistent-bottomsheet.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eNativeScript plugin that allows you to easily add a persistent bottomsheet to your projects.\u003c/b\u003e\u003c/br\u003e\n  \u003csub\u003e\u003csub\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\n| \u003cimg src=\"https://raw.githubusercontent.com/nativescript-community/ui-persistent-bottomsheet/master/images/demo-ios.gif\" height=\"500\" /\u003e | \u003cimg src=\"https://raw.githubusercontent.com/nativescript-community/ui-persistent-bottomsheet/master/images/demo-android.gif\" height=\"500\" /\u003e |\n| --- | ----------- |\n| iOS Demo | Android Demo |\n\n\r\n[](#table-of-contents)\r\n\r\n\r\n[](#table-of-contents)\r\n\r\n## Table of Contents\n\n* [Installation](#installation)\r\n* [Configuration](#configuration)\r\n* [API](#api)\r\n\t* [Properties](#properties)\r\n\t* [Methods](#methods)\r\n* [Usage in Angular](#usage-in-angular)\r\n* [Usage in Vue 3](#usage-in-vue-3)\r\n* [Usage in Vue 2](#usage-in-vue-2)\r\n* [Usage in Svelte](#usage-in-svelte)\r\n* [Usage in React](#usage-in-react)\r\n* [Demos](#demos)\r\n* [Demos and Development](#demos-and-development)\r\n\t* [Repo Setup](#repo-setup)\r\n\t* [Build](#build)\r\n\t* [Demos](#demos-1)\r\n* [Contributing](#contributing)\r\n\t* [Update repo ](#update-repo-)\r\n\t* [Update readme ](#update-readme-)\r\n\t* [Update doc ](#update-doc-)\r\n\t* [Publish](#publish)\r\n\t* [modifying submodules](#modifying-submodules)\r\n* [Questions](#questions)\n\n\r\n[](#installation)\r\n\r\n\r\n[](#installation)\r\n\r\n## Installation\nRun the following command from the root of your project:\n\n`ns plugin add @nativescript-community/ui-persistent-bottomsheet`\n\n\r\n[](#configuration)\r\n\r\n\r\n[](#configuration)\r\n\r\n## Configuration\nFor gestures to work, make sure to add the following code block inside the main application file (e.g. app.ts):\n\n```typescript\nimport { install } from '@nativescript-community/ui-persistent-bottomsheet';\ninstall();\n```\n\n\r\n[](#api)\r\n\r\n\r\n[](#api)\r\n\r\n## API\n\n### Properties\n\n| Property            | Default                           | Type                        | Description                                             |\n| ------------------- | --------------------------------- | --------------------------- | ------------------------------------------------------- |\n| bottomSheet          | `undefined`                       | `View`                      | View containing the content for the bottomsheet    |\n| gestureEnabled       | `true`                            | `boolean`                   | Boolean setting if swipe gestures are enabled           |\n| stepIndex            | `0`                            | `number`                   | the index of current step (mutable)           |\n| steps            | `[70]`                            | `number[]`                   | the different available steps           |\n| backdropColor        | `new Color('rgba(0, 0, 0, 0.7)')` | `Color`                     | The color of the backdrop behind the drawer             |\n\n\n\n### Methods\n\n| Name         | Return | Description                                     |\n| ------------ | ------ | ----------------------------------------------- |\n| install()    | `void` | Install gestures                                |\n\n\r\n[](#usage-in-angular)\r\n\r\n\r\n[](#usage-in-angular)\r\n\r\n## Usage in Angular\nImport the module into your project.\n\n```typescript\nimport { PBSModule } from \"@nativescript-community/ui-persistent-bottomsheet/angular\";\n\n@NgModule({\n    imports: [\n        PBSModule\n    ]\n    schemas: [\n        NO_ERRORS_SCHEMA\n    ]\n})\n\nexport class AppModule { }\n```\n\nThen in your component add the following:\n\n```xml\n\u003cBottomSheet\u003e\n    \u003cStackLayout backgroundColor=\"white\"\u003e\n      \u003cLabel text=\"This is the main content\"\u003e\u003c/Label\u003e\n    \u003c/StackLayout\u003e\n    \u003cGridLayout bottomSheet backgroundColor=\"white\" height=\"70\"\u003e\n      \u003cLabel text=\"This is the side drawer content\"\u003e\u003c/Label\u003e\n    \u003c/GridLayout\u003e\n\n   \n\u003c/BottomSheet\u003e\n```\nFor a more complete example, look in the `demo-ng` directory.\n\n\r\n[](#usage-in-vue-3)\r\n\r\n\r\n[](#usage-in-vue-3)\r\n\r\n## Usage in Vue 3\n\nRegister the plugin in your `app.ts`.\n\n```typescript\nimport BottomSheetPlugin from '@nativescript-community/ui-persistent-bottomsheet/vue3';\napp.use(BottomSheetPlugin);\n```\n\nThen in your component add the following:\n\n```xml\n\u003cBottomSheet\u003e\n    \u003cStackLayout backgroundColor=\"white\"\u003e\n      \u003cLabel text=\"This is the main content\" /\u003e\n    \u003c/StackLayout\u003e\n    \u003cGridLayout nodeRole=\"bottomSheet\" backgroundColor=\"white\" height=\"70\"\u003e\n      \u003cLabel text=\"This is the side drawer content\" /\u003e\n    \u003c/GridLayout\u003e\n\u003c/BottomSheet\u003e\n```\n\nFor a more complete example, look in the `demo-vue3` directory.\n\n\r\n[](#usage-in-vue-2)\r\n\r\n\r\n[](#usage-in-vue-2)\r\n\r\n## Usage in Vue 2\n\nRegister the plugin in your `app.js`.\n\n```typescript\nimport BottomSheetPlugin from '@nativescript-community/ui-persistent-bottomsheet/vue';\nVue.use(BottomSheetPlugin);\n```\n\nAdd this at the top of your webpack config file:\n```javascript\nconst NsVueTemplateCompiler = require('nativescript-vue-template-compiler');\n\nNsVueTemplateCompiler.registerElement('BottomSheet', () =\u003e require('@nativescript-community/ui-persistent-bottomsheet').BottomSheet, {\n    model: {\n        prop: 'stepIndex',\n        event: 'stepIndexChange'\n    }\n});\n```\n\nThen in your component add the following:\n\n```xml\n\u003cBottomSheet\u003e\n    \u003cStackLayout backgroundColor=\"white\"\u003e\n      \u003cLabel text=\"This is the main content\" /\u003e\n    \u003c/StackLayout\u003e\n    \u003cGridLayout ~bottomSheet backgroundColor=\"white\" height=\"70\"\u003e\n      \u003cLabel text=\"This is the side drawer content\" /\u003e\n    \u003c/GridLayout\u003e\n\n\u003c/BottomSheet\u003e\n```\nFor a more complete example, look in the `demo-vue` directory.\n\n\r\n[](#usage-in-svelte)\r\n\r\n\r\n[](#usage-in-svelte)\r\n\r\n## Usage in Svelte\n\nRegister the plugin in your `app.ts`.\n\n```typescript\nimport BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/svelte';\nBottomSheetElement.register();\n```\n\nThen in your component, add the following:\n\n```xml\n\u003cbottomsheet\u003e\n    \u003cstacklayout  backgroundColor=\"white\"\u003e\n      \u003cLabel text=\"This is the main content\" /\u003e\n    \u003c/stacklayout\u003e\n    \u003cgridlayout prop:bottomSheet backgroundColor=\"white\" height=\"70\"\u003e\n      \u003cLabel text=\"This is the side drawer content\" /\u003e\n    \u003c/gridlayout\u003e\n\n\u003c/bottomsheet\u003e\n```\nFor a more complete example, look in the `demo-svelte` directory.\n\n\r\n[](#usage-in-react)\r\n\r\n\r\n[](#usage-in-react)\r\n\r\n## Usage in React\n\nRegister the plugin in your `app.ts`.\n\n```typescript\nimport BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/react';\nBottomSheetElement.register();\n```\n\nThen in your component, add the following:\n```ts\nimport { BottomSheet } from \"@nativescript-community/ui-persistent-bottomsheet/react\"\n```\n\n```xml\n\u003cBottomSheet\u003e\n  \u003cstackLayout backgroundColor=\"white\"\u003e\n    \u003clabel text=\"This is the main content\" /\u003e\n  \u003c/stackLayout\u003e\n  \u003cgridLayout nodeRole=\"bottomSheet\" backgroundColor=\"white\" height=\"70\"\u003e\n    \u003clabel text=\"This is the side drawer content\" /\u003e\n  \u003c/gridLayout\u003e\n\n\u003c/BottomSheet\u003e\n```\nFor a more complete example, look in the `demo-react` directory.\n\n\n\r\n[](#demos)\r\n\r\n\r\n[](#demos)\r\n\r\n## Demos\nThis repository includes Angular, Vue.js, and Svelte demos. In order to run these execute the following in your shell:\n```shell\n$ git clone https://github.com/@nativescript-community/ui-persistent-bottomsheet\n$ cd ui-drawer\n$ npm run i\n$ npm run setup\n$ npm run build \u0026\u0026 npm run build.angular\n$ cd demo-ng # or demo-vue or demo-svelte or demo-react\n$ ns run ios|android\n```\n\n\r\n[](#demos-and-development)\r\n\r\n\r\n[](#demos-and-development)\r\n\r\n## Demos and Development\n\n\n### Repo Setup\n\nThe repo uses submodules. If you did not clone with ` --recursive` then you need to call\n```\ngit submodule update --init\n```\n\nThe package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.\n\nTo develop and test:\nif you use `yarn` then run `yarn`\nif you use `pnpm` then run `pnpm i`\n\n**Interactive Menu:**\n\nTo start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.\n\n### Build\n\n```bash\nnpm run build.all\n```\nWARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`\n\n### Demos\n\n```bash\nnpm run demo.[ng|react|svelte|vue].[ios|android]\n\nnpm run demo.svelte.ios # Example\n```\n\nDemo 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]`\nInstead you work in `demo-snippets/[ng|react|svelte|vue]`\nYou can start from the `install.ts` of each flavor to see how to register new demos \n\n\r\n[](#contributing)\r\n\r\n\r\n[](#contributing)\r\n\r\n## Contributing\n\n### Update repo \n\nYou can update the repo files quite easily\n\nFirst update the submodules\n\n```bash\nnpm run update\n```\n\nThen commit the changes\nThen update common files\n\n```bash\nnpm run sync\n```\nThen you can run `yarn|pnpm`, commit changed files if any\n\n### Update readme \n```bash\nnpm run readme\n```\n\n### Update doc \n```bash\nnpm run doc\n```\n\n### Publish\n\nThe publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)\nSimply run \n```shell\nnpm run publish\n```\n\n### modifying submodules\n\nThe repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify `~/.gitconfig` and add\n```\n[url \"ssh://git@github.com/\"]\n\tpushInsteadOf = https://github.com/\n```\n\n\r\n[](#questions)\r\n\r\n\r\n[](#questions)\r\n\r\n## Questions\n\nIf you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).\n\n\r\n[](#demos-and-development)\r\n\r\n## Demos and Development\n\n\n### Repo Setup\n\nThe repo uses submodules. If you did not clone with ` --recursive` then you need to call\n```\ngit submodule update --init\n```\n\nThe package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.\n\nTo develop and test:\nif you use `yarn` then run `yarn`\nif you use `pnpm` then run `pnpm i`\n\n**Interactive Menu:**\n\nTo start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.\n\n### Build\n\n```bash\nnpm run build.all\n```\nWARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`\n\n### Demos\n\n```bash\nnpm run demo.[ng|react|svelte|vue].[ios|android]\n\nnpm run demo.svelte.ios # Example\n```\n\nDemo 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]`\nInstead you work in `demo-snippets/[ng|react|svelte|vue]`\nYou can start from the `install.ts` of each flavor to see how to register new demos \n\n\r\n[](#contributing)\r\n\r\n## Contributing\n\n### Update repo \n\nYou can update the repo files quite easily\n\nFirst update the submodules\n\n```bash\nnpm run update\n```\n\nThen commit the changes\nThen update common files\n\n```bash\nnpm run sync\n```\nThen you can run `yarn|pnpm`, commit changed files if any\n\n### Update readme \n```bash\nnpm run readme\n```\n\n### Update doc \n```bash\nnpm run doc\n```\n\n### Publish\n\nThe publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)\nSimply run \n```shell\nnpm run publish\n```\n\n### modifying submodules\n\nThe repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify `~/.gitconfig` and add\n```\n[url \"ssh://git@github.com/\"]\n\tpushInsteadOf = https://github.com/\n```\n\r\n[](#questions)\r\n\r\n## Questions\n\nIf you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fui-persistent-bottomsheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript-community%2Fui-persistent-bottomsheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fui-persistent-bottomsheet/lists"}