@hi-enta/react-native-tooltips
v0.0.3
Published
React Native: Native Tooltip View
Downloads
4
Readme
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