React Native Circle Menu Component

Description:

An animated, configurable, dynamic circle menu component for React Native.

Installation:

# NPM
$ npm install @ramotion/react-native-circle-menu --save

How to use it:

Import the circle menu component.

import React, {Component} from 'react'
import CircleMenu from '@ramotion/react-native-circle-menu'

Create a simple circle menu as these:

export default class 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 <View style={styles.container}>
      <CircleMenu
        bgColor="#0E1329"
        items={this.items}
        onPress={this.onPress}
      />
    </View>
  }
}

Default props.

defaultProps = {
  active: false,
  bgColor: '#0E1329',
  itemSize: 60,
  onPress() {},
  radius: 170
};

Preview: