Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
react-native-interactive-walkthrough
Advanced tools
Create interactive walkthroughs and onboarding tutorials in react-native.
A cross-platform interactive walkthrough library for React Native that is performant, simple, extensible, and works with Expo.
Other libraries for react-native had fancy SVG masks, but what if I wanted only the highlighted area to be pressable?
What if I wanted to customize the overlay and give it the abiliity to go backward, forward, or to any other step in the process?
Out of this need, a new library was born.
Please keep in mind that this library is currently under development, and should primarly be considered as being in a beta stage.
https://user-images.githubusercontent.com/525212/147407154-d7374b9a-c370-4e75-a269-ecd225b4bbbc.mp4
This library will likely work with most versions of React Native, but keep in mind that it was built with 0.64.3
of React Native.
It will also work with Expo apps as well since there is no library linking required.
react-native-walkthrough Version | Required React Native Version |
---|---|
1.x.x | >= 0.63 |
Open a Terminal in the project root and run:
yarn add react-native-walkthrough
Make sure you've also have installedreact-native-safe-area-view
with version >= 3.0.0
yarn add react-native-safe-area-view
Use the enableExperimentalLayoutAnimation
somewhere on bootup to make sure we can use LayoutAnimations.
We're done!
First you need to wrap the root of your app with the WalkthroughProvider
.
import * as React from 'react';
import { WalkthroughProvider } from 'react-native-walkthrough';
import MyAwesomeApp from './src/MyAwesomeApp';
export default function App() {
return (
<WalkthroughProvider
// Pass in a hook that determines if the screen is focused or not. This is important if you have your walkthrough going from screen to screen.
// useIsFocused={useIsFocused}
>
<MyAwesomeApp />
</WalkthroughProvider>
);
}
Now you can use useWalkthroughStep
to create your steps within the components.
import SafeAreaView from 'react-native-safe-area-view';
export default function HomeScreen() {
const {isWalkthroughOn, isReady, start} = usePostWalkthroughStep({
number: 1,
OverlayComponent: WelcomeMessageOverlay,
fullScreen: true,
});
const {onLayout} = usePostWalkthroughStep({
number: 2,
enableHardwareBack: true,
OverlayComponent: NearbyUsersOverlay,
});
useEffect(
() => {
start();
},
[],
)
return (
<View style={{ flex: 1 }}>
<View style={{height: 10}} onLayout={onLayout}>
<Text>
Here is my app!
</Text>
</View>
</View>
);
}
An overlay component can look like this:
const WelcomeMessageOverlay = ({next}: IOverlayComponentProps) => {
return <SafeAreaView style={styles.fullScreenContainer}>
<View style={styles.fullScreenContents}>
<Text style={styles.h1}>
Let's take a quick tour!
</Text>
<ArrowButton
large
onPress={next}
style={styles.arrowCta}
/>
</View>
</SafeAreaView>
};
Or you can position it be relative to any element on your screen:
const NearbyUsersOverlay = ({next, previous, step: {mask}}: IOverlayComponentProps) =>
<WalkthroughCallout
style={{position: "absolute", top: mask.y + mask.height + overlayPadding, left: 50}}
corner="topLeft"
title={`Nearby ${constants.userName.titlePlural}`}
text={`These are all your friends and interesting ${constants.userName.plural} nearby!`}
next={next}
previous={previous}
/>;
The code is relatively short and readable. If you use TS, the interfaces are very straightforward. When we have more time, we'll add more in-depth documentation.
This app is currently being used in the Tribefy app (tribefy.com).
We're looking for maintainers, so if you are interested please contact open-source@tribefy.com.
FAQs
Create interactive walkthroughs and onboarding tutorials in react-native.
The npm package react-native-interactive-walkthrough receives a total of 40 weekly downloads. As such, react-native-interactive-walkthrough popularity was classified as not popular.
We found that react-native-interactive-walkthrough demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.