better action button using react-native-action-button (#29)

croma-app · Mar 12, 2020 · 56273d6 · 56273d6
1 parent 50bb3ab
commit 56273d6
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 90 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,7 +7,8 @@
     "web": "expo start --web",
     "eject": "expo eject",
     "test": "jest --watchAll",
-    "prettier": "prettier '*.js'"
+    "prettier": "prettier '*.js'",
+    "postinstall": "rm -rf ./node_modules/expo/node_modules/expo-font/"
   },
   "jest": {
     "preset": "jest-expo"
@@ -33,7 +34,7 @@
     "react": "16.9.0",
     "react-dom": "16.9.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
-    "react-native-floating-action": "^1.20.0",
+    "react-native-action-button": "^2.8.5",
     "react-native-gesture-handler": "~1.5.0",
     "react-native-platform-touchable": "^1.1.1",
     "react-native-svg": "9.13.3",

diff --git a/screens/ColorPickerScreen.js b/screens/ColorPickerScreen.js
@@ -11,7 +11,7 @@ export default function ColorPickerScreen(props) {
           onChangeColor={color => {
             setColor(color);
           }}
-          style={[{ height: 300, verticalMargin: 8, flex: 1 }]}
+          style={[{ height: 300, flex: 1 }]}
         />
         <CromaButton
           onPress={() => {

diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js
@@ -10,7 +10,6 @@ import {
 import { PaletteCard } from "../components/PaletteCard";
 import { UndoDialog, DialogContainer } from "../components/CommanDialogs";
 import { Croma } from "../store/store";
-import { FloatingAction } from "react-native-floating-action";
 import Colors from "../constants/Colors";
 import * as ImagePicker from "expo-image-picker";
 import Constants from "expo-constants";
@@ -19,39 +18,12 @@ import ColorPicker from "../libs/ColorPicker";
 import Jimp from "jimp";
 import { Header } from "react-navigation";
 import EmptyView from "../components/EmptyView";
-
+import ActionButton from 'react-native-action-button';
+import { Ionicons } from '@expo/vector-icons';
+Ionicons.loadFont();
 const HomeScreen = function (props) {
   const { height, width } = Dimensions.get("window");
-
-  const actions = [
-    {
-      text: "Get palette from image",
-      name: "palette_from_image",
-      position: 2,
-      color: Colors.accent
-    },
-    {
-      text: "Get palette from color",
-      name: "palette_from_color",
-      position: 1,
-      color: Colors.accent
-    },
-    {
-      text: "Add colors manually",
-      name: "add_colors_manually",
-      position: 3,
-      color: Colors.accent
-    },
-    {
-      text: "Unlock Pro",
-      name: "unlock_pro",
-      position: 4,
-      color: Colors.primary
-    }
-  ];
-  if (Platform.OS === "web") {
-    actions.pop();
-  }
+
   const {
     isLoading,
     allPalettes,
@@ -107,36 +79,8 @@ const HomeScreen = function (props) {
             })}
             <EmptyView />
           </ScrollView>
-          <FloatingAction
-            color={Colors.accent}
-            actions={actions}
-            onPressItem={name => {
-              if (name === "palette_from_image") {
-                setPickImgLoading(true);
-                pickImage()
-                  .then((image, err) => {
-                    setPickImgLoading(false);
-                    props.navigation.navigate("ColorList", {
-                      colors: ColorPicker.getProminentColors(image)
-                    });
-                  })
-                  .catch((err) => {
-                    setPickImgLoading(false);
-                  });
-              } else if (name === "palette_from_color") {
-                props.navigation.navigate("ColorPicker", {
-                  onDone: color => {
-                    props.navigation.navigate("Palettes", {
-                      color: color.color
-                    });
-                  }
-                });
-              } else if (name === "add_colors_manually") {
-                props.navigation.navigate("AddPaletteManually");
-              } else if (name === "unlock_pro") {
-              }
-            }}
-          />
+
+
         </View>
 
         <DialogContainer>
@@ -150,11 +94,45 @@ const HomeScreen = function (props) {
             );
           })}
         </DialogContainer>
+        {/*Setting box shadow to false because of Issue on the web: https://github.com/mastermoo/react-native-action-button/issues/337 */}
+        <ActionButton bgColor="rgba(68, 68, 68, 0.6)" hideShadow={Platform.OS === "web" ? "true" : "false"} buttonColor={Colors.accent} key="action-button-home">
+          <ActionButton.Item buttonColor='#9b59b6' title="Get palette from image" onPress={() => {
+             setPickImgLoading(true);
+             pickImage()
+               .then((image, err) => {
+                 setPickImgLoading(false);
+                 props.navigation.navigate("ColorList", {
+                   colors: ColorPicker.getProminentColors(image)
+                 });
+               })
+               .catch((err) => {
+                 setPickImgLoading(false);
+               });
+          }}>
+            <Ionicons name="md-camera" style={styles.actionButtonIcon} />
+          </ActionButton.Item>
+          <ActionButton.Item buttonColor='#3498db' title="Get palette from color" onPress={() => {
+             props.navigation.navigate("ColorPicker", {
+              onDone: color => {
+                props.navigation.navigate("Palettes", {
+                  color: color.color
+                });
+              }
+            });
+          }}>
+            <Ionicons name="md-color-palette" style={styles.actionButtonIcon} />
+          </ActionButton.Item>
+          <ActionButton.Item buttonColor='#1abc9c' title="Add colors manually" onPress={() =>  props.navigation.navigate("AddPaletteManually")}>
+            <Ionicons name="md-color-filter" style={styles.actionButtonIcon} />
+          </ActionButton.Item>
+        </ActionButton>
       </>
     );
   }
 };
 
