Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/chirag04/react-native-tooltip

A react-native wrapper for showing tooltips
https://github.com/chirag04/react-native-tooltip

Last synced: about 15 hours ago
JSON representation

A react-native wrapper for showing tooltips

Awesome Lists containing this project

README 

        
# react-native-tooltip



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)](http://url.brentvatne.ca/jQp8) then [(Screenshot)](http://url.brentvatne.ca/1gqUD).

3. Add `libRNToolTipMenu.a` to `Build Phases -> Link Binary With Libraries`

   [(Screenshot)](http://url.brentvatne.ca/17Xfe).

4. Whenever you want to use it within React code: `var ToolTip = require('react-native-tooltip');`



## Usage



### Props



- `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`, `right`, and `default`. Default is `default`, which means to point up or down at the object of focus based on its location on the screen.



#### Props from TouchableHighlight.propTypes



- `activeOpacity`

- `onHideUnderlay`

- `onShowUnderlay`

- `style`

- `underlayColor`



You can see the list on the react native [website](https://facebook.github.io/react-native/docs/touchablehighlight.html#content)



### Example



```javascript

import React from 'react';

import {

  AppRegistry,

  StyleSheet,

  PixelRatio,

  View,

  Text,

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

          

            

              

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

```



### Note



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](https://github.com/chirag04/react-native-tooltip/blob/master/screenshot.png)



### Special thanks

Special thanks to [jrichardlai](https://github.com/jrichardlai) for refactoring the api and make it awesome.