How to incorporate Walkthrough screens as app launches

Question

I would like to add a three screens walkthrough into my existing app code. At the moment after the splash screen, the next screen appears to be as

which is a three tabbed main view of the app.

What I am trying to achieve is after the splash screen, I would like to show a three screens walkthrough before the attached main app screen loads up, I have done all the code for the walkthrough screens, it is just the question to where add that code in order to get the expected results as described.

I have already tried following; a. tried adding the Walkthrough component into Index file b. tried adding the Walkthrough component into App file

Thanks

    ========== Index.js ==========
    import { AppRegistry } from 'react-native';
    import App from './App';

    AppRegistry.registerComponent('Pak', () => App);


    ========== App.js ==========
    import React, { Component } from 'react';
    import { Tabs } from './src/config/router';

    export default class App extends Component {
      render() {
        return (
          <Tabs />
        );
      }
    }

score 0 · Answer 1 · answered Feb 02 '18 at 06:03

I am not sure about Native Mobile Apps. But for Browser-based Mobile Apps and Web Apps, you can use Whatfix. Of course, it is a Build v/s Buy call that you have to make and this software is pretty easy to use.

Whatfix also has a free community version if you are not looking for something too pricey.

score 0 · Accepted Answer · answered Feb 02 '18 at 06:42

Create a Component called Walkthrough, with Three Slides or Tabs. Save a bool in Asyncstorage which stores if user has seen Walkthrough component or not. On the launch of the app, while Spalshscreen is being shown, check in AsyncStorage for an item called Walkthrough, which on the very first launch will be false, and if false, return the Walkthrough component to user. And once user clicks done(any button to complete it/skip it), set Walkthrough as true in AsyncStorage and take user to homepage. On the consecutive launch, Asyncstorage on launching will return Walkthrough as true, so by dafault you return Home page, thus not showing them the walkthrough anymore.

Intro Slide Package

Below linked is a maintained package to easily create intro sliders. If you want such intro slider with your custom information and images, you can make use of it. Else You can create your own custom component, three or four of the, put them inside HorizontalSliders and display it to the user.

https://github.com/Jacse/react-native-app-intro-slider

How to incorporate Walkthrough screens as app launches

2 Answers2