React Native: Native App Tour Library

This library is a React Native bridge around native app tour libraries. It allows show/guide beautiful tours:

React Native: Native App Tour Library

This library is a React Native bridge around native app tour libraries. It allows show/guide beautiful tours:

Android: KeepSafe/TapTargetView
iOS: aromajoin/material-showcase-ios

Installation

$ npm install react-native-app-tour --save

$ react-native link react-native-app-tour

  • Android

    • Please add below script in your build.gradle
buildscript {
    repositories {
        jcenter()
        google()
        maven { url "https://jitpack.io" }
        ...
    }
}

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        google()
        maven { url "https://jitpack.io" }
        ...
    }
}

Note

  • Android SDK 27 > is supported

  • iOS

    • Run Command: cd ../node_modules/react-native-app-tour/ios && pod install. If it has error => try pod repo update then pod install
      • Add aromajoin/material-showcase-ios in your app Embedded Binaries & Linked Frameworks and Libraries. Please follow below video in order to achieve the same:
    • Now build your iOS app through Xcode

ISSUES

  • If you encounter File not found in iOS issue while setup, please refer ISSUE - 3 issue which might help you in order to resolve.
  • If you have problems with Android Trying to resolve view with tag which doesn't exist or can't resolve tag. Please add props collapasable: false to your View

API's

  • AppTourView.for: AppTourTarget
let appTourTarget = AppTourView.for(Button, {...native-library-props})

AppTour.ShowFor(appTourTarget)
  • AppTourSequence
    • add(AppTourTarget)
    • remove(AppTourTarget)
    • removeAll
    • get(AppTourTarget)
    • getAll
let appTourSequence = new AppTourSequence()
this.appTourTargets.forEach(appTourTarget => {
appTourSequence.add(appTourTarget)
})

AppTour.ShowSequence(appTourSequence)
  • AppTour
    • ShowFor(AppTourTarget)
    • ShowSequence(AppTourTargets)

Props

  • General(iOS & Android)
Prop Type Default Note
title string Specify the title of tour
description string Specify the description of tour
outerCircleColor string: HEX-COLOR Specify a color for the outer circle
targetCircleColor string: HEX-COLOR Specify a color for the target circle
titleTextSize number 20 Specify the size (in sp) of the title text
titleTextColor string: HEX-COLOR Specify the color of the title text
descriptionTextSize number 10 Specify the size (in sp) of the description text
descriptionTextColor string: HEX-COLOR Specify the color of the description text
targetRadius number 60 Specify the target radius (in dp)
cancelable bool true Whether tapping outside the outer circle dismisses the view
  • Android
Prop Type Default Note
outerCircleAlpha number 0.96f Specify the alpha amount for the outer circle
textColor string: HEX-COLOR Specify a color for both the title and description text
dimColor string: HEX-COLOR If set, will dim behind the view with 30% opacity of the given color
drawShadow bool true Whether to draw a drop shadow or not
tintTarget bool true Whether to tint the target view's color
transparentTarget bool true Specify whether the target is transparent (displays the content underneath)
  • iOS
Prop Type Default Note
backgroundPromptColor string: HEX-COLOR UIColor.blue Specify background prompt color
backgroundPromptColorAlpha number 0.96 Specify background prompt color alpha
titleTextAlignment string left Specify primary text alignment: Left, Right, Top, Bottom
descriptionTextAlignment string left Specify secondary text alignment: Left, Right, Top, Bottom
aniComeInDuration number 0.5 Specify animation come In Duration
aniGoOutDuration number 1.5 Specify animation Go Out Duration
aniRippleColor string: HEX-COLOR #FFFFFF Specify ripple color
aniRippleAlpha number 0.2 Specify ripple alpha

Note:

GitHub