A react-native component from displaying tooltip. Uses UIMenuController.
- Run
npm install react-native-tooltip --save - Open your project in XCode, right click on
Librariesand clickAdd Files to "Your Project Name"(Screenshot) then (Screenshot). - Add
libRNToolTipMenu.atoBuild Phases -> Link Binary With Libraries(Screenshot). - 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.
activeOpacityonHideUnderlayonShowUnderlaystyleunderlayColor
You can see the list on the react native website
var React = require('react-native'); var { AppRegistry, StyleSheet, PixelRatio, View, Text, } = React; var ToolTip = require('react-native-tooltip'); var tooltip = React.createClass({ getInitialState: function() { return { input: 'chirag', } }, render: function() { return ( <View style={styles.container}> <View style={styles.textinputContainer}> <ToolTip ref='theToolTip' actions={[ {text: 'x', onPress: () => { this.setState({input: 'x pressed'}) }}, {text: 'y', onPress: () => { this.setState({input: 'y pressed'}) }} ]} underlayColor='transparent' longPress={true} style={styles.textinput} > <Text> {this.state.input} </Text> </ToolTip> </View> </View> ); } }); var 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).
Special thanks to jrichardlai for refactoring the api and make it awesome.