/react-native-expandable-fab

Primary LanguageTypeScriptMIT LicenseMIT

react-native-expandable-fab npm version

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: () => {}
        }
    ]}
/>