:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Reactnative library made by @Ramotion
Switch branches/tags
Nothing to show
Clone or download
Latest commit 1932db0 Jun 29, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example change url Jan 11, 2018
src update code and readme file Nov 10, 2017
.gitignore refactoring Nov 2, 2017
.npmignore update name of package Nov 14, 2017
LICENSE Update LICENSE Jan 10, 2018
README.md Update README.md Jun 29, 2018
google_play@2x.png Add files via upload Nov 11, 2017
header.png Fixing the name 'cricle' to 'circle' Nov 20, 2017
package.json fix package Jan 11, 2018
preview.gif Add files via upload Nov 11, 2017

README.md

header preview

React Native Circle Menu

Codacy Badge Twitter Donate

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

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