
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
react-native-interactive-tutorial
Advanced tools
Interactive tutorial with step-by-step guide
yarn add react-native-interactive-tutorial
yarn add react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-svg
yarn add @react-native-async-storage/async-storage
Full example you can find here
We can divide the usage into 4 parts:
InteractiveTutorial.tsx:
import { type PropsWithChildren, useCallback, useMemo } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Button } from 'react-native';
import {
type DescriptionCardProps,
type SharedDescriptionCardButtonProps,
InteractiveTutorialContainer,
SharedDescriptionCard,
} from 'react-native-interactive-tutorial';
export enum TARGETS {
Target1,
Target2,
Target3,
}
export default function InteractiveTutorial({ children }: PropsWithChildren) {
// !! Here you can use different library
const storage = useMemo(
() => ({
set: (_: boolean) => AsyncStorage.setItem('tutorial', String(_)),
get: () => AsyncStorage.getItem('tutorial').then((_) => !!_),
}),
[]
);
// !! Here are description be key dictionary
const stack = useMemo(
() =>
new Map([
[TARGETS.Target1, 'Target 1'],
[TARGETS.Target2, 'Target 2'],
[TARGETS.Target3, 'Target 3'],
]),
[]
);
// !! Translations (for description card)
const translations = useMemo(
() => ({
prevButton: 'Prev',
nextButton: 'Next',
finishButton: 'Finish',
}),
[]
);
return (
<InteractiveTutorialContainer
translations={translations}
stack={stack}
initialTarget={TARGETS.Target1}
Card={DescriptionCard}
storage={storage}
>
{children}
</InteractiveTutorialContainer>
);
}
// !! Here you can override description card with your own
const DescriptionCard = (props: DescriptionCardProps) => {
const DescriptionButton = useCallback(
({ type, ...rest }: SharedDescriptionCardButtonProps) => (
<Button {...rest} color={type === 'prev' ? 'darkblue' : 'blue'} />
),
[]
);
return <SharedDescriptionCard Button={DescriptionButton} {...props} />;
};
// any places in your app
const target1 = useUiElement(TARGETS.Target1, (_) => addBorderRadius(_, 10));
<View
style={[styles.column, styles.card]}
ref={target1.ref} // !! necessary prop
onLayout={target1.onLayout} // !! necessary prop
>
<Text>Target 1</Text>
</View>
import { useEffect } from 'react';
import { useInteractiveTutorial } from 'react-native-interactive-tutorial';
export default function useTutorialRunner() {
const tutorial = useInteractiveTutorial();
useEffect(() => {
if (tutorial.finished === false) {
setTimeout(() => tutorial.show());
}
}, [tutorial]);
}
function Root() {
return (
<SafeAreaProvider> // !! it's also necessary
<InteractiveTutorial> // !! created component from step 1
<App />
</InteractiveTutorial>
</SafeAreaProvider>
);
}
Call the hook inside the App:
function App() {
useTutorialRunner();
...
}
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library
FAQs
Interactive tutorial with step-by-step guide
The npm package react-native-interactive-tutorial receives a total of 1 weekly downloads. As such, react-native-interactive-tutorial popularity was classified as not popular.
We found that react-native-interactive-tutorial demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 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
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.