@hi-enta/react-native-tooltips NPM

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	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