1.1.2 • Published 3 years ago
react-native-expandable-fab v1.1.2
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: () => {}
}
]}
/>