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.
@apollosproject/ui-onboarding
Advanced tools
Readme
React Native components to create an Onboarding experience.
This package should be in your Apollo's Client if you got started with the example repo. For an example implmentation, check the apolloschurchapp
.
This package lets you configure onboarding in three different ways.
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.
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 } ...
.
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.
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.
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.
FAQs
React Native components to create an Onboarding experience.
The npm package @apollosproject/ui-onboarding receives a total of 1,124 weekly downloads. As such, @apollosproject/ui-onboarding popularity was classified as popular.
We found that @apollosproject/ui-onboarding demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 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.