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.
// Wrap any component with the provided Higher Order Component.const ListItemWithMenu = // Instantiate the wrapped component, passing in the buttons as props.const App = <ListItemWithMenu buttons= <Text>1</Text> value: 1 <Text>2</Text> value: 2 <Text>3</Text> value: 3 <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.