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