React Native: Native Tooltips
This library is a React Native bridge around native tooltips. It allows you to create simple tip views.
- 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
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
Prop | Type | Default | Note |
---|---|---|---|
text |
string |
Text which needs to be displayed | |
position: Android |
number |
Position of the tooltip view. On iOS it is auto adjustable | |
align: Android |
number |
Alignment of tooltip | |
autoHide |
bool |
Should tip view get auto dismiss | |
duration |
number |
Duration after which tooltip view should be dismissed | |
clickToHide: iOS |
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 | |
reference |
object |
Reference of react component of which you need 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
Other Contributions
- React Native - Spruce: react-native-spruce
- React Native - App Tour Library: react-native-taptargetview & react-native-material-showcase-ios
- React Native - Bottom Action Sheet: react-native-bottom-action-sheet
- React Native - Popover: react-native-popover-menu
- React Native - Shine Button: react-native-shine-button
-
React Native Iconic: react-native-iconic
-
React Native Download Button: react-native-download-button
- React Native Siri Wave View: react-native-siri-wave-view
- React Native Material Shadows: react-native-material-shadows
- React Native Gradient Blur View: react-native-gradient-blur-view
- React Native About Libraries: react-native-about-libraries
- Visual Code Essential Plugins: vs-essential-plugins
- Prettier Pack: prettier-pack