From 118beb71699bb8da305046ba6a0a7775276530bf Mon Sep 17 00:00:00 2001
From: Lily <qvang.j@gmail.com>
Date: Tue, 13 Dec 2016 16:04:54 -0800
Subject: [PATCH 1/4] Extend ActionButton to take buttonFontSize and
 btnOutRange

---
 ActionButton.js | 7 +++++--
 README.md       | 1 +
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/ActionButton.js b/ActionButton.js
index 2a4ddb5..16888e3 100644
--- a/ActionButton.js
+++ b/ActionButton.js
@@ -156,6 +156,7 @@ export default class ActionButton extends Component {
       <Animated.Text
         style={[styles.btnText,
                 {
+                  fontSize: this.props.buttonFontSize,
                   color: this.state.anim.interpolate({
                     inputRange: [0, 1],
                     outputRange: [this.props.buttonTextColor, this.props.btnOutRangeTxt]
@@ -196,7 +197,7 @@ export default class ActionButton extends Component {
               angle={startRadian + index * offset}
               btnColor={this.props.btnOutRange}
               {...button.props}
-              onPress={() => {
+              onPress={() => {
                   if (this.props.autoInactive) {
                     this.timeout = setTimeout(() => {
                       this.reset();
@@ -274,6 +275,8 @@ ActionButton.propTypes = {
   radius: PropTypes.number,
   children: PropTypes.node,
   position: PropTypes.oneOf(['left', 'center', 'right']),
+  btnOutRange: PropTypes.string,
+  buttonFontSize: PropTypes.number,
 };
 
 ActionButton.defaultProps = {
@@ -281,6 +284,7 @@ ActionButton.defaultProps = {
   bgColor: 'transparent',
   buttonColor: 'rgba(0,0,0,1)',
   buttonTextColor: 'rgba(255,255,255,1)',
+  buttonFontSize: 24,
   position: 'center',
   outRangeScale: 1,
   autoInactive: true,
@@ -326,7 +330,6 @@ const styles = StyleSheet.create({
   },
   btnText: {
     marginTop: -4,
-    fontSize: 24,
     backgroundColor: 'transparent',
     position: 'relative',
   },
diff --git a/README.md b/README.md
index baccb15..ab25717 100644
--- a/README.md
+++ b/README.md
@@ -86,6 +86,7 @@ Also this example uses `react-native-vector-icons` for the button Icons.
 | radiua | number | 100 | radius of menu
 | bgColor   | string        | "transparent"       | color of overlay when ActionButtons are visible
 | buttonColor    | string        | "rgba(0,0,0,1)"     | background color of the +Button **(must be rgba value!)**
+| buttonFontSize | number        | 24                  | + and x sizes
 | 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

From 7eef2ec92555bdfcaca698fc1199282f9688a498 Mon Sep 17 00:00:00 2001
From: Lily <qvang.j@gmail.com>
Date: Tue, 17 Jan 2017 11:05:32 -0800
Subject: [PATCH 2/4] Add onClose to props

---
 ActionButton.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/ActionButton.js b/ActionButton.js
index 16888e3..fefc296 100644
--- a/ActionButton.js
+++ b/ActionButton.js
@@ -51,6 +51,12 @@ export default class ActionButton extends Component {
     clearTimeout(this.timeout);
   }
 
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      active: nextProps.active
+    });
+  }
+
   getActionButtonStyle() {
     return [styles.actionBarItem, this.getButtonSize()];
   }
@@ -95,6 +101,7 @@ export default class ActionButton extends Component {
     }).start();
 
     setTimeout(() => {
+      this.props.onClose();
       this.setState({ active: false });
     }, 250);
   }
@@ -266,6 +273,7 @@ ActionButton.propTypes = {
   autoInactive: PropTypes.bool,
   onPress: PropTypes.func,
   onOverlayPress: PropTypes.func,
+  onClose: PropTypes.func,
   backdrop: PropTypes.oneOfType([
     PropTypes.bool,
     PropTypes.object,
@@ -290,6 +298,7 @@ ActionButton.defaultProps = {
   autoInactive: true,
   onPress: () => {},
   onOverlayPress: () => {},
+  onClose: () => {},
   backdrop: false,
   degrees: 135,
   size: 63,

From 7d09e14764e4e861fafa4650d68f9eb199eeb191 Mon Sep 17 00:00:00 2001
From: Lily <qvang.j@gmail.com>
Date: Wed, 18 Jan 2017 18:02:37 -0800
Subject: [PATCH 3/4] Add padding to props

---
 ActionButton.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/ActionButton.js b/ActionButton.js
index fefc296..be011ac 100644
--- a/ActionButton.js
+++ b/ActionButton.js
@@ -66,7 +66,7 @@ export default class ActionButton extends Component {
     return [styles.overlay, styles.actionContainer, {
       alignItems,
       justifyContent,
-    }];
+    }, {padding: this.props.padding}];
   }
   getActionsStyle() {
     return [this.getButtonSize()];
@@ -282,6 +282,7 @@ ActionButton.propTypes = {
   endDegree: PropTypes.number,
   radius: PropTypes.number,
   children: PropTypes.node,
+  padding: PropTypes.number,
   position: PropTypes.oneOf(['left', 'center', 'right']),
   btnOutRange: PropTypes.string,
   buttonFontSize: PropTypes.number,
@@ -293,6 +294,7 @@ ActionButton.defaultProps = {
   buttonColor: 'rgba(0,0,0,1)',
   buttonTextColor: 'rgba(255,255,255,1)',
   buttonFontSize: 24,
+  padding: 10,
   position: 'center',
   outRangeScale: 1,
   autoInactive: true,
@@ -318,8 +320,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
   },
   actionContainer: {
-    flexDirection: 'column',
-    padding: 10,
+    flexDirection: 'column'
   },
   actionBarItem: {
     alignItems: 'center',

From 0cbc97a5386fa5340f2252e29538f5f1144440f1 Mon Sep 17 00:00:00 2001
From: Lily <qvang.j@gmail.com>
Date: Wed, 12 Apr 2017 13:46:48 -0700
Subject: [PATCH 4/4] Styling fix

---
 ActionButton.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ActionButton.js b/ActionButton.js
index be011ac..b0f3ff9 100644
--- a/ActionButton.js
+++ b/ActionButton.js
@@ -297,7 +297,7 @@ ActionButton.defaultProps = {
   padding: 10,
   position: 'center',
   outRangeScale: 1,
-  autoInactive: true,
+  autoInactive: false,
   onPress: () => {},
   onOverlayPress: () => {},
   onClose: () => {},
@@ -339,7 +339,6 @@ const styles = StyleSheet.create({
     shadowRadius: 1,
   },
   btnText: {
-    marginTop: -4,
     backgroundColor: 'transparent',
     position: 'relative',
   },