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

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 of your app in React Native. There can be many ways to introduce your app which makes your app users attract 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.

Create Step by Step Walkthrough in any React Native App

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:

1. CopilotStep: Whatever component we want to showcase we will cover with it. It provides text to define the text we want to show, order to define the order of the component, and name which will be unique for each component.

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

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.

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 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 init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run

npm install -g react-native-cli

Run the following commands to create a new React Native project

react-native init ProjectName

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

react-native init ProjectName --version X.XX.X
react-native init ProjectName --version react-native@next

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

Now install the dependency

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

CocoaPods Installation

After the updation of React Native 0.60, they have introduced autolinking so we do not require to link the libraries but need to install pods. In this example, we need to install the pods for npm install --save react-native-svg.

Please use the following command to install CocoaPods

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.


To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

Step By Step WalkThrough  Step By Step WalkThrough  Step By Step WalkThrough

This is how you can Create Step by Step Walkthrough in any React Native App. If you have any doubts or you 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. 🙂

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.