Popularity
4.7
Growing
Activity
0.6
-
534
16
55

Description

⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Made by @Ramotion https://ramotion.com/gthb

Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Tags: UI Components     Menu     Chart     UI Animation     UI Utilites     UI     React     React-component     Component     Circle     React-native    

React Native Circle Menu alternatives and similar libraries

Based on the "UI Animation" category

Do you think we are missing an alternative of React Native Circle Menu or a related project?

Add another 'UI Animation' Library

README

[header](./header.png) [preview](./preview.gif)

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.

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](./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


*Note that all licence references and agreements mentioned in the React Native Circle Menu README section above are relevant to that project's source code only.