Example to Create Step by Step Walkthrough in any React Native App

React Native App Walkthrough

Hello Guys, here is an example to create step by step walkthrough in any React Native App. We will see how to create a step-by-step introduction to your app in React Native. There can be many ways to introduce your app which makes your app users attracted to your app. If you have seen in React Native App Intro Slider using AppIntroSlider you can see an app introduction slider that showcases the features or the key points of your app. In this example, you will see a different way to introduce your app.

As the topic says we are going to make a step-by-step guide for the introduction of our React Native App. You can see it in many application which needs a little assistance. If your application has any feature which needs some instruction then instead of going to the theory or the long list you can make it more interesting using it.

How to Create Step by Step Walkthrough?

To create a step-by-step walkthrough we are going to use react-native-copilot library. For this library, you just have to install this library with react-native-svg and you are good to go. It provides the following components which will help us to create a step-by-step guide:

<CopilotStep
  text="This is the heading with some style"
  order={1}
  name="firstUniqueKey">
  <WalkthroughableText style={styles.title}>
    Example of App Introduction Tour in React Native
  </WalkthroughableText>
</CopilotStep>

2. copilot

Higher-order component for the screen component that you want to use copilot with

export default copilot({
  animated: true, // Can be true or false
  overlay: 'svg', // Can be either view or svg
})(App);

3. walkthroughable

Before defining walkthrough steps for your react elements, you must make them walkthroughable. The easiest way to do that for built-in React Native components is using the walkthroughable HOC. Then you must wrap the element with CopilotStep.

const WalkthroughableText = walkthroughable(Text); //Making a WalkthroughableText
const WalkthroughableImage = walkthroughable(Image); //Making a WalkthroughableImage

This is how you can make a step-by-step introduction guide in your React Native app. Now let’s get started with the example.

In this example, we are going to make a simple screen with one large text heading, an image, and a small text. We will have a switch on the screen which will be used to skip the small text just to show that if you want conditional steps then you can also do that using the same library. So large heading will be our first step, the small text will be our second step but we can skip it when the switch is off and the image will be the third step which will become the second if the switch is off.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react native command line interface to make our React Native App.

If you have previously installed a global react-native-cli package, please remove it as it may cause unexpected issues:

npm uninstall -g react-native-cli @react-native-community/cli

Run the following commands to create a new React Native project

npx react-native init ProjectName

If you want to start a new project with a specific React Native version, you can use the --version argument:

npx react-native init ProjectName --version X.XX.X

Note If the above command is failing, you may have old version of react-native or react-native-cli installed globally on your pc. Try uninstalling the cli and run the cli using npx.

This will make a project structure with an index file named App.js in your project directory.

Installation of Dependency

To install react-native-copilot dependency open the terminal and jump into your project

cd ProjectName

Now install the dependency

npm install --save react-native-copilot

We also have to install react-native-svg dependency as this library uses it internally and to do that run

npm install --save react-native-svg

CocoaPods Installation

Please use the following command to install CocoaPods

npx pod-install

Code to Create Step-by-Step Walkthrough in any React Native App

Now Open App.js in any code editor and replace the code with the following code

App.js

// Example to Create Step by Step Walkthrough in any React Native App
// https://aboutreact.com/step-by-step-app-introduction-in-react-native/

// import React in our code
import React, {useState, useEffect} from 'react';

// import all the components we are going to use
import {
  SafeAreaView,
  StyleSheet,
  Text,
  Image,
  View,
  TouchableOpacity,
  Switch,
} from 'react-native';

// For Step by Step Walkthrough
import {
  copilot,
  walkthroughable,
  CopilotStep
} from 'react-native-copilot';

const App = (props) => {
  const [secondStepActive, setSecondStepActive] = useState(true);

  useEffect(() => {
    //setting a function to handle the step change event
    props.copilotEvents.on('stepChange', handleStepChange);
    //To start the step by step Walk through
    props.start();
  }, []);

  const handleStepChange = (step) => {
    //Handler, in case we want to handle the step change
    console.log(`Current step is: ${step.name}`);
  };

  //Making a WalkthroughableText
  const WalkthroughableText = walkthroughable(Text);
  //Making a WalkthroughableImage
  const WalkthroughableImage = walkthroughable(Image);

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.container}>
        {/*Step 1 to show the heading*/}
        <CopilotStep
          text="This is the heading with some style"
          order={1}
          name="firstUniqueKey">
          <WalkthroughableText style={styles.title}>
            Example of App Introduction Tour in React Native
          </WalkthroughableText>
        </CopilotStep>
        {/*Step 3 to show the Image*/}
        <CopilotStep 
          text="This is a image"
          order={3}
          name="thirdUniqueKey">
          <WalkthroughableImage
            source={{
              uri:
                'https://raw.githubusercontent.com/AboutReact/sampleresource/master/react_logo.png',
            }}
            style={styles.profilePhoto}
          />
        </CopilotStep>
        {/*Step 2 to show the normal text*/}
        <View style={styles.activeSwitchContainer}>
          <CopilotStep
            active={secondStepActive}
            text="This is simple text without style"
            order={2}
            name="SecondUniqueKey">
            <WalkthroughableText>
              Default text without style which can be skiped
              after disabling the switch
            </WalkthroughableText>
          </CopilotStep>
          <View style={{flexGrow: 1}} />
          <Switch
            onValueChange={(secondStepActive) =>
              setSecondStepActive(secondStepActive)
            }
            value={secondStepActive}
          />
        </View>
        {/*Button to start the walkthrough*/}
        <View style={styles.middleView}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => props.start()}>
            <Text style={styles.buttonText}>
              START APP INTRODUCTION TOUR
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  );
};

export default copilot({
  animated: true, // Can be true or false
  overlay: 'svg', // Can be either view or svg
})(App);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    paddingTop: 40,
  },
  title: {
    fontSize: 24,
    textAlign: 'center',
    margin: 20,
  },
  profilePhoto: {
    width: 140,
    height: 140,
    borderRadius: 70,
    marginVertical: 20,
  },
  middleView: {
    flex: 1,
    alignItems: 'center',
  },
  button: {
    backgroundColor: '#2980b9',
    paddingVertical: 10,
    paddingHorizontal: 15,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
  },
  activeSwitchContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 20,
    alignItems: 'center',
    paddingHorizontal: 40,
  },
});

To Run the React Native App

Open the terminal again and jump into your project using.

cd ProjectName

1. Start Metro Bundler

First, you will need to start Metro, the JavaScript bundler that ships with React Native. To start Metro bundler run following command

npx react-native start

Once you start Metro Bundler it will run forever on your terminal until you close it. Let Metro Bundler run in its own terminal. Open a new terminal and run the application.

2. Start React Native Application

To run the project on an Android Virtual Device or on real debugging device

npx react-native run-android

or on the iOS Simulator by running (macOS only)

npx react-native run-ios

Output Screenshots

   

This is how you can Create Step by Step Walkthrough in any React Native App. If you have any doubts or want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