Add ActionButton Style + Add ActionButtonItem style and activeStyle

ActionButtonItem.js

@@ -12,48 +12,74 @@ import PropTypes from 'prop-types';
 export default class ActionButtonItem extends Component {
 
   render() {
-    const offsetX = this.props.radius * Math.cos(this.props.angle);
-    const offsetY = this.props.radius * Math.sin(this.props.angle);
+    const {
+      radius,
+      angle,
+      anim,
+      size,
+      startDegree,
+      endDegree,
+      activeOpacity,
+      onPress,
+      buttonColor,
+      style,
+      active,
+      activeStyle,
+      children,
+      ...others
+    } = this.props;
+    const offsetX = radius * Math.cos(angle);
+    const offsetY = radius * Math.sin(angle);
     return (
       <Animated.View
         style={[{
-          opacity: this.props.anim,
-          width: this.props.size,
-          height: this.props.size,
+          opacity: anim,
+          width: size,
+          height: size,
           transform: [
             {
-              translateY: this.props.anim.interpolate({
+              translateY: anim.interpolate({
                 inputRange: [0, 1],
                 outputRange: [0, offsetY],
-              }) },
+              })
+            },
             {
-              translateX: this.props.anim.interpolate({
+              translateX: anim.interpolate({
                 inputRange: [0, 1],
                 outputRange: [0, offsetX],
-              }) },
+              })
+            },
             {
-              rotate: this.props.anim.interpolate({
+              rotate: anim.interpolate({
                 inputRange: [0, 1],
-                outputRange: [`${this.props.startDegree}deg`, `${this.props.endDegree}deg`],
-              }) },
+                outputRange: [`${startDegree}deg`, `${endDegree}deg`],
+              })
+            },
             {
-              scale: this.props.anim.interpolate({
+              scale: anim.interpolate({
                 inputRange: [0, 1],
                 outputRange: [0, 1],
-              }) },
+              })
+            },
           ]
         }]}
       >
-        <TouchableOpacity style={{flex:1}} activeOpacity={this.props.activeOpacity || 0.85} onPress={this.props.onPress}>
+        <TouchableOpacity
+          {...others}
+          style={{ flex: 1 }}
+          activeOpacity={activeOpacity || 0.85}
+          onPress={onPress}>
           <View
-            style={[styles.actionButton,{
-              width: this.props.size,
-              height: this.props.size,
-              borderRadius: this.props.size / 2,
-              backgroundColor: this.props.buttonColor,
-            }]}
+            style={[styles.actionButton, {
+              width: size,
+              height: size,
+              borderRadius: size / 2,
+              backgroundColor: buttonColor,
+            },
+              style,
+            active ? activeStyle : undefined]}
           >
-            {this.props.children}
+            {children}
           </View>
         </TouchableOpacity>
       </Animated.View>
@@ -70,12 +96,16 @@ ActionButtonItem.propTypes = {
   children: PropTypes.node.isRequired,
   startDegree: PropTypes.number,
   endDegree: PropTypes.number,
+  style: PropTypes.object,
+  activeStyle: PropTypes.object,
+  active: PropTypes.bool,
 };
 
 ActionButtonItem.defaultProps = {
-  onPress: () => {},
+  onPress: () => { },
   startDegree: 0,
-  endDegree: 720
+  endDegree: 720,
+  active: false,
 };
 
 const styles = StyleSheet.create({

example/Basic/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  root: true,
+  extends: '@react-native-community',
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+};

example/Basic/.gitattributes

@@ -0,0 +1 @@
+*.pbxproj -text

example/Basic/.gitignore

@@ -22,19 +22,43 @@ DerivedData
 *.xcuserstate
 project.xcworkspace
 
-# Android/IJ
+# Android/IntelliJ
 #
+build/
 .idea
 .gradle
 local.properties
+*.iml
+
+# Visual Studio Code
+#
+.vscode/
 
 # node.js
 #
 node_modules/
 npm-debug.log
+yarn-error.log
 
 # BUCK
 buck-out/
 \.buckd/
-android/app/libs
-android/keystores/debug.keystore
+*.keystore
+!debug.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots
+
+# Bundle artifact
+*.jsbundle
+
+# CocoaPods
+/ios/Pods/

example/Basic/.prettierrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  bracketSpacing: false,
+  jsxBracketSameLine: true,
+  singleQuote: true,
+  trailingComma: 'all',
+};

example/Basic/App.tsx

@@ -0,0 +1,69 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * Generated with the TypeScript template
+ * https://github.com/react-native-community/react-native-template-typescript
+ *
+ * @format
+ */
+
+import React, { useState } from 'react';
+import { SafeAreaView, StatusBar, StyleSheet, View, ViewStyle } from 'react-native';
+import ActionButton from 'react-native-circular-action-menu';
+import Icon from 'react-native-vector-icons/Ionicons';
+
+
+declare var global: { HermesInternal: null | {} };
+
+const App = () => {
+
+  const [active, setActive] = useState(false)
+
+  return (
+    <>
+      <StatusBar barStyle="dark-content" />
+      <SafeAreaView style={{ flex: 1 }}>
+        <View style={{ flex: 1, backgroundColor: '#f3f3f3' }}>
+          {/*Rest of App come ABOVE the action button component!*/}
+          <ActionButton buttonColor="rgba(231,76,60,1)" bgColor='rgba(0,0,0,0.4)' style={ACTION_BUTTON_STYLE} position='right'>
+            <ActionButton.Item active={active} activeStyle={ACTION_BUTTON_ITEM_STYLE} buttonColor='#9b59b6' title="New Task" onPress={() => {
+              setActive(!active)
+              console.log('Active ' + active)
+            }}>
+              {active ? <Icon name="ios-close-circle-outline" style={styles.actionButtonIcon} /> : <Icon name="md-create" style={styles.actionButtonIcon} />}
+
+            </ActionButton.Item>
+            <ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => { }}>
+              <Icon name="md-notifications-outline" style={styles.actionButtonIcon} />
+            </ActionButton.Item>
+            <ActionButton.Item buttonColor='#1abc9c' title="All Tasks" onPress={() => { }}>
+              <Icon name="md-done-all" style={styles.actionButtonIcon} />
+            </ActionButton.Item>
+          </ActionButton>
+        </View>
+      </SafeAreaView>
+    </>
+  );
+};
+
+const ACTION_BUTTON_STYLE: ViewStyle = {
+  borderColor: 'white',
+  borderWidth: 1
+}
+
+const ACTION_BUTTON_ITEM_STYLE: ViewStyle = {
+  borderColor: 'white',
+  borderWidth: 1,
+  backgroundColor: 'red'
+}
+
+const styles = StyleSheet.create({
+  actionButtonIcon: {
+    fontSize: 20,
+    height: 22,
+    color: 'white',
+  },
+});
+
+export default App;

example/Basic/__tests__/App-test.tsx

@@ -0,0 +1,14 @@
+/**
+ * @format
+ */
+
+import 'react-native';
+import React from 'react';
+import App from '../App';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  renderer.create(<App />);
+});