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()
        maven { url "https://jitpack.io" }
    }
}

allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}

Note

• Android SDK 25 > is supported

• iOS

  • Run Command if Pods is not installed in your app: cd ios/ && pod init

  • Add aromajoin/material-showcase-ios in your app Podfile

    # platform :ios, '9.0'
    
    target 'Example' do
        use_frameworks!
    
        pod 'MaterialShowcase', '~> 0.5.1'
    
        post_install do |installer|
            installer.pods_project.targets.each do |target|
                if target.name.include?('MaterialShowcase')
                    target.build_configurations.each do |config|
                        # swift version 4.0 for xcode 9
                        #config.build_settings['SWIFT_VERSION'] = '4.0'
                        # swift version 3.2 for xcode 8
                        config.build_settings['SWIFT_VERSION'] = '3.2'
                    end
                end
            end
        end
    
    end
    

  • Run Command to install native library: cd ios/ && pod install: If it has error => try pod repo update then pod install

  • 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
isRect	bool	false	Specify the target is rectangle
isSkipButtonVisible	bool	false	Show Skip Button ( only support Sequence )
skipText	string	Skip	Sepecify the skip text
skipTextColor	string: HEX-COLOR	#FFFFFF	Sepecify the skip text color
skipTextSize	number	24	Specify the skip text size
skipButtonBackgroundColor	string: HEX-COLOR	#FF0000	Sepecify the skip button background color
skipButtonMargin	number	20	Specify skip button margin to the screen bound
skipButtonMarginLeft	number	20	Specify skip button margin left to the screen bound
skipButtonMarginTop	number	20	Specify skip button margin top to the screen bound
skipButtonMarginRight	number	20	Specify skip button margin right to the screen bound
skipButtonMarginBottom	number	20	Specify skip button margin bottom to the screen bound
skipButtonMarginHorizontal	number	20	Specify skip button margin left & right to the screen bound
skipButtonMarginVertical	number	20	Specify skip button margin left to the screen bound
transparentTarget	bool	true	Specify whether the target is transparent (displays the content underneath)

• 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

• 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
rectHighLightColor	string: HEX-COLOR	UIColor.white	Specify the background color of rect target

Note:

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

• Cause of skip button for cancelable app tour sequence
• On the pod file of iOS:
• pod 'MaterialShowcase',:git => 'https://github.com/congnguyen91/material-showcase-ios.git', :commit =>'0668f4c'
• For android with skip button: add dimColor #000000

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