React Native Walkthrough Tooltip NPM – Android iOS Example

Hello Friends, As we all know Tooltip component is used to highlight the wrap element for a particular task. Using the Tooltip we can display the usability or sending some response to the wrapped component. It is like sending first messages like Hey I’m here in react native. To use the Tooltip in react native we have to use an external NPM package named as React Native Walkthrough Tooltip. This package is freely available on NPM package site. So in this tutorial we would learn about React Native Walkthrough Tooltip NPM Package – Android iOS Example.

Contents in this project React Native Walkthrough Tooltip NPM Package – Android iOS Example:-

1. To getting started with the tutorial, First we have to install the React Native Walkthrough Tooltip NPM Package in our current react native project. To install open your react native project Root directory in command prompt or Terminal and execute below command.


Screenshot after done installation:-

2. Now open your project’s main App.js file and import View, StyleSheet, SafeAreaView, Text, TouchableHighlight and useState component.

3. Import Tooltip from ‘react-native-walkthrough-tooltip’ NPM package.

4. Creating export default function App(). This is our main functional component for this tutorial.

5. Creating a Boolean type State named as visibleState with State update method name setVisibleState with default False value. We would use this State to show and hide the Tooltip component.

6. Creating Return() block, Here first we would make the SafeArea component -> View component -> Tooltip component with 1 Touchable Highlight component wrap inside it with 1 Text component.

Tooltip component Props :-

1. animated :- To enable animation on Tooltip display.

2. arrowSize :- The Size of the Arrow pointing to the Child Wrapped Element.

3. backgroundColor :- Background of the Full screen beneath the Tooltip component.

4. isVisible :- To show and hide the Tooltip.

5. content :- Used to display which content we want to display inside Tooltip.

6. placement :- To set the display location of Tooltip, Supported values are top, center, bottom, left and right.

7. onClose :- Call the event which want to execute on closing on Tooltip or your can say when use click or press the tooltip.

7. Creating Style.

8. Complete Source Code for App.js file :-


React Native Walkthrough Tooltip NPM - Android iOS Example

Leave a Reply

Your email address will not be published. Required fields are marked *