1.0.0 • Published 7 years ago

@ramotion/react-native-circle-menu v1.0.0

Weekly downloads
3
License
MIT
Repository
github
Last release
7 years ago

header preview

React Native Circle Menu

Twitter

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.

The iPhone mockup available here.

The Android mockup available here.

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

NameDescriptionTypeRequiredDefault Value
activeMenu is activeBooleanfalse
bgColorThe background color of the menuString#0E1329
itemSizeThe size of menu elementsNumber60
radiusThe circle radiusNumber150
onPressThe function that called when pressed on menu itemFunction

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 Twitter URL Twitter Follow