Add enter/exit animations to modals on web (#2042)

* add reanimated layout animations to modals

* reorder imports

* pass context to scroll handler patches

1 files changed, 12 insertions, 4 deletions

diff --git a/src/view/shell/Composer.web.tsx b/src/view/shell/Composer.web.tsx
index e08c792a4..d8f4648fe 100644
--- a/src/view/shell/Composer.web.tsx
+++ b/src/view/shell/Composer.web.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
+import Animated, {FadeIn, FadeInDown, FadeOut} from 'react-native-reanimated'
 import {ComposePost} from '../com/composer/Composer'
 import {useComposerState} from 'state/shell/composer'
 import {usePalette} from 'lib/hooks/usePalette'
@@ -20,8 +21,15 @@ export function Composer({}: {winHeight: number}) {
   }
 
   return (
-    <View style={styles.mask} aria-modal accessibilityViewIsModal>
-      <View
+    <Animated.View
+      style={styles.mask}
+      aria-modal
+      accessibilityViewIsModal
+      entering={FadeIn.duration(150)}
+      exiting={FadeOut}>
+      <Animated.View
+        entering={FadeInDown.duration(200)}
+        exiting={FadeOut}
         style={[
           styles.container,
           isMobile && styles.containerMobile,
@@ -34,8 +42,8 @@ export function Composer({}: {winHeight: number}) {
           onPost={state.onPost}
           mention={state.mention}
         />
-      </View>
-    </View>
+      </Animated.View>
+    </Animated.View>
   )
 }