alimek/ react-native-tooltip-menu
About the developer
153 Stars 
102 Forks 
MIT License 
5 Commits 
15 Opened issues 
Description
ReactNative component - tooltip menu
Services available
Contributors list
react-native-tooltip-menu
Currently works only with
iOSand
Android.
Component for specfied case. Left bottom button with nice looking menu tooltip with animation after click.
How to install
Via NPM
npm install react-native-tooltip-menu --save
or via yarn
bash yarn add react-native-tooltip-menu --save
then
import ReactNativeTooltipMenu from 'react-native-tooltip-menu';
Configuration
ReactNativeTooltipMenu:
| Property | Type | Default | Description | |----------------|---------------|-----------|--------------------------------------| | buttonComponent | ||| | items |
Array| | Items to be rendered in menu. Each of item requires
labelas
stringor
functionif you want to render your own component and
onClickas
functionto be called when you click item. | | componentWrapperStyle | Object | Optional | Style
Objectif you want to overwrite wrapper for your
buttonComponent| overlayStyle | Object | Optional | Style
Objectif you want to overwrite overlay style's. | widthType |
auto,
halfor
full|
half| Menu items width.
Auto= automatically set width to your longest test,
half= always 50% your screen width,
full= 100% screen width. | onRequestClose |
function| Optional, default
() => {} | Modal onRequestClose required function on Android
| labelContainerStyle | Object| Optional | Style
Objectif you want to change default
TooltipMenuItemView's style. | labelStyle |
Object| Optional | Style
Objectif you want to change default
TooltipMenuItemText's style. | modalButtonStyle |
Object| optional | Style. for
TouchabelOpacitywhen modal is opened.
Example
import React, { Component } from 'react';
import {
AppRegistry,
Text,
View
} from 'react-native';
import ReactNativeTooltipMenu from 'react-native-tooltip-menu';
class Example extends Component {
state = {
counterItem1: 0,
counterItem2: 0
};
render() {
return (
This is example of react-native-tooltip-menu
Clicked item1: {this.state.counterItem1}
Clicked item2: {this.state.counterItem2}
Click me to show tooltip!
}
items={[
{
label: 'Label #1',
onPress: () => this.setState({ counterItem1: this.state.counterItem1 + 1 })
},
{
label: 'Label #2',
onPress: () => this.setState({ counterItem2: this.state.counterItem2 + 1 }),
},
]}
/>
)
}
}
AppRegistry.registerComponent('Example', () => Example);
Todo
- add option to move button to right side of screen
- add
isVisible
prop