How to use a custom icon in react-native-circular-action-menu?

Pass a custom component to the 'icon' prop of ActionButton, such as a vector icon from react-native-vector-icons. Style it appropriately, as shown in the example with Icon components in the Basic usage.

react-native-circular-action-menu or react-native-action-button: which one should I choose?

react-native-circular-action-menu excels for circular, Path-style animations with smooth rotations, while react-native-action-button may offer more linear layouts. Consider your UI needs and check community support, as this library has limited recent updates.

Can I integrate BlurView with the backdrop in this menu?

Yes, use the backdrop prop to pass a BlurView component from react-native-blur for native blur effects. This is mentioned in the README under Configuration, but requires additional library installation and setup.

How to disable the auto-hide feature when a button is pressed?

Set the autoInactive prop to false on the ActionButton component. This keeps the menu open after selection, allowing manual control via the active prop for state management.

Is react-native-circular-action-menu still maintained in 2023?

The GitHub repository shows limited recent activity, and examples use older React Native patterns. Check the commit history and issue tracker for updates, as it may not support the latest React Native versions.

How to position the circular menu at the top of the screen instead of bottom?

The position prop only controls horizontal alignment (left, center, right). For vertical positioning, wrap the component in a View with custom styles, as the library assumes bottom placement by default.

Open-Awesome

react-native-circular-action-menu

MITJavaScript

A customizable circular floating action menu component for React Native apps, inspired by Path's UI.

GitHub

477 stars87 forks0 contributors

What is react-native-circular-action-menu?

react-native-circular-action-menu is a React Native library that provides a circular floating action menu component, inspired by the Path app's UI. It allows developers to implement an expandable menu of action buttons with smooth animations and customizable styling. The component solves the need for an interactive, visually appealing action menu in mobile apps without building it from scratch.

Target Audience

React Native developers building mobile applications who need a pre-built, customizable floating action menu with a circular layout. It's particularly useful for those aiming to replicate Path-like UI interactions.

Value Proposition

Developers choose this library because it offers a straightforward, configurable component with polished animations out-of-the-box, saving development time compared to custom implementations. Its flexibility in styling and event handling makes it adaptable to various app designs.

Overview

Path-esque circular action menu inspired by CircularFloatingActionMenu.

Use Cases

Best For

Adding a floating action menu with circular animation in React Native apps
Implementing Path-style UI interactions in mobile applications
Creating expandable action buttons for task management or note-taking features
Building visually polished navigation menus in bottom-right or custom positions
Prototyping mobile app UIs quickly with pre-built interactive components
Enhancing user experience with smooth, animated action triggers

Not Ideal For

Apps requiring linear, grid-based, or non-circular action menu layouts
Projects with strict bundle size constraints where a single-component library adds unnecessary overhead
Teams using modern React Native with hooks and concurrent features, as examples rely on class components
Applications needing built-in accessibility features or extensive ARIA support, not mentioned in documentation

Pros & Cons

Pros

Flexible Positioning Options

Supports left, center, and right positions with configurable radius and rotation degrees, allowing precise menu placement as shown in the ActionButton Config table.

Custom Styling Integration

Enables use of custom icons, backdrop components like BlurView or VibrancyView, and rgba colors for seamless design matching, detailed in the Configuration section.

Interactive Event Handlers

Includes onPress, onLongPress, and onOverlayPress for comprehensive user interaction control, providing flexibility beyond basic taps.

Auto-hide Convenience

The autoInactive prop automatically hides sub-buttons after selection, simplifying state management without extra code.

Cons

RGBA Color Restriction

Forces buttonColor to be specified only in rgba format, limiting flexibility compared to hex or named colors, as noted in the Config table.

Outdated Code Examples

Usage examples rely on class components and older React Native imports like 'Component' from 'react-native', with no guidance for hooks or functional components.

Sparse Documentation Depth

Only basic configuration is covered, lacking advanced tutorials, troubleshooting, or examples for complex animations or theming integration.

Frequently Asked Questions

Related Projects

react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.

Stars17,857

Forks2,102

Last commit15 days ago

lottie-react-native

Lottie wrapper for React Native.

Stars17,146

Forks1,801

Last commit2 days ago

react-native-maps

React Native Mapview component for iOS + Android

Stars15,953

Forks4,955

Last commit1 month ago

react-native-gifted-chat

💬 The most complete chat UI for React Native

Stars14,405

Forks3,612

Last commit5 days ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub