Extend ActionButton to take buttonFontSize and btnOutRange

Author: LilyMGoh

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,13 +275,16 @@ ActionButton.propTypes = {
   radius: PropTypes.number,
   children: PropTypes.node,
   position: PropTypes.oneOf(['left', 'center', 'right']),
+  btnOutRange: PropTypes.string,
+  buttonFontSize: PropTypes.number,
 };
 
 ActionButton.defaultProps = {
   active: false,
   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',
   },

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