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.

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.