https://github.com/hieutbui/react-native-floatng-action-circle-button
Customizable floating multi-action-button component for React Native
https://github.com/hieutbui/react-native-floatng-action-circle-button
action-buttons component fab floating-action-button react-native
Last synced: 5 months ago
JSON representation
Customizable floating multi-action-button component for React Native
- Host: GitHub
- URL: https://github.com/hieutbui/react-native-floatng-action-circle-button
- Owner: hieutbui
- License: mit
- Created: 2022-08-28T06:30:18.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-09-05T02:01:19.000Z (almost 4 years ago)
- Last Synced: 2025-11-06T10:11:15.289Z (7 months ago)
- Topics: action-buttons, component, fab, floating-action-button, react-native
- Language: Java
- Homepage:
- Size: 534 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React native floating action circle button
Simple floating action button component with circle button for react native.
## Demo
## Installation
```bash
npm install react-native-floating-action-circle-button
```
## Usage/Examples
**First step:** import Component
```javascript
import FloatingActionButton from 'react-native-floating-action-circle-button';
```
**Second step:** add actions list
```javascript
const actions = [
{
icon: Assets.Icons.activeBin,
label: 'Delete',
disable: false,
onPress: null,
},
{
icon: Assets.Icons.inactiveCancelInvoice,
label: 'Cancel',
disable: true,
onPress: null,
},
{
icon: Assets.Icons.activeReport,
label: 'Report',
disable: false,
onPress: null,
},
];
```
**Third step:** place it in the screen
```javascript
```
## Props
| Property | Type | Default | Description |
| :-------- | :------- |:--- | :------------------------- |
| `actions` | `Array` |`[]` | Actions to be shown when user press the anchor Floating Button. **Must pass at less one action** |
| `containerStyle` | `style` |`null`| The custom style for wrapper container |
| `actionButtonStyle` | `style` | `null` | The custom style for actions button |
| `backgroundStyle` | `style` | `null` | The custom style for background and disable |
| `anchorInactiveIcon` | `ImageSourcePropType` | `...` | Icon to be rendered for anchor button when it's not pressed |
| `anchorActiveIcon` | `ImageSourcePropType` | `X` | Icon to be rendered for anchor button when it is pressed |
| `anchorButtonStyle` | `style` | `null` | The custom style for anchor button |
| `anchorIconStyle` | `style` | `null` | The custom style for icon inside anchor button |
#### `actions` props
| Property | Type | Default | Description |
| :-------- | :------- |:--- | :------------------------- |
| `disable` | `Boolean` |`false`| Actions status |
| `label` | `string` |``| Label for action |
| `onPress` | `Function` | `null` | Function to be called when action button is pressed. **Can't press when disable is true** |
| `icon` | `ImageSourcePropType` | `null` | Icon to be rendered inside action button |
| `iconStyle` | `style` | `null` | The custom style for icon inside action button |
| `buttonStyle` | `style` | `null` | The custom style for action button |
## License
[MIT](https://choosealicense.com/licenses/mit/)