Need help with react-native-tooltip-menu?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

alimek
142 Stars 100 Forks MIT License 5 Commits 5 Opened issues

Description

ReactNative component - tooltip menu

Services available

!
?

Need anything else?

Contributors list

# 122,081
Objecti...
side-me...
React N...
React
2 commits

react-native-tooltip-menu

Currently works only with

iOS
and
Android
.

Component for specfied case. Left bottom button with nice looking menu tooltip with animation after click.

alt text alt text

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
label
as
string
or
function
if you want to render your own component and
onClick
as
function
to be called when you click item. | | componentWrapperStyle | Object | Optional | Style
Object
if you want to overwrite wrapper for your
buttonComponent
| overlayStyle | Object | Optional | Style
Object
if you want to overwrite overlay style's. | widthType |
auto
,
half
or
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
Object
if you want to change default
TooltipMenuItem
View's style. | labelStyle |
Object
| Optional | Style
Object
if you want to change default
TooltipMenuItem
Text's style. | modalButtonStyle |
Object
| optional | Style. for
TouchabelOpacity
when 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.