Merge branch 'master' of https://github.com/mastermoo/react-native-action-button into mastermoo-master

Author: dlimx

ActionButton.js

@@ -32,7 +32,12 @@ export default class ActionButton extends Component {
  this.timeout = null;
  }
 
+ componentDidMount() {
+ this.mounted = true;
+ }
+
  componentWillUnmount() {
+ this.mounted = false;
  clearTimeout(this.timeout);
  }
 
@@ -211,6 +216,8 @@ export default class ActionButton extends Component {
  >
  <Touchable
  testID={this.props.testID}
+ accessible={this.props.accessible}
+ accessibilityLabel={this.props.accessibilityLabel}
  background={touchableBackground(
  this.props.nativeFeedbackRippleColor,
  this.props.fixNativeFeedbackRadius
@@ -237,8 +244,12 @@ export default class ActionButton extends Component {
  }
 
  _renderButtonIcon() {
- const { icon, btnOutRangeTxt, buttonTextStyle, buttonText } = this.props;
- if (icon) return icon;
+ const { icon, renderIcon, btnOutRangeTxt, buttonTextStyle, buttonText } = this.props;
+ if (renderIcon) return renderIcon(this.state.active);
+ if (icon) {
+ console.warn('react-native-action-button: The `icon` prop is deprecated! Use `renderIcon` instead.');
+ return icon;
+ }
 
  const textColor = buttonTextStyle.color || "rgba(255,255,255,1)";
 
@@ -265,7 +276,9 @@ export default class ActionButton extends Component {
 
  if (!this.state.active) return null;
 
- const actionButtons = !Array.isArray(children) ? [children] : children;
+ let actionButtons = !Array.isArray(children) ? [children] : children;
+
+ actionButtons = actionButtons.filter( actionButton => (typeof actionButton == 'object') )
 
  const actionStyle = {
  flex: 1,
@@ -335,10 +348,11 @@ export default class ActionButton extends Component {
  this.anim.setValue(0);
  }
 
- setTimeout(
- () => this.setState({ active: false, resetToken: this.state.resetToken }),
- 250
- );
+ setTimeout(() => {
+ if (this.mounted) {
+ this.setState({ active: false, resetToken: this.state.resetToken }); 
+ }
+ }, 250);
  }
 }
 
@@ -360,6 +374,8 @@ ActionButton.propTypes = {
  PropTypes.number
  ]),
 
+ renderIcon: PropTypes.func,
+
  bgColor: PropTypes.string,
  bgOpacity: PropTypes.number,
  buttonColor: PropTypes.string,
@@ -384,7 +400,9 @@ ActionButton.propTypes = {
  fixNativeFeedbackRadius: PropTypes.bool,
  nativeFeedbackRippleColor: PropTypes.string,
 
- testID: PropTypes.string
+ testID: PropTypes.string,
+ accessibilityLabel: PropTypes.string,
+ accessible: PropTypes.bool
 };
 
 ActionButton.defaultProps = {
@@ -414,7 +432,9 @@ ActionButton.defaultProps = {
  activeOpacity: DEFAULT_ACTIVE_OPACITY,
  fixNativeFeedbackRadius: false,
  nativeFeedbackRippleColor: "rgba(255,255,255,0.75)",
- testID: undefined
+ testID: undefined,
+ accessibilityLabel: undefined,
+ accessible: undefined
 };
 
 const styles = StyleSheet.create({

ActionButtonItem.js

@@ -108,6 +108,7 @@ export default class ActionButtonItem extends Component {
  > 
  <Touchable
  testID={this.props.testID}
+ accessibilityLabel={this.props.accessibilityLabel}
  background={touchableBackground(
  this.props.nativeFeedbackRippleColor,
  this.props.fixNativeFeedbackRadius

README.md

@@ -98,6 +98,7 @@ Take a look at [this gist](https://gist.github.com/mmazzarolo/cfd467436f9d110e94
 ##### 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.
@@ -114,7 +115,8 @@ Take a look at [this gist](https://gist.github.com/mmazzarolo/cfd467436f9d110e94
 | 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
-| icon | Component | + | Custom component for ActionButton Icon
+| 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](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
@@ -132,6 +134,7 @@ Take a look at [this gist](https://gist.github.com/mmazzarolo/cfd467436f9d110e94
 ##### 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

index.d.ts

@@ -28,6 +28,7 @@ export interface ActionButtonProperties extends ViewProperties {
  size?: number,
  autoInactive?: boolean,
  onPress?: () => void,
+ renderIcon?: (active: boolean) => React.ReactElement,
  backdrop?: boolean | object,
  degrees?: number,
  verticalOrientation?: 'up' | 'down',
@@ -40,6 +41,7 @@ export interface ActionButtonProperties extends ViewProperties {
 }
 
 export interface ActionButtonItemProperties extends ViewProperties {
+ size?: number,
  title?: string
  onPress?:() => void
  buttonColor?:string

package-lock.json

@@ -1,6 +1,6 @@
 {
  "name": "react-native-action-button",
- "version": "2.10.0",
+ "version": "2.8.5",
  "description": "customizable multi-action-button component for react-native",
  "main": "ActionButton.js",
  "scripts": {