Categories
React Native

React Native – Take a Tour – App Tour – Tap Target View

In this article I have discuses how to show Tap Target View on React Native project Function based component. Please follow below steps to implement example code for Tap Target View on function based component.

React Native Take a Tour – App Tour – Tap Target View library. This library is a React Native bridge around android and ios app tour libraries. Supported RN >= 0.61

In this article I have discuses how to show Tap Target View on React Native project Function based component. Please follow below steps to implement example code for Tap Target View on function based component.

Android: KeepSafe/TapTargetView
An implementation of tap targets from Google’s Material Design guidelines on feature discovery.

iOS: aromajoin/material-showcase-ios
An elegant and beautiful tap showcase view for iOS apps based on Material Design Guidelines.

Run following command to Install

After install react-native-app-tour I call event emitter DeviceEventEmitter

Now, we need to import react-native-app-tour module with below code.

Now define appTourSequence

Now we need to configure props for app tour targets.

Now configure and add view targets to appTourSequence. Here is example for view ref props like “ref={ref => this.payoutListMenuRef = ref}

When finish app tour sequence, we can execute our own code by using below onFinishSequenceEvent event.

React Native App Tour View full Example code. You can move the code on your own created screen.

Related Articles