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.
|
1
|
npm install react–native–walkthrough–tooltip —save
|
Screenshot:-
Screenshot after done installation:-
2. Now open your project’s main App.js file and import View, StyleSheet, SafeAreaView, Text, TouchableHighlight and useState component.
|
1
2
3
|
import React, {useState} from ‘react’;
import { View, StyleSheet, SafeAreaView, Text, TouchableHighlight } from ‘react-native’;
|
3. Import Tooltip from ‘react-native-walkthrough-tooltip’ NPM package.
|
1
|
import Tooltip from ‘react-native-walkthrough-tooltip’;
|
4. Creating export default function App(). This is our main functional component for this tutorial.
|
1
2
3
4
5
|
export default function App() {
}
|
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.
|
1
|
const [visibleState, setVisibleState] = useState(false);
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
return (
<SafeAreaView style={styles.MainContainer}>
<View style={styles.MainContainer}>
<Text style={{fontSize: 22, textAlign:‘center’}}> React Native Walkthrough Tooltip Example </Text>
<Tooltip
animated={true}
arrowSize={{width: 16, height: 8}}
backgroundColor=“rgba(0,0,0,0.5)”
isVisible={visibleState}
content={ <Text> Hello.. ReactNativeCode </Text> }
placement=“bottom”
onClose={() => setVisibleState(false)}>
<TouchableHighlight
style={styles.button}
onPress={() => setVisibleState(true)}>
<Text style={styles.buttonText}> Say Hi to ReactNativeCode </Text>
</TouchableHighlight>
</Tooltip>
</View>
</SafeAreaView>
);
|
7. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#ECEFF1’,
},
button: {
width: ‘100%’,
height: 40,
padding: 10,
backgroundColor: ‘#00C853’,
marginTop: 20,
borderRadius: 5,
},
buttonText: {
color: ‘white’,
textAlign: ‘center’,
}
});
|
8. Complete Source Code for App.js file :-
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
import React, {useState} from ‘react’;
import { View, StyleSheet, SafeAreaView, Text, TouchableHighlight } from ‘react-native’;
import Tooltip from ‘react-native-walkthrough-tooltip’;
export default function App() {
const [visibleState, setVisibleState] = useState(false);
return (
<SafeAreaView style={styles.MainContainer}>
<View style={styles.MainContainer}>
<Text style={{fontSize: 22, textAlign:‘center’}}> React Native Walkthrough Tooltip Example </Text>
<Tooltip
animated={true}
arrowSize={{width: 16, height: 8}}
backgroundColor=“rgba(0,0,0,0.5)”
isVisible={visibleState}
content={ <Text> Hello.. ReactNativeCode </Text> }
placement=“”
onClose={() => setVisibleState(false)}>
<TouchableHighlight
style={styles.button}
onPress={() => setVisibleState(true)}>
<Text style={styles.buttonText}> Say Hi to ReactNativeCode </Text>
</TouchableHighlight>
</Tooltip>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#ECEFF1’,
},
button: {
width: ‘100%’,
height: 40,
padding: 10,
backgroundColor: ‘#00C853’,
marginTop: 20,
borderRadius: 5,
},
buttonText: {
color: ‘white’,
textAlign: ‘center’,
}
});
|
Screenshots:-
Also Read :
Example of Creating Pie Chart in React Native Android iOS App
Use useEffect as componentdidmount behavior in React Native Hooks Example
React Native Material Bottom Navigation View for Android iOS Example
React Native Call Load Different CSS Style on View Component
React Native Check Value Is Number Or Not Using isNaN() Validation
