about summary refs log tree commit diff
path: root/src/view/com/lightbox/ImageViewing/hooks/useAnimatedComponents.ts
diff options
context:
space:
mode:
authorAryan Goharzad <arrygoo@gmail.com>2023-01-25 18:25:34 -0500
committerGitHub <noreply@github.com>2023-01-25 17:25:34 -0600
commiteb33c3fa812cc087db14a6b6ba743e982b26c462 (patch)
treed098f7a804c67755f39e95bbbfd56887bacf476c /src/view/com/lightbox/ImageViewing/hooks/useAnimatedComponents.ts
parentadf328b50ce98c5ebd3282fe897ddfdcd0de8011 (diff)
downloadvoidsky-eb33c3fa812cc087db14a6b6ba743e982b26c462.tar.zst
Saves image on long press (#83)
* Saves image on long press

* Adds save on long press

* Forking lightbox

* move to wrapper only to the bottom sheet to reduce impact of this change

* lint

* lint

* lint

* Use official `share` API

* Clean up cache after download

* comment

* comment

* Reduce swipe close velocity

* Updates per feedback

* lint

* bugfix

* Adds delayed press-in for TouchableOpacity
Diffstat (limited to 'src/view/com/lightbox/ImageViewing/hooks/useAnimatedComponents.ts')
-rw-r--r--src/view/com/lightbox/ImageViewing/hooks/useAnimatedComponents.ts47
1 files changed, 47 insertions, 0 deletions
diff --git a/src/view/com/lightbox/ImageViewing/hooks/useAnimatedComponents.ts b/src/view/com/lightbox/ImageViewing/hooks/useAnimatedComponents.ts
new file mode 100644
index 000000000..c21cd7f2c
--- /dev/null
+++ b/src/view/com/lightbox/ImageViewing/hooks/useAnimatedComponents.ts
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {Animated} from 'react-native'
+
+const INITIAL_POSITION = {x: 0, y: 0}
+const ANIMATION_CONFIG = {
+  duration: 200,
+  useNativeDriver: true,
+}
+
+const useAnimatedComponents = () => {
+  const headerTranslate = new Animated.ValueXY(INITIAL_POSITION)
+  const footerTranslate = new Animated.ValueXY(INITIAL_POSITION)
+
+  const toggleVisible = (isVisible: boolean) => {
+    if (isVisible) {
+      Animated.parallel([
+        Animated.timing(headerTranslate.y, {...ANIMATION_CONFIG, toValue: 0}),
+        Animated.timing(footerTranslate.y, {...ANIMATION_CONFIG, toValue: 0}),
+      ]).start()
+    } else {
+      Animated.parallel([
+        Animated.timing(headerTranslate.y, {
+          ...ANIMATION_CONFIG,
+          toValue: -300,
+        }),
+        Animated.timing(footerTranslate.y, {
+          ...ANIMATION_CONFIG,
+          toValue: 300,
+        }),
+      ]).start()
+    }
+  }
+
+  const headerTransform = headerTranslate.getTranslateTransform()
+  const footerTransform = footerTranslate.getTranslateTransform()
+
+  return [headerTransform, footerTransform, toggleVisible] as const
+}
+
+export default useAnimatedComponents