Creating a state to handle walkthrough visible status

We also need to create a state to handle walkthrough visible status—in other words, to check whether the intro slider is visible or not in our app interface. Thus, we create the state variable defined as show_App to store the Boolean value for our state handler, which is initialized inside our constructor() method. You can perform this using the following piece of code:

Creating two simple functions to handle slide visible state

Creating a state isn’t enough—we need to handle its values as well. To do this, we need to create two simple functions. These handler functions are shown in the code snippet below:

The above two functions doneALL() and onSkip() will enable the program to handle the state show_App and set it as true wherever the functions are called in our project.

Setting up a simple condition to show walkthrough/the main app

In this step, we make use of our simple show_App state condition to make either the main app or walkthrough visible in our app interface.

For this, we need to define a render() function that will return a template <View> to the app interface if the condition of our state show_App is true; otherwise, it will return the AppIntroSlider module to our app interface to view the walkthrough.

You can see in the following code that our two handler functions are used in AppIntroSlider tags to handle the state variable. You can make use of the following code snippet for this operation:

Adding Mock data for feed AppIntoSlider package

In this step, we’ll add mock data to our AppIntroSlider package. Here, we’re using the following dataset with the slides list, which contains key, title, text, image, etc. You can use your own dataset, but keep in mind that every key should be a unique value. The example of the slides dataset is provided below:

The meaning of each keyword in the above code snippet is explained below: