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:

App Tour Target Properties are same as defined by KeepSafe/TapTargetView & aromajoin/material-showcase-ios

Breaking Changes

V0.0.4
- Generalized props across platforms @congnguyen91
- Migrated License to Apache 2.0

Credits

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

Contribution

Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.

License

This library is provided under the Apache 2.0 License.

RNAppTour @ Pranav Raj Singh Chauhan

GeminiLove/react-native-app-tour