ReactNative component - tooltip menu
Currently works only with
iOSand
Android.
Component for specfied case. Left bottom button with nice looking menu tooltip with animation after click.
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';
| 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.
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);
isVisibleprop