RN-FidgetMenu

Create mesmerizing, interactive menus in your React Native apps with ease using SpinMenu. This customizable component adds a playful touch to your UI, allowing users to navigate through options effortlessly. Spin through menus with a flick of a finger, delivering a delightful user experience.

FidgetMenu ScreenShot

Installation

Install RN-FidgetMenu with npm or yarn

  npm install react-native-fidgetmenu

  yarn add react-native-fidgetmenu

You need to install and configure the required libraries for FidgetMenu.

  npm install react-native-gesture-handler

  yarn add react-native-gesture-handler

  npm install react-native-reanimated

  yarn add react-native-reanimated

Features

• Display dynamic data in real-time.
• Engaging menu spin functionality adds an interactive element to the user experience.
• Developed entirely in TypeScript, leveraging the latest version of React Native for enhanced performance and maintainability.
• Compatible with both Android and iOS platforms, ensuring a seamless experience across devices.

Usage

import  SpinMenu  from 'react-native-fidgetmenu';

1. Create a state to manage an array of data structured as follows:

const [content, setContent] = useState([
    {
      icon: 'https://cdn-icons-png.flaticon.com/128/1404/1404945.png',
      label: 'Pizza',
    },
    {
      icon: 'https://cdn-icons-png.flaticon.com/128/3170/3170733.png',
      label: 'Dine In',
    },
    {
      icon: 'https://cdn-icons-png.flaticon.com/128/9718/9718703.png',
      label: 'Fast Food',
    },
    {
      icon: 'https://cdn-icons-png.flaticon.com/128/4780/4780045.png',
      label: 'Biryani',
    },
  ]);

2. Use this SpinMenu component wherever you want to display the spin menu.

  <SpinMenu
    data={content}  //<-------- The array of data to be displayed in the spin menu
    centerText="See All" //<-------- The text to be displayed at the center when the length of the provided data exceeds 6
    onPressCategory={(item:any) => {
    Alert.alert(item.label); 
  }} //<-------- This function defines the behavior when a category is clicked
/>

Available props

| Name | Type | Description | | -------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | data | Array[] | Data to populate the menu bar. | | circleSize | number | CircleSize determines the height and width of each circle. | | centerText | string | CenterText is displayed when the length of the data exceeds 6. | | mainStyles | ViewStyleObject | Style the main view. | | onPressCategory | function |This is used to handle the press event on the menu circle. | | labelStyle | TextStyleObject | This is used to change the style of the label. | | headerBackIcon | Image | This is used to change the back icon of the modal. | | headerImageStyle | ImageStyleObject | This is the style of the back icon.modal | | iconStyle | ImageStyleObject | This is used to change the style of the menu circle icons. |