+
+
 export default HomeScreen;
 
 HomeScreen.navigationOptions = {
@@ -165,5 +143,10 @@ const styles = StyleSheet.create({
   container: {
     margin: 8,
     justifyContent: "center"
-  }
+  },
+  actionButtonIcon: {
+    fontSize: 20,
+    height: 22,
+    color: 'white',
+  },
 });
diff --git a/screens/PaletteScreen.js b/screens/PaletteScreen.js
@@ -1,20 +1,13 @@
 import React, { useState } from "react";
+
 import SingleColorCard from "../components/SingleColorCard";
-import { ScrollView, StyleSheet, View, Dimensions } from "react-native";
+import { ScrollView, StyleSheet, View, Dimensions, Platform } from "react-native";
 import { UndoDialog, DialogContainer } from "../components/CommanDialogs";
 import { Croma } from "../store/store";
-import { FloatingAction } from "react-native-floating-action";
+import ActionButton from 'react-native-action-button';
 import Colors from "../constants/Colors";
 import { Header } from "react-navigation";
 import EmptyView from "../components/EmptyView";
-const actions = [
-  {
-    text: "Add color",
-    icon: require("../assets/images/add.png"),
-    name: "add_color",
-    position: 1
-  }
-];
 export default function PaletteScreen(props) {
   const { height, width } = Dimensions.get("window");
   const paletteName = props.navigation.getParam("name");
@@ -57,17 +50,15 @@ export default function PaletteScreen(props) {
           })}
           <EmptyView />
         </ScrollView>
-        <FloatingAction
-          actions={actions}
-          overrideWithAction={true}
-          color={Colors.accent}
-          onPressItem={() =>
+        <ActionButton bgColor="rgba(68, 68, 68, 0.6)" hideShadow={Platform.OS === "web" ? "true" : "false"}
+          buttonColor={Colors.accent}
+          onPress={() => {  
             props.navigation.navigate("ColorPicker", {
-              onDone: color => {
-                addColorToPalette(paletteName, color);
-              }
-            })
-          }
+            onDone: color => {
+              addColorToPalette(paletteName, color);
+            }
+          });
+        }}
         />
       </View>
       <DialogContainer>