Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-native-tooltip with all npm packages installed. Try it out:

var reactNativeTooltip = require("react-native-tooltip")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-tooltip v5.2.0

A react-native wrapper for showing tooltips


A react-native component from displaying tooltip. Uses UIMenuController.

Add it to your project

  1. Run npm install react-native-tooltip --save
  2. Open your project in XCode, right click on Libraries and click Add Files to "Your Project Name" (Screenshot) then (Screenshot).
  3. Add libRNToolTipMenu.a to Build Phases -> Link Binary With Libraries (Screenshot).
  4. Whenever you want to use it within React code: var ToolTip = require('react-native-tooltip');



  • actions: Array of actions [{text: 'Copy', onPress: () => Clipboard.set(this.someValue) }]
  • longPress: Boolean indicating if the tooltip should be showing on longPress, false by default.
  • arrowDirection: String indicating the direction of the tooltip arrow. Possible values are: up, down, left, and right. Default is down.

Props from TouchableHighlight.propTypes

  • activeOpacity
  • onHideUnderlay
  • onShowUnderlay
  • style
  • underlayColor

You can see the list on the react native website


import React from 'react';
import {
} from 'react-native';

import ToolTip from 'react-native-tooltip';

export default class MyToolTip extends React.Component {
    state = {
        input: 'chirag'
    handleCopyPress = () => {
        AlertIOS.alert(`Copy has been pressed!`);
    handleOtherPress = () => {
        AlertIOS.alert(`Other has been pressed!`);
    handleHide = () => {
        console.log('Tooltip did hide');
    handleShow = () => {
        console.log('tooltip did show');
    render() {
        return (
          <View style={{flex: 1, justifyContent: 'center'}}>
                {text: 'Copy', onPress: this.handleCopyPress },
                {text: 'Other', onPress: this.handleOtherPress }
              <Text style={styles.welcome}>
                Press Here.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  textinputContainer: {
    marginTop: 20,
    justifyContent: 'center',
    alignItems: 'center',
  textinput: {
    width: 60,
    marginVertical: 2,
    marginHorizontal: 2,
    borderWidth: 1 / PixelRatio.get(),
    borderRadius: 5,
    borderColor: '#c7c7cc',
    padding: 2,
    fontSize: 14,
    backgroundColor: 'white',

AppRegistry.registerComponent('tooltip', () => tooltip);


It is also possible to open the menu programmatically, by calling this.refs.theToolTip.showMenu(); ( theToolTip being the reference of the component). To hide menu this.refs.theToolTip.hideMenu(); (Though tooltip hides by itself, while using with drawer on specific gesture tooltip does not hide by default.)

Here is how it looks:

Demo gif

Special thanks

Special thanks to jrichardlai for refactoring the api and make it awesome.


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free