# react-native-action-button-old
> customizable multi-action-button component for react-native
Latest version **2.6.10** (published 2018-08-10) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-native-action-button-old
pnpm add react-native-action-button-old
yarn add react-native-action-button-old
bun add react-native-action-button-old
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.6.10 |
| Published | 2018-08-10 |
| First published | 2018-08-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 349.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2512 |
| Author | Yousef Kamawall |
| Maintainers | angeloocana |
| Keywords | react-native, action-button, float-button, multi-action-button |
## Links
- npm: https://www.npmjs.com/package/react-native-action-button-old
- Repository: https://github.com/mastermoo/react-native-action-button
- Issues: https://github.com/mastermoo/react-native-action-button/issues
- npm.io page: https://npm.io/package/react-native-action-button-old
## Recent versions
- 2.6.10 (latest) — 2018-08-10
## README
# react-native-action-button-old
customizable multi-action-button component for react-native
### Known Issues
- Doesn't Work While Android Debugging. See issue [#79](https://github.com/mastermoo/react-native-action-button/issues/79).
### Installation
```bash
npm i react-native-action-button-old --save
```
### Usage
First, require it from your app's JavaScript files with:
```bash
import ActionButton from 'react-native-action-button-old';
```
##### ActionButton
`ActionButton` component is the main component which wraps everything and provides a couple of props (see Config below).
##### ActionButton.Item
`ActionButton.Item` specifies an Action Button. You have to include at least 1 `ActionButton.Item`.
### Example
_The following Basic example can be found in `example/Basic`._
```js
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import ActionButton from 'react-native-action-button-old';
import Icon from 'react-native-vector-icons/Ionicons';
class App extends Component {
render() {
return (
{/* Rest of the app comes ABOVE the action button component !*/}
console.log("notes tapped!")}>
{}}>
{}}>
);
}
}
const styles = StyleSheet.create({
actionButtonIcon: {
fontSize: 20,
height: 22,
color: 'white',
},
});
```
This will create a floating Button in the bottom right corner with 3 action buttons.
Also this example uses `react-native-vector-icons` for the button Icons.
### FAB Example
```js
{ console.log("hi")}}
/>
```
### Show/hide the FAB on scroll
Take a look at [this gist](https://gist.github.com/mmazzarolo/cfd467436f9d110e94a685b06eb3900f) for showing and hiding the floating action button depending on the scroll direction.
### Configuration
##### ActionButton:
| Property | Type | Default | Description |
| ------------- |:-------------:|:------------: | ----------- |
| resetToken | any | null | use this to reset the internal component state (expand/collapse) in a re-render cycle. Synchronize the component state.
| active | boolean | false | action buttons visible or not
| autoInactive | boolean | true | Auto hide ActionButtons when ActionButton.Item is pressed.
| hideShadow | boolean | false | use this to hide the default elevation and boxShadow
| position | string | "right" / "center" | one of: `left` `center` and `right`
| bgColor | string | "transparent" | background color when ActionButtons are visible
| buttonColor | string | "rgba(0,0,0,1)" | background color of the +Button **(must be rgba value!)**
| spacing | number | 20 | spacing between the `ActionButton.Item`s
| offsetX | number | 30 | offset from the left/right side of the screen
| offsetY | number | 30 | offset from the bottom/top of the screen
| btnOutRange | string | props.buttonColor | button background color to animate to
| outRangeScale | number | 1 | changes size of button during animation
| onPress | function | null | fires, when ActionButton is tapped
| onLongPress | function | null | fires, when ActionButton is long pressed
| icon | Component | + | Custom component for ActionButton Icon
| backdrop | Component | false | Custom component for use as Backdrop (i.e. [BlurView](https://github.com/react-native-fellowship/react-native-blur#blur-view), [VibrancyView](https://github.com/react-native-fellowship/react-native-blur#vibrancy-view))
| degrees | number | 135 | degrees to rotate icon
| buttonText | string | + | use this to set a different text on the button
| buttonTextStyle | style | null | use this to set the textstyle of the button's text
| onReset | function | null | use this to set the callback that will be called after the button reset's it's items
| verticalOrientation | string | "up" | direction action buttons should expand. One of: `up` or `down`
| backgroundTappable | boolean | false | make background tappable in active state of ActionButton
| useNativeFeedback | boolean | true | whether to use TouchableNativeFeedback on Android
| activeOpacity | number | 0.85 | activeOpacity props of TouchableOpacity
##### ActionButton.Item:
| Property | Type | Default | Description |
| ------------- |:-------------:|:------------: | ----------- |
| title | string | undefined | the title shown next to the button. When `undefined` the title is not hidden
| onPress | func | null | **required** function, triggers when a button is tapped
| buttonColor | string | same as + button | background color of the Button
| titleColor | string | "#444" | color of title, *removed* in v2.5. use `textStyle` instead
| titleBgColor | string | "white" | background color of title, *removed* in v2.5. use `textStyle` instead
| textContainerStyle | style | null | use this to set the textstyle of the button's item text container
| textStyle | style | null | use this to set the textstyle of the button's item text
| spaceBetween | number | 15 | use this to set the space between the Button and the text container
| useNativeFeedback | boolean | true | whether to use TouchableNativeFeedback on Android
| activeOpacity | number | 0.85 | activeOpacity props of TouchableOpacity
| hideLabelShadow | boolean | same as hideShadow | use this to hide the button's label default elevation and boxShadow
---
_Source: https://npm.io/package/react-native-action-button-old · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._