{"id":17450384,"url":"https://github.com/sean-perkins/nativescript-onboarding","last_synced_at":"2025-05-05T20:13:52.351Z","repository":{"id":121123414,"uuid":"105327725","full_name":"sean-perkins/nativescript-onboarding","owner":"sean-perkins","description":"Example on-boarding application built with NativeScript Angular.","archived":false,"fork":false,"pushed_at":"2017-10-07T02:32:55.000Z","size":2337,"stargazers_count":17,"open_issues_count":2,"forks_count":6,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-05T20:13:46.199Z","etag":null,"topics":["nativescript","nativescript-angular","onboarding"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sean-perkins.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2017-09-30T00:26:55.000Z","updated_at":"2024-05-30T16:06:13.000Z","dependencies_parsed_at":"2023-03-24T03:32:48.733Z","dependency_job_id":null,"html_url":"https://github.com/sean-perkins/nativescript-onboarding","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sean-perkins%2Fnativescript-onboarding","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sean-perkins%2Fnativescript-onboarding/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sean-perkins%2Fnativescript-onboarding/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sean-perkins%2Fnativescript-onboarding/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sean-perkins","download_url":"https://codeload.github.com/sean-perkins/nativescript-onboarding/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252569646,"owners_count":21769517,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["nativescript","nativescript-angular","onboarding"],"created_at":"2024-10-17T22:14:54.320Z","updated_at":"2025-05-05T20:13:52.330Z","avatar_url":"https://github.com/sean-perkins.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NativeScript Onboarding App\nInstruct your users with a beautiful interface that quickly showcases how to use your application. On-board new users to your NativeScript application with ease.\n\n---\n\n**Current Version**: 1.0.0\n\n**Release Date**: 09/30/2017\n\n**Last Updated**: 09/30/2017\n\n**Author**: Sean Perkins _(\u003csean@devonite.com\u003e)_, Devonite\n\n---\n\n### Features\n- Supports iOS and Android\n- Pre-built Animations (`slide_up`, `slide_down`, `slide_left`, `slide_right`, `stack_over`, `stack_under`)\n- Configurable Properties for: background color, title, description, skip button text, continue button text and image url.\n\n### Demo Images\n\n|iOS|Android|\n|:---:|:---:|\n|\u003cimg src=\"https://user-images.githubusercontent.com/13732623/31042945-54725d58-a581-11e7-8197-316814619283.gif\" width=\"100%\" /\u003e|\u003cimg src=\"https://user-images.githubusercontent.com/13732623/31042991-2dd086a6-a582-11e7-93a6-10c00a406600.gif\" width=\"100%\" /\u003e|\n\n### Requirements\n1. `nativescript-angular@~4.2.0`\n2. `tns-core-modules@3.1.0`\n3. Underscore named image paths (for Android)\n\n## Integrating Into Your Application\nYou can easily integrate this module and functionality into your existing application by following these instructions:\n\n1. Copy the fonts located in `app/fonts` into your project.\n2. Copy the `onboarding` folder and contents into your project.\n3. Import `OnboardingModule` into your project's feature module.\n4. Copy over any asset images desired into your `App_Resources` directories for each platform.\n\n### Recommended Component Usage\n\n_example.component.html_\n\n```html\n\u003cns-onboarding\n    [slides]=\"slides\"\n    (onFinish)=\"finish()\"\u003e\u003c/ns-onboarding\u003e\n```\n\n_example.component.ts_\n\n```js\nslides = [\n    {\n        title: 'Example Title',\n        description: 'Example Description',\n        okButtonText: 'Continue',\n        skipButtonText: 'Skip',\n        backgroundColor: '#8A63B3',\n        imageUrl: 'res://slide_1',\n        animation: 'slide_left'\n    }\n];\n```\n\n### Experimental Component Usage\n\nThis is not a recommended usage, but you may use the individual slide component directly. Animations are not expected to work with this method. You may try manage the `translateX` and `translateY` properties directly.\n\n_example.component.html_\n\n```html\n\u003cns-onboarding-slide\n    [interactive]=\"true\"\n    [visible]=\"true\"\n    title=\"Example Title\"\n    description=\"Example Description\"\n    okButtonText=\"Continue\"\n    skipButtonText=\"Skip\"\n    imageUrl=\"res://slide_1\"\n    backgroundColor=\"#8A63B3\"\n    [hasNext]=\"false\"\u003e\u003c/ns-onboarding-slide\u003e\n\n```\n\n## Animations\n\nThere are **6** supported animation types that can be passed as an option to the onboarding component.\n\n1. `slide_up` - The slides will animate from the bottom towards the top.\n2. `slide_down` - The slides will animate from the top towards the bottom.\n3. `slide_left` - The slides will animate from the right towards the left.\n4. `slide_right` - The slides will animate from the left towards the right.\n5. `stack_over` - The current slide will animate down while the next slide will animate down over.\n6. `stack_under` - The current slide will animate up while the next slide will animate under from the bottom.\n\n**Note**: For `slide_left` and `slide_right` animations, the status bar background will animate cleanly across. If desired, you can disable the transparent status bar by passing `disableStatusBar` as false to the `ns-onboarding` component.\n\n```html\n\u003cns-onboarding\n    [slides]=\"slides\"\n    [disableStatusBar]=\"false\"\u003e\u003c/ns-onboarding\u003e\n```\n\n### Event Hooks\n1. `ns-onboarding`\n\nThis component has two hooks for `(onSkip)` and `(onFinish)`.\n\nonSkip - When the user selects the skip option. The `$event` object contains the slide that was skipped.\n\nonFinish - When the user has completed all slides or skipped the onboarding. The `$event` object contains the boolean value of if the onboarding was skipped.\n\n## Example App\n\nThe example app includes the appropriate configuration to handle both `SASS` stylesheets as well as webpack builds.\n\nTo get started, install all needed NPM dependencies:\n\n- `npm install`\n\nYou may leverage the stock NativeScript CLI commands to run the example app:\n\n- `tns run ios`\n- `tns run android`\n\nTo leverage the webpack build, you may run:\n\n- `npm run start-ios-bundle`\n- `npm run start-android-bundle`\n\nPlease refer to the respective repositories and/or the `package.json` for additional CLI commands.\n\n\n### Contributors\n\n[\u003cimg alt=\"Sean perkins\" src=\"https://avatars1.githubusercontent.com/u/13732623?v=3\u0026s=117\" width=\"117\"\u003e](https://github.com/sean-perkins) |\n:---:\n|[Sean Perkins](https://github.com/sean-perkins)|\n\n\n### Image Rights\n\n- Icon images are a snapshot of animated sequences created by [Virgil Pana](https://dribbble.com/virgilpana).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsean-perkins%2Fnativescript-onboarding","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsean-perkins%2Fnativescript-onboarding","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsean-perkins%2Fnativescript-onboarding/lists"}