A customizable floating action button component for React Native that expands to reveal multiple action items.
React Native Action Button is a customizable floating action button component for React Native apps. It provides a main button that expands to reveal multiple secondary action buttons, implementing a common Material Design pattern for primary actions. It solves the need for a ready-to-use, flexible FAB component with smooth animations and extensive styling options.
React Native developers building mobile applications who need a floating action button with expandable sub-actions, particularly those following Material Design guidelines.
Developers choose it for its extensive customization options, smooth animations, and simple integration, avoiding the need to build a complex expandable FAB from scratch. It's specifically designed for React Native with platform-aware touch handling.
customizable multi-action-button component for react-native
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
With over 20 configurable props for size, colors, position, spacing, and animation, developers can fine-tune the FAB to match any app design, as detailed in the extensive configuration tables in the README.
The component provides fluid animations for expanding and collapsing sub-actions via ActionButton.Item, enhancing user experience with visual feedback for primary actions, demonstrated in the GIF examples.
Supports TouchableNativeFeedback on Android with configurable ripple effects using props like nativeFeedbackRippleColor, ensuring a native feel across different mobile platforms.
Allows placement at left, center, or right with offsetX and offsetY, and supports vertical orientation up or down, giving precise control over the FAB's layout in the app.
A known issue (#79) prevents the component from working during Android debugging sessions, hindering development and testing workflows without fixes or workarounds.
Requires linking react-native-vector-icons for icon support, adding setup complexity and potential dependency conflicts, as noted in the installation steps.
Scroll integration requires separate implementation using an external gist rather than being a seamless part of the component, increasing integration effort for dynamic UX.