From b3b2cfe9093cc9b95d35771d3029e05bc524d380 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Wed, 31 Aug 2022 20:09:58 -0500 Subject: [PATCH] Add composer FAB to home page --- ios/Podfile.lock | 6 +++ package.json | 1 + src/view/com/util/FloatingActionButton.tsx | 50 ++++++++++++++++++++++ src/view/lib/z-index.ts | 2 + src/view/screens/Home.tsx | 6 +++ todos.txt | 2 +- yarn.lock | 5 +++ 7 files changed, 71 insertions(+), 1 deletion(-) create mode 100644 src/view/com/util/FloatingActionButton.tsx create mode 100644 src/view/lib/z-index.ts diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 46f25c97..e3869b59 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -1,5 +1,7 @@ PODS: - boost (1.76.0) + - BVLinearGradient (2.6.2): + - React-Core - DoubleConversion (1.1.6) - FBLazyVector (0.68.2) - FBReactNativeSpec (0.68.2): @@ -333,6 +335,7 @@ PODS: DEPENDENCIES: - boost (from `../node_modules/react-native/third-party-podspecs/boost.podspec`) + - BVLinearGradient (from `../node_modules/react-native-linear-gradient`) - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`) - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`) - FBReactNativeSpec (from `../node_modules/react-native/React/FBReactNativeSpec`) @@ -381,6 +384,8 @@ SPEC REPOS: EXTERNAL SOURCES: boost: :podspec: "../node_modules/react-native/third-party-podspecs/boost.podspec" + BVLinearGradient: + :path: "../node_modules/react-native-linear-gradient" DoubleConversion: :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec" FBLazyVector: @@ -460,6 +465,7 @@ EXTERNAL SOURCES: SPEC CHECKSUMS: boost: a7c83b31436843459a1961bfd74b96033dc77234 + BVLinearGradient: 34a999fda29036898a09c6a6b728b0b4189e1a44 DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662 FBLazyVector: a7a655862f6b09625d11c772296b01cd5164b648 FBReactNativeSpec: 81ce99032d5b586fddd6a38d450f8595f7e04be4 diff --git a/package.json b/package.json index 1368a089..5dc8ac07 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "react-native": "0.68.2", "react-native-gesture-handler": "^2.5.0", "react-native-inappbrowser-reborn": "^3.6.3", + "react-native-linear-gradient": "^2.6.2", "react-native-progress": "^5.0.0", "react-native-reanimated": "^2.9.1", "react-native-root-siblings": "^4.1.1", diff --git a/src/view/com/util/FloatingActionButton.tsx b/src/view/com/util/FloatingActionButton.tsx new file mode 100644 index 00000000..acfc4866 --- /dev/null +++ b/src/view/com/util/FloatingActionButton.tsx @@ -0,0 +1,50 @@ +import React from 'react' +import {GestureResponderEvent, StyleSheet, TouchableOpacity} from 'react-native' +import LinearGradient from 'react-native-linear-gradient' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {IconProp} from '@fortawesome/fontawesome-svg-core' +import {colors, gradients} from '../../lib/styles' +import * as zIndex from '../../lib/z-index' + +type OnPress = ((event: GestureResponderEvent) => void) | undefined +export function FAB({icon, onPress}: {icon: IconProp; onPress: OnPress}) { + return ( + + + + + + ) +} + +const styles = StyleSheet.create({ + outer: { + position: 'absolute', + zIndex: zIndex.FAB, + right: 20, + bottom: 20, + width: 50, + height: 50, + borderRadius: 25, + shadowColor: '#000', + shadowOpacity: 0.3, + shadowOffset: {width: 0, height: 1}, + }, + inner: { + width: 50, + height: 50, + borderRadius: 25, + justifyContent: 'center', + alignItems: 'center', + }, + icon: {}, +}) diff --git a/src/view/lib/z-index.ts b/src/view/lib/z-index.ts new file mode 100644 index 00000000..872027d3 --- /dev/null +++ b/src/view/lib/z-index.ts @@ -0,0 +1,2 @@ +export const FAB = 1 +export const BASE = 0 diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index a94ffd2f..1bc300a1 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -2,6 +2,7 @@ import React, {useState, useEffect, useLayoutEffect} from 'react' import {Image, StyleSheet, TouchableOpacity, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {Feed} from '../com/feed/Feed' +import {FAB} from '../com/util/FloatingActionButton' import {useStores} from '../../state' import {useLoadEffect} from '../lib/navigation' import {AVIS} from '../lib/assets' @@ -48,9 +49,14 @@ export function Home({params}: ScreenParams) { // }) // }, [navigation]) + const onComposePress = () => { + store.nav.navigate('/compose') + } + return ( + ) } diff --git a/todos.txt b/todos.txt index 65d1a7a8..bf08cd3a 100644 --- a/todos.txt +++ b/todos.txt @@ -16,4 +16,4 @@ Paul's todo list - Restore all functionality that was disabled during the refactor - Reduce extraneous triggers of useLoadEffect - Bugs - - Home screen goes white sometimes, not sure why \ No newline at end of file + - Home screen goes white sometimes, not sure why (possibly related to multiple active instances of the screen) \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index d3aba4c6..11875ffa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11326,6 +11326,11 @@ react-native-inappbrowser-reborn@^3.6.3: invariant "^2.2.4" opencollective-postinstall "^2.0.2" +react-native-linear-gradient@^2.6.2: + version "2.6.2" + resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.6.2.tgz#56598a76832724b2afa7889747635b5c80948f38" + integrity sha512-Z8Xxvupsex+9BBFoSYS87bilNPWcRfRsGC0cpJk72Nxb5p2nEkGSBv73xZbEHnW2mUFvP+huYxrVvjZkr/gRjQ== + react-native-progress@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/react-native-progress/-/react-native-progress-5.0.0.tgz#f5ac6ceaeee27f184c660b00f29419e82a9d0ab0"