react-native-interactive-tutorial

Interactive tutorial with step-by-step guide

Installation

1. Install the main library:

1yarn add react-native-interactive-tutorial

2. The library has peer dependencies, you should install them to your project:
   ⚠️ ! Make sure that you have followed all the steps to install these libraries

1yarn add react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-svg

3. (Optional) You should use some storage library. It can be any library, I use @react-native-async-storage/async-storage for an example.

1yarn add @react-native-async-storage/async-storage

Usage

Full example you can find here

We can divide the usage into 4 parts:

1. Creating the root component in your project:

InteractiveTutorial.tsx:

1import { type PropsWithChildren, useCallback, useMemo } from 'react';
2
3import AsyncStorage from '@react-native-async-storage/async-storage';
4import { Button } from 'react-native';
5
6import {
7  type DescriptionCardProps,
8  type SharedDescriptionCardButtonProps,
9  InteractiveTutorialContainer,
10  SharedDescriptionCard,
11} from 'react-native-interactive-tutorial';
12
13
14export enum TARGETS {
15  Target1,
16  Target2,
17  Target3,
18}
19
20export default function InteractiveTutorial({ children }: PropsWithChildren) {
21  // !! Here you can use different library
22  const storage = useMemo(
23    () => ({
24      set: (_: boolean) => AsyncStorage.setItem('tutorial', String(_)),
25      get: () => AsyncStorage.getItem('tutorial').then((_) => !!_),
26    }),
27    []
28  );
29
30  // !! Here are description be key dictionary
31  const stack = useMemo(
32    () =>
33      new Map([
34        [TARGETS.Target1, 'Target 1'],
35        [TARGETS.Target2, 'Target 2'],
36        [TARGETS.Target3, 'Target 3'],
37      ]),
38    []
39  );
40
41  // !! Translations (for description card)
42  const translations = useMemo(
43    () => ({
44      prevButton: 'Prev',
45      nextButton: 'Next',
46      finishButton: 'Finish',
47    }),
48    []
49  );
50
51  return (
52    <InteractiveTutorialContainer
53      translations={translations}
54      stack={stack}
55      initialTarget={TARGETS.Target1}
56      Card={DescriptionCard}
57      storage={storage}
58    >
59      {children}
60    </InteractiveTutorialContainer>
61  );
62}
63
64// !! Here you can override description card with your own
65const DescriptionCard = (props: DescriptionCardProps) => {
66  const DescriptionButton = useCallback(
67    ({ type, ...rest }: SharedDescriptionCardButtonProps) => (
68      <Button {...rest} color={type === 'prev' ? 'darkblue' : 'blue'} />
69    ),
70    []
71  );
72  return <SharedDescriptionCard Button={DescriptionButton} {...props} />;
73};
74

2. Wrapping your accented components

1// any places in your app
2const target1 = useUiElement(TARGETS.Target1, (_) => addBorderRadius(_, 10));
3<View
4  style={[styles.column, styles.card]}
5  ref={target1.ref} // !! necessary prop
6  onLayout={target1.onLayout} // !! necessary prop
7>
8  <Text>Target 1</Text>
9</View>

3. Creating hook to run the tutorial

1import { useEffect } from 'react';
2import { useInteractiveTutorial } from 'react-native-interactive-tutorial';
3
4export default function useTutorialRunner() {
5  const tutorial = useInteractiveTutorial();
6
7  useEffect(() => {
8    if (tutorial.finished === false) {
9      setTimeout(() => tutorial.show());
10    }
11  }, [tutorial]);
12}

4. Wrapping your screen or app in the component from step1 and call the hook from step 3:

1function Root() {
2  return (
3    <SafeAreaProvider> // !! it's also necessary
4      <InteractiveTutorial> // !! created component from step 1
5        <App />
6      </InteractiveTutorial>
7    </SafeAreaProvider>
8  );
9}

Call the hook inside the App:

1function App() {
2 useTutorialRunner();
3 ...
4}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library