README

react-native-expandable-fab

This is a very small package for React Native containing an expandable and configurable floating action button.

Installation

Using npm: npm i react-native-expandable-fab or with yarn: yarn add react-native-expandable-fab

Usage

This package provides a single component which can be configured to your liking.

Props

Prop name	Prop type	Description
mainColor	string	Color of the main FAB button
secondaryColor	string	Color of the smaller buttons
closeIcon	ReactNode	Component to be displayed as an icon on the main FAB button in its closed state
openIcon	ReactNode	Component to be displayed as an icon on the main FAB button in its opened state
menuIcons	MenuIcon[]	Array of objects containing descriptions of the secondary FAB buttons

MenuIcon

Prop name	Prop type	Description
name	string	Name of the button
icon	ReactNode	Component to be displayed as an icon on the button
text	string?	(Optional) Text to be displayed next to the button
callback	() => void	Callback function called upon clicking the button

Example

This example uses UI-Kitten components, but you can pretty much use any other components.

import ExpandableFloatingAction from 'react-native-expandable-fab';

<ExpandableFloatingAction
    mainColor="#F58B33"
    secondaryColor="#F9B065"
    closeIcon={<Icon name='close-outline' fill='#000'/>}
    openIcon={<Icon name='radio-button-on-outline' fill='#000'/>}
    menuIcons={[
        {
            name: 'inviteToGroup',
            icon: <Icon name='person-add-outline' fill='#000'/>,
            text: <Text>Invite to this group</Text>,
            callback: () => {}
        },
        {
            name: 'createNewTask',
            icon: <Icon name='plus-outline' fill='#000'/>,
            text: <Text>Create new task</Text>,
            callback: () => {}
        }
    ]}
/>

Usage no npm install needed!