rn-circular-menu

React Native Circular Menu component for creating interactive circular menus with customizable styles.

Installation

npm install rn-circular-menu

or

yarn add rn-circular-menu

Before using this library, ensure that you have the following dependencies installed in your React Native project:

• react-native-gesture-handler
• react-native-reanimated

Screenshots

iOS	Android

iOS	Android

Demo

Gif

Usage

import React from "react";
import { View } from "react-native";
import CircularMenu from "rn-circular-menu";
import { menuData } from "./path/to/menuData";

const App = () => {
return (
    <View style={{ flex: 1 }}>
        <CircularMenu
            menuData={menuData}
            containerStyles={{ backgroundColor: "#ffc059" }}
            menuStyles={{ backgroundColor: "white" }}
            iconStyles={{...}}
            labelStyles={{...}}
        />
    </View>
);
};

Props

Prop	Type	Required	Description
menuData	Array	Yes	Array of objects representing menu items.
containerStyles	Object	No	Custom styles for the circular menu container.
menuStyles	Object	No	Custom styles for the entire circular menu item.
iconStyles	Object	No	Custom styles for the icons within each menu item.
labelStyles	Object	No	Custom styles for the labels (text) within each menu item.

Example menuData

export const menuData = [
    {
        id: 0,
        title: "Main Menu",
        icon: require("./assets/mainIcon.png"),
        isMain: true,
        onPress: () => {
        console.log("Main Menu pressed");
    },
    },
    {
        id: 1,
        title: "Option 1",
        icon: require("./assets/option1.png"),
        onPress: () => {
        console.log("Option 1 pressed");
    },
    },
    {
        id: 2,
        title: "Option 2",
        icon: require("./assets/option2.png"),
        onPress: () => {
        console.log("Option 2 pressed");
    },
    },
    // Add more menu items as needed
];

Contributing

Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub

Author

Yaya Mohamed | https://github.com/Yaya12085

License

This project is licensed under the MIT License - see the LICENSE file for details.