npmpackage.info

Gathering detailed insights and metrics for @apollosproject/ui-onboarding

@apollosproject/ui-onboarding

4.1.0

NOASSERTION

JavaScript

1.31 MB

2.2

Installations

npm install @apollosproject/ui-onboarding

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Min. Node Version

>=14

Node Version

16.13.1

NPM Version

lerna/4.0.0/node@v16.13.1+x64 (darwin)

Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

JavaScript

TypeScript

Objective-C

Java

Shell

Kotlin

Swift

Ruby

Starlark

JavaScript (92.37%)

TypeScript (4.43%)

Objective-C (0.81%)

Java (0.75%)

Shell (0.51%)

Kotlin (0.41%)

Swift (0.38%)

Ruby (0.26%)

Starlark (0.07%)

C (0.01%)

Developer

apollosproject

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

NOASSERTION License

1 Stars

1,971 Commits

3 Watchers

1 Branches

15 Contributors

Updated on Nov 09, 2023

Maintainers

View All 15 Contributors

Package Meta Information

Latest Version

4.1.0

Package Id

@apollosproject/ui-onboarding@4.1.0

Unpacked Size

1.31 MB

Size

93.47 kB

File Count

NPM Version

lerna/4.0.0/node@v16.13.1+x64 (darwin)

Node Version

16.13.1

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Apollos UI: OnBoarding

React Native components to create an Onboarding experience.

Installation

This package should be in your Apollo's Client if you got started with the example repo. For an example implmentation, check the apolloschurchapp.

Usage

This package lets you configure onboarding in three different ways.

1. Use the built in connected components.

The "connected components" are built to work for the majority of use cases. They rely on an unmodified schema, but will probabbly work if you made additions or subtle changes.

To use these components, import them from the @apollosproject/ui-onboarding package and compose them into the main slider.

import {
  AskNotificationsConnected,
  AskNameConnected,
  FeaturesConnected,
  AboutYouConnected,
  LocationFinderConnected,
  OnboardingSwiper,
} from '@apollosproject/ui-onboarding';
...
function Onboarding({ navigation }) {
  return (
    <OnboardingSwiper>
      {({ swipeForward }) => (
        <>
          <AskNameConnected onPressPrimary={swipeForward} />
          <FeaturesConnected
            onPressPrimary={swipeForward}
            BackgroundComponent={
              <GradientOverlayImage source={'https://picsum.photos/640/640/?random'} />
            }
          />
          <AboutYouConnected
            onPressPrimary={swipeForward}
            BackgroundComponent={
              <GradientOverlayImage source={'https://picsum.photos/640/640/?random'} />
            }
          />
          <LocationFinderConnected
            onPressPrimary={swipeForward}
            onNavigateToLocationFinder={() => {
              navigation.navigate('Location', {
                onFinished: swipeForward,
              });
            }}
            BackgroundComponent={
              <GradientOverlayImage source={'https://picsum.photos/640/640/?random'} />
            }
          />
          <ApolloConsumer>
            {(client) => (
              <AskNotificationsConnected
                onPressPrimary={() => navigation.navigate('Home')}
                onRequestPushPermissions={() =>
                  requestPushPermissions({ client })
                }
                primaryNavText={'Finish'}
                BackgroundComponent={
                  <GradientOverlayImage source={'https://picsum.photos/640/640/?random'} />
                }
              />
            )}
          </ApolloConsumer>
        </>
      )}
    </OnboardingSwiper>
  );
}

As you can see, each of the connected components may require specific props that may change depending on how your app is implemented. The notifications connected component right now is a little hairy, but that will be fixed in the future with a ui-notifications package.

2. Use the built in visual components, but "connect them" yourself.

This is the best strategy if you wish to change the schema or mutations for your components, but don't want to change the way the components look or function.

The aproach is roughly the same as above, but you will have to define your connected components locally. You can import the underlying visual components from the ui-onboarding package by importing without Connected. IE: import { ConnectedAskName } ... becomes import { AskName } ....

3. Use our component building blocks to build your own new Onboarding slides.

This is the most advanced implementation, but gives the most control. You can import the <Slide> component (whose props are documented in PropTypes) to construct your very own slide. You can look at the slides defined in this package for reference on how to construct a custom slide.

Exported Components.

OnboardingSwiper

No props are needed. The first and only child should be a callback function which is called passing the arg ({ swipeForward }). Calling swipe forward imperatively will move the onboarding slider forward by one slide. The callback function should return

A. A React.Fragment with each slide node as a child. B. An array of slide nodes.

Looking for more flexibility? Want to jump to a specific slide or swipe back. Checkout the scrollBy arg.

AskName, AskNameConnected

AskNotifications, AskNotificationsConnected

AboutYou, AboutYouConnected

LocationFinder, LocationFinderConnected

Analytics

Using this package automatically provides analytics over the onboarding experience, assuming you areusing the @apollosproject/ui-analytics package.

As of right now, each screen emits a "ScreenName Completed" or "ScreenName Skipped" event when the screen has been completed or skipped. We consider this an "80 for the 20" aproach, because it is enough information to construct a funnel chart display points at which a user drops off from the Onboarding flow.

If further analytics events are required, submit an RFC (or a pull-request!) with what you are looking for, and our team will take a look.

You can implement your own anlytics by passing a pressPrimaryEventName or pressSecondaryEventName prop to the Screen component. If those strings are passed, a track will be called when the primary or secondary button is pressed.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

9

License

Determines if the project has defined a license.

7

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

SAST

Determines if the project uses static code analysis.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Fuzzing

Determines if the project uses fuzzing.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/ApollosProject/apollos-apps/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/ApollosProject/apollos-apps/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/ApollosProject/apollos-apps/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/ApollosProject/apollos-apps/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/ApollosProject/apollos-apps/ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/ApollosProject/apollos-apps/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/ApollosProject/apollos-apps/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:57: update your workflow using https://app.stepsecurity.io/secureworkflow/ApollosProject/apollos-apps/ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/ApollosProject/apollos-apps/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/ApollosProject/apollos-apps/deploy.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/ApollosProject/apollos-apps/deploy.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/ApollosProject/apollos-apps/deploy.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/ApollosProject/apollos-apps/deploy.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/ApollosProject/apollos-apps/deploy.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/ApollosProject/apollos-apps/deploy.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/ApollosProject/apollos-apps/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/ApollosProject/apollos-apps/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/reports.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/ApollosProject/apollos-apps/reports.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/reports.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/ApollosProject/apollos-apps/reports.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/reports.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/ApollosProject/apollos-apps/reports.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stale.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/ApollosProject/apollos-apps/stale.yml/main?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/ci.yml:66
Warn: npmCommand not pinned by hash: .github/workflows/deploy.yml:26
Warn: npmCommand not pinned by hash: .github/workflows/deploy.yml:48
Info: 0 out of 15 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 6 third-party GitHubAction dependencies pinned
Info: 0 out of 3 npmCommand dependencies pinned

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

129 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-cr5q-6q9f-rq6q
Warn: Project is vulnerable to: GHSA-j6gc-792m-qgm2
Warn: Project is vulnerable to: GHSA-pj73-v5mw-pm9j
Warn: Project is vulnerable to: GHSA-2rxp-v6pw-ch6m
Warn: Project is vulnerable to: GHSA-4xqq-m2hx-25v8
Warn: Project is vulnerable to: GHSA-5866-49gr-22v4
Warn: Project is vulnerable to: GHSA-r55c-59qm-vjw6
Warn: Project is vulnerable to: GHSA-vg3r-rm7w-2xgh
Warn: Project is vulnerable to: GHSA-vmwr-mc7x-5vc3
Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-c2jc-4fpr-4vhg
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-36jr-mh4h-2g58
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-653v-rqx9-j85p
Warn: Project is vulnerable to: GHSA-4gxf-g5gf-22h4
Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-9pv7-vfvm-6vr7
Warn: Project is vulnerable to: GHSA-7mhc-prgv-r3q4
Warn: Project is vulnerable to: GHSA-vfrc-7r7c-w9mx
Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9
Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w
Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg
Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
Warn: Project is vulnerable to: GHSA-3949-f494-cm99
Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
Warn: Project is vulnerable to: GHSA-6fw4-hr69-g3rv
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx
Warn: Project is vulnerable to: GHSA-2j79-8pqc-r7x6
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-gp95-ppv5-3jc5
Warn: Project is vulnerable to: GHSA-54xq-cgqr-rpm3
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx
Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-6f62-3596-g6w7
Warn: Project is vulnerable to: GHSA-r995-q44h-hr64
Warn: Project is vulnerable to: GHSA-593m-55hh-j8gv
Warn: Project is vulnerable to: GHSA-hxwm-x553-x359
Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
Warn: Project is vulnerable to: GHSA-2p3c-p3qw-69r4
Warn: Project is vulnerable to: GHSA-j5g3-5c8r-7qfx
Warn: Project is vulnerable to: GHSA-7gc6-qh9x-w6h8
Warn: Project is vulnerable to: GHSA-wm7h-9275-46v2
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-f5x2-xv93-4p23
Warn: Project is vulnerable to: GHSA-gmpm-xp43-f7g6
Warn: Project is vulnerable to: GHSA-pf27-929j-9pmm
Warn: Project is vulnerable to: GHSA-327c-qx3v-h673
Warn: Project is vulnerable to: GHSA-x4cf-6jr3-3qvp
Warn: Project is vulnerable to: GHSA-mph8-6787-r8hw
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-33f9-j839-rf8h
Warn: Project is vulnerable to: GHSA-c36v-fmgq-m8hx
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
Warn: Project is vulnerable to: GHSA-px4h-xg32-q955
Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653
Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj
Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67
Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w
Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
Warn: Project is vulnerable to: GHSA-7f53-fmmv-mfjv
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693

Score

2.2

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

@apollosproject/ui-onboarding - 4.1.0 | npmpackage.info

@apollosproject/ui-onboarding

Installations

Developer Guide

No

CommonJS

>=14

16.13.1

lerna/4.0.0/node@v16.13.1+x64 (darwin)

Pull Requests

0

0

0

Issues

0

0

0

Releases

Unable to fetch releases

Languages

Developer

apollosproject

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Apollos UI: OnBoarding

Installation

Usage

1. Use the built in connected components.

2. Use the built in visual components, but "connect them" yourself.

3. Use our component building blocks to build your own new Onboarding slides.

Exported Components.

OnboardingSwiper

AskName, AskNameConnected

AskNotifications, AskNotificationsConnected

AboutYou, AboutYouConnected

LocationFinder, LocationFinderConnected

Analytics

10

9

7

0

0

0

0

0

0

0

0

0

0

2.2

/10