From b460ec7a89855d799dbe86f681dbdc2f3f2175a4 Mon Sep 17 00:00:00 2001 From: kamal Date: Thu, 12 Mar 2020 07:24:54 +0530 Subject: [PATCH] better action button using react-native-action-button --- package-lock.json | 11 ++-- package.json | 5 +- screens/ColorPickerScreen.js | 2 +- screens/HomeScreen.js | 109 +++++++++++++++-------------------- screens/PaletteScreen.js | 31 ++++------ 5 files changed, 68 insertions(+), 90 deletions(-) diff --git a/package-lock.json b/package-lock.json index b44860d0..13fc437b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16919,10 +16919,13 @@ } } }, - "react-native-floating-action": { - "version": "1.20.0", - "resolved": "https://registry.npmjs.org/react-native-floating-action/-/react-native-floating-action-1.20.0.tgz", - "integrity": "sha512-FQi4HkfPBXIyb/cT300v54j1FChZ78K2QVlzY4TKlUDIimRmKJ9P5ie79NBvtKv9wTXXT6+Y0XVXFfOX4zuIwQ==" + "react-native-action-button": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/react-native-action-button/-/react-native-action-button-2.8.5.tgz", + "integrity": "sha512-BvGZpzuGeuFR2Y6j93+vKiSqDhsF87VHvNXFs/qEYKfzT4b1ASAT/GQbgS6gNt4jRJCUnJWYrIwlBzRjesZQmQ==", + "requires": { + "prop-types": "^15.5.10" + } }, "react-native-gesture-handler": { "version": "1.5.2", diff --git a/package.json b/package.json index 4e046190..47509ec7 100644 --- 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 index bec51191..a9376433 100644 --- 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 }]} /> { diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js index ca83173c..c0c8d6e5 100644 --- 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) { })} - { - 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") { - } - }} - /> + + @@ -150,11 +94,45 @@ const HomeScreen = function (props) { ); })} + {/*Setting box shadow to false because of Issue on the web: https://github.com/mastermoo/react-native-action-button/issues/337 */} + + { + setPickImgLoading(true); + pickImage() + .then((image, err) => { + setPickImgLoading(false); + props.navigation.navigate("ColorList", { + colors: ColorPicker.getProminentColors(image) + }); + }) + .catch((err) => { + setPickImgLoading(false); + }); + }}> + + + { + props.navigation.navigate("ColorPicker", { + onDone: color => { + props.navigation.navigate("Palettes", { + color: color.color + }); + } + }); + }}> + + + props.navigation.navigate("AddPaletteManually")}> + + + ); } }; + + 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 index c07addaa..7320b735 100644 --- 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) { })} - + { props.navigation.navigate("ColorPicker", { - onDone: color => { - addColorToPalette(paletteName, color); - } - }) - } + onDone: color => { + addColorToPalette(paletteName, color); + } + }); + }} />