React Native Circle Menu
Check this library on other platforms:
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.
Features
- Custom colors
- Custom size
Installation
npm install --save @ramotion/react-native-circle-menu
Usage
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}
/>
}
}
Props, 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, ## Licence
Circle menu is released under the MIT license.
See LICENSE for details.
Get the Showroom App for iOS to give it a try
Try this UI component and more like this in our mobild app. Contact us if interested.
Follow us for the latest updates