Skip to content

thegreatercurve/react-native-radial-context-menu

Repository files navigation

React Native Radial Context Menu

An easy to use context menu component for React Native, inspired by The Guardian's radial context menu in their Android app.

A live demo of the component can he found as an Expo Snack here, or in the example folder.

Demo

Installation

npm i --save react-native-radial-context-menu

Usage

A simple example is shown below.

import { withRadialActionMenu } from 'react-native-radial-context-menu'

// Wrap any component with the provided Higher Order Component.
const ListItemWithMenu = withRadialActionMenu(() => <View />)

// Instantiate the wrapped component, passing in the buttons as props.
const App = () => (
    <ListItemWithMenu
      buttons={[
        { component: () => <Text>1</Text>, value: 1 },
        { component: () => <Text>2</Text>, value: 2 },
        { component: () => <Text>3</Text>, value: 3 },
        { component: () => <Text>4</Text>, value: 4 },
      ]}
    />
)

For something more complex, have a look at the Expo Snack demo.

Props

Prop Type Required Default Description
backgroundColor String Optional #fa8072 Background color for both the menu and buttons.
buttons Array Required [] Array of button objects. Each button requires a component and value.
buttonDiameter Number Optional 60 Width of each button.
menuDiameter Number Optional 90 Width of the menu at the touch origin.
onClose Function Optional void Callback fired when the menu is closed, with either the value of the chosen button or null.
onOpen Function Optional void Callback fired when the menu is opened.
openDelay Number Optional 0 Number of milliseconds on press in before the menu opens.
spreadAngle Number Optional 170 Angle between the first and last button from the touch origin.
spreadRadius Number Optional 100 Distance the buttons move out from the touch origin.
vibrate Boolean Optional true Vibrate on move over a button.
vibrateDuration Number Optional 50 Number of milliseconds of the vibration.

Contribute

We warmly welcome any contributions! You can open a Pull Request here.