react-native-tooltip
A react-native component from displaying tooltip. Uses UIMenuController.
Add it to your project
- Run
npm install react-native-tooltip --save
- Open your project in XCode, right click on
Libraries
and clickAdd Files to "Your Project Name"
(Screenshot) then (Screenshot). - Add
libRNToolTipMenu.a
toBuild Phases -> Link Binary With Libraries
(Screenshot). - 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
, andright
. Default isdown
.
Props from TouchableHighlight.propTypes
activeOpacity
onHideUnderlay
onShowUnderlay
style
underlayColor
You can see the list on the react native website
Example
;; ; Component state = input: 'chirag' ; { AlertIOS; }; { AlertIOS; }; { console; }; { console; }; { return <View style=flex: 1 justifyContent: 'center'> <ToolTip ref='tooltip' actions= text: 'Copy' onPress: thishandleCopyPress text: 'Other' onPress: thishandleOtherPress onHide=thishandleHide onShow=thishandleShow underlayColor='blue' style=stylesselectedName > <Text style=styleswelcome> Press Here </Text> </ToolTip> </View> ; } const styles = StyleSheet; AppRegistry;
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:
Special thanks
Special thanks to jrichardlai for refactoring the api and make it awesome.