From 7b061c35948609a1f7f3ef3cef8b5e5be964d4c2 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 2 Apr 2021 19:01:22 -0400
Subject: commented out all the old reanimated stuff, added TODOs for leon

---
 src/components/common/BottomDrawer.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

(limited to 'src/components/common/BottomDrawer.tsx')

diff --git a/src/components/common/BottomDrawer.tsx b/src/components/common/BottomDrawer.tsx
index bef9434a..173823b1 100644
--- a/src/components/common/BottomDrawer.tsx
+++ b/src/components/common/BottomDrawer.tsx
@@ -78,12 +78,13 @@ const BottomDrawer: React.FC<BottomDrawerProps> = (props) => {
         <Animated.View
           style={[
             styles.backgroundView,
-            {
-              backgroundColor: Animated.interpolateColors(bgAlpha, {
-                inputRange: [0, 1],
-                outputColorRange: ['rgba(0,0,0,0.3)', 'rgba(0,0,0,0)'],
-              }),
-            },
+            // TODO: (Leon) use reanimated v2
+            // {
+            //   backgroundColor: Animated.interpolateColors(bgAlpha, {
+            //     inputRange: [0, 1],
+            //     outputColorRange: ['rgba(0,0,0,0.3)', 'rgba(0,0,0,0)'],
+            //   }),
+            // },
           ]}
         />
       </TouchableWithoutFeedback>
-- 
cgit v1.2.3-70-g09d2


From 1cd94d9a012543683126094251b2e5562e2eea21 Mon Sep 17 00:00:00 2001
From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com>
Date: Sat, 3 Apr 2021 21:25:32 -0400
Subject: Fix bottom sheet animation

---
 src/components/common/BottomDrawer.tsx | 19 ++++++-------------
 src/routes/main/MainStackScreen.tsx    | 18 ++++++++----------
 2 files changed, 14 insertions(+), 23 deletions(-)

(limited to 'src/components/common/BottomDrawer.tsx')

diff --git a/src/components/common/BottomDrawer.tsx b/src/components/common/BottomDrawer.tsx
index 173823b1..988c1e79 100644
--- a/src/components/common/BottomDrawer.tsx
+++ b/src/components/common/BottomDrawer.tsx
@@ -6,7 +6,7 @@ import {
   View,
   ViewProps,
 } from 'react-native';
-import Animated from 'react-native-reanimated';
+import Animated, {interpolateColors} from 'react-native-reanimated';
 import BottomSheet from 'reanimated-bottom-sheet';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
@@ -50,6 +50,10 @@ const BottomDrawer: React.FC<BottomDrawerProps> = (props) => {
     );
   };
 
+  const backgroundColor = interpolateColors(bgAlpha, {
+    inputRange: [0, 1],
+    outputColorRange: ['rgba(0,0,0,0.3)', 'rgba(0,0,0,0)'],
+  });
   return (
     <Modal
       transparent
@@ -75,18 +79,7 @@ const BottomDrawer: React.FC<BottomDrawerProps> = (props) => {
         onPress={() => {
           setIsOpen(false);
         }}>
-        <Animated.View
-          style={[
-            styles.backgroundView,
-            // TODO: (Leon) use reanimated v2
-            // {
-            //   backgroundColor: Animated.interpolateColors(bgAlpha, {
-            //     inputRange: [0, 1],
-            //     outputColorRange: ['rgba(0,0,0,0.3)', 'rgba(0,0,0,0)'],
-            //   }),
-            // },
-          ]}
-        />
+        <Animated.View style={[styles.backgroundView, {backgroundColor}]} />
       </TouchableWithoutFeedback>
     </Modal>
   );
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index b72ab779..8068b893 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -98,11 +98,10 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
     cardOverlayEnabled: true,
     cardStyleInterpolator: ({current: {progress}}) => ({
       cardStyle: {
-        // TODO: (Leon) use reanimated v2
-        // opacity: progress.interpolate({
-        //   inputRange: [0, 0.5, 0.9, 1],
-        //   outputRange: [0, 0.25, 0.7, 1],
-        // }),
+        opacity: progress.interpolate({
+          inputRange: [0, 0.5, 0.9, 1],
+          outputRange: [0, 0.25, 0.7, 1],
+        }),
       },
     }),
   };
@@ -349,11 +348,10 @@ export const modalStyle: StackNavigationOptions = {
   cardOverlayEnabled: true,
   cardStyleInterpolator: ({current: {progress}}) => ({
     cardStyle: {
-      // TODO: (Leon) use reanimated v2
-      // opacity: progress.interpolate({
-      //   inputRange: [0, 0.5, 0.9, 1],
-      //   outputRange: [0, 0.25, 0.7, 1],
-      // }),
+      opacity: progress.interpolate({
+        inputRange: [0, 0.5, 0.9, 1],
+        outputRange: [0, 0.25, 0.7, 1],
+      }),
     },
   }),
 };
-- 
cgit v1.2.3-70-g09d2