React Native: Native Tooltips
This library is a React Native bridge around native tooltips. It allows you to create simple tip views.
Note: Android SDK 27 > is supported
Android: florent37/ViewTooltip |
---|
![]() |
iOS: calm/SexyTooltip |
---|
Before we dive into on how to use this library. We would like to thank all the contributor of florent37/ViewTooltip & calm/SexyTooltip libraries for providing such a awesome nice, cool library
Getting started
$ npm install react-native-tooltips --save
$ react-native link react-native-tooltips
- Android
Please add below snippet into your app build.gradle
buildscript {
repositories {
jcenter()
google()
...
}
...
}
allprojects {
repositories {
maven { url 'https://jitpack.io' }
google()
...
}
}
- iOS
$ cd ./node_modules/react-native-tooltips/ios && pod install
Usage
import RNTooltips from 'react-native-tooltips';
- React Way
<RNTooltips text={"Long Press Description"} visible={this.state.visible} reference={this.state.reference} />
- API Way
RNTooltips.Show(
this.state.reference,
{
text: 'Long Press Description'
}
)
Props
- Props: Generic
Prop | Type | Default | Note |
---|---|---|---|
text |
string |
Text which needs to be displayed | |
autoHide |
bool |
Should tip view get auto dismiss | |
duration |
number |
Duration after which tooltip view should be dismissed | |
clickToHide |
bool |
On click should tooltip view be dismissed | |
corner |
number |
Radius of corner | |
tintColor |
string |
Color of tooltip view background | |
textColor |
string |
Color of text | |
textSize |
number |
Size of text displayed | |
gravity |
number |
Gravity of text | |
visible |
bool |
Should tooltip be displayed | |
shadow |
bool |
Shadow on tooltip view | |
arrow |
bool |
true | Display Arrow |
reference |
object |
Reference of react component of which you need tooltip | |
onHide |
func |
Callback function invoked on tooltip hide |
- Props - iOS
Prop | Type | Default | Note |
---|
- Props - Android
Prop | Type | Default | Note |
---|---|---|---|
position |
number |
Position of the tooltip view. On iOS it is auto adjustable | |
align |
number |
Alignment of tooltip |
Credits
- Android: florent37/ViewTooltip
- iOS: calm/SexyTooltip
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 MIT License.
RNTooltips @ Pranav Raj Singh Chauhan