![](https://github.com/ramotion/navigation-stack/raw/master/Swift@2x.png?raw=true)
![](https://github.com/ramotion/navigation-stack/raw/master/Android_Java@2x.png?raw=true)
Looking for developers for your project?
This project is maintained by Ramotion, Inc. We specialize in the designing and coding of custom UI for Mobile Apps and Websites.
![](https://github.com/ramotion/gliding-collection/raw/master/contact_our_team@2x.png?raw=true)
The iPhone mockup available here.
The Android mockup available here.
- Custom colors
- Custom size
npm install --save @ramotion/react-native-circle-menu
Look it in folder ./example
import React, {Component} from 'react'
import CircleMenu from '@ramotion/react-native-circle-menu'
class Example extends Component {
items = [
{
name: 'md-home',
color: '#298CFF'
},
{
name: 'md-search',
color: '#30A400'
},
{
name: 'md-time',
color: '#FF4B32'
},
{
name: 'md-settings',
color: '#8A39FF'
},
{
name: 'md-navigate',
color: '#FF6A00'
}
];
onPress = index => console.warn(`${this.items[index].name} icon pressed!`);
render() {
return <CircleMenu
bgColor="#E74C3C"
items={this.items}
onPress={this.onPress}
/>
}
}
Name | Description | Type | Required | Default Value |
---|---|---|---|---|
active | Menu is active | Boolean | false |
|
bgColor | The background color of the menu | String | #0E1329 |
|
itemSize | The size of menu elements | Number | 60 |
|
radius | The circle radius | Number | 150 |
|
onPress | The function that called when pressed on menu item | Function |
Circle menu is released under the MIT license.
See LICENSE for details.
Try this UI component and more like this in our mobild app. Contact us if interested.
![](https://raw.githubusercontent.com/Ramotion/react-native-circle-menu/master/google_play@2x.png)
![](https://github.com/ramotion/gliding-collection/raw/master/app_store@2x.png?raw=true)
![](https://github.com/ramotion/gliding-collection/raw/master/contact_our_team@2x.png?raw=true)