react-native-action-button

v2.8.5

customizable multi-action-button component for react-native For more information about how to use this package see README

Latest version published 6 years ago

License: MIT

NPM

GitHub

Package Health Score

53 / 100

security
No known security issues
popularity
Recognized
maintenance
Inactive
community
Sustainable

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version				Vulnerabilities	License Risk
2.8.5	\|	08/2018	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.7.2	\|	07/2017		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.1.11	\|	07/2016		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.0.10	\|	01/2016		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Recognized

Weekly Downloads (3,702)

GitHub Stars: 2.52K
Forks: 569
Contributors: 50

Direct Usage Popularity

The npm package react-native-action-button receives a total of 3,702 downloads a week. As such, we scored react-native-action-button popularity level to be Recognized.

Based on project statistics from the GitHub repository for the npm package react-native-action-button, we found that it has been starred 2,523 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 50
Funding: No

With more than 10 contributors for the react-native-action-button repository, this is possibly a sign for a growing and inviting community.

We found a way for you to contribute to the project! Looks like react-native-action-button is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Inactive

Commit Frequency

No Recent Commits

Open Issues: 80
Open PR: 17
Last Release: 6 years ago
Last Commit: 5 years ago

Further analysis of the maintenance status of react-native-action-button based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Inactive.

An important project maintenance signal to consider for react-native-action-button is that it hasn't seen any new versions released to npm in the past 12 months, and could be considered as a discontinued project, or that which receives low attention from its maintainers.

In the past month we didn't find any pull request activity or change in issues status has been detected for the GitHub repository.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 9 years
Dependencies: 1 Direct
Versions: 68
Install Size: 364 kB
Dist-tags: 1
# of Files: 44
Maintainers: 1
TS Typings: No

react-native-action-button has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

react-native-action-button

customizable multi-action-button component for react-native

react-native-action-button demo

Known Issues

Doesn't Work While Android Debugging. See issue #79.

Installation

npm i react-native-action-button --save

Link react-native-vector-icons native dependencies to your project with:

react-native link react-native-vector-icons

or just:

react-native link

to link all libraries with native dependencies in your project.

Usage

First, require it from your app's JavaScript files with:

import ActionButton from 'react-native-action-button';

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.

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/Ionicons';


class App extends Component {

  render() {
    return (
      
    );
  }

}

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

 { console.log("hi")}}
/&gt;

Show/hide the FAB on scroll

Take a look at this gist for showing and hiding the floating action button depending on the scroll direction.

Configuration

ActionButton:

Property	Type	Default	Description
size	number	56	use this to change the size of the Button
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
onPressIn	function	null	fires, before ActionButton is released
onPressOut	function	null	fires, after ActionButton is released
onLongPress	function	null	fires, when ActionButton is long pressed
renderIcon	function	null	Function to render the component for ActionButton Icon. It is passed a boolean, `active`, which is true if the FAB has been expanded, and false if it is collapsed, allowing you to show a different icon when the ActionButton Items are expanded.
icon	Component	+	Deprecated, use `renderIcon` Custom component for ActionButton Icon
backdrop	Component	false	Custom component for use as Backdrop (i.e. BlurView, VibrancyView)
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
activeOpacity	number	0.85	activeOpacity props of TouchableOpacity
shadowStyle	style	null	The custom shadow style you want to pass in the action button
useNativeFeedback	boolean	true	Android: Whether to use a TouchableNativeFeedback
fixNativeFeedbackRadius	boolean	false	Android: Activate this to fix TouchableNativeFeedback Ripple UI problems
nativeFeedbackRippleColor	string	'rgba(255,255,255,0.75)'	Android: Pass a color to the Ripple Effect of a TouchableNativeFeedback

ActionButton.Item:

Property	Type	Default	Description
size	number	parentSize	use this to change the size of the Button
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
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
shadowStyle	style	null	The custom shadow style you want to pass in the action button item
useNativeFeedback	boolean	true	Android: Whether to use a TouchableNativeFeedback
fixNativeFeedbackRadius	boolean	false	Android: Activate this to fix TouchableNativeFeedback Ripple UI problems
nativeFeedbackRippleColor	string	'rgba(255,255,255,0.75)'	Android: Pass a color to the Ripple Effect of a TouchableNativeFeedback

react-native-action-button dependencies

prop-types

FAQs

What is react-native-action-button?

customizable multi-action-button component for react-native. Visit Snyk Advisor to see a full health score report for react-native-action-button, including popularity, security, maintenance & community analysis.

Is react-native-action-button popular?

The npm package react-native-action-button receives a total of 3,702 weekly downloads. As such, react-native-action-button popularity was classified as a recognized. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is react-native-action-button well maintained?

We found indications that react-native-action-button is an Inactive project. See the full package health analysis to learn more about the package maintenance status.

Is react-native-action-button safe to use?

The npm package react-native-action-button was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 22 November-2024, at 06:41 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Explore Similar Packages

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (3,702)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Readme

react-native-action-button

Known Issues

Installation

Usage

ActionButton

ActionButton.Item

Example

FAB Example

Show/hide the FAB on scroll

Configuration

ActionButton:

ActionButton.Item:

react-native-action-button dependencies

FAQs

What is react-native-action-button?

Is react-native-action-button popular?

Is react-native-action-button well maintained?

Is react-native-action-button safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues