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

* add reanimated layout animations to modals

* reorder imports

* pass context to scroll handler patches

package.json

@@ -144,7 +144,7 @@
     "react-native-pager-view": "6.1.4",
     "react-native-picker-select": "^8.1.0",
     "react-native-progress": "bluesky-social/react-native-progress",
-    "react-native-reanimated": "^3.4.2",
+    "react-native-reanimated": "^3.6.0",
     "react-native-root-siblings": "^4.1.1",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",

src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts

@@ -11,31 +11,31 @@ export const useAnimatedScrollHandler: typeof useAnimatedScrollHandler_BUGGY = (
   })
   return useAnimatedScrollHandler_BUGGY(
     {
-      onBeginDrag(e) {
+      onBeginDrag(e, ctx) {
         if (typeof ref.current !== 'function' && ref.current.onBeginDrag) {
-          ref.current.onBeginDrag(e)
+          ref.current.onBeginDrag(e, ctx)
         }
       },
-      onEndDrag(e) {
+      onEndDrag(e, ctx) {
         if (typeof ref.current !== 'function' && ref.current.onEndDrag) {
-          ref.current.onEndDrag(e)
+          ref.current.onEndDrag(e, ctx)
         }
       },
-      onMomentumBegin(e) {
+      onMomentumBegin(e, ctx) {
         if (typeof ref.current !== 'function' && ref.current.onMomentumBegin) {
-          ref.current.onMomentumBegin(e)
+          ref.current.onMomentumBegin(e, ctx)
         }
       },
-      onMomentumEnd(e) {
+      onMomentumEnd(e, ctx) {
         if (typeof ref.current !== 'function' && ref.current.onMomentumEnd) {
-          ref.current.onMomentumEnd(e)
+          ref.current.onMomentumEnd(e, ctx)
         }
       },
-      onScroll(e) {
+      onScroll(e, ctx) {
         if (typeof ref.current === 'function') {
-          ref.current(e)
+          ref.current(e, ctx)
         } else if (ref.current.onScroll) {
-          ref.current.onScroll(e)
+          ref.current.onScroll(e, ctx)
         }
       },
     },

src/view/com/modals/Modal.web.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import {TouchableWithoutFeedback, StyleSheet, View} from 'react-native'
+import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import type {Modal as ModalIface} from '#/state/modals'
 
 import {useModals, useModalControls} from '#/state/modals'
+import type {Modal as ModalIface} from '#/state/modals'
 import * as ConfirmModal from './Confirm'
 import * as EditProfileModal from './EditProfile'
 import * as ProfilePreviewModal from './ProfilePreview'
@@ -129,7 +130,10 @@ function Modal({modal}: {modal: ModalIface}) {
   return (
     // eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors
     <TouchableWithoutFeedback onPress={onPressMask}>
-      <View style={styles.mask}>
+      <Animated.View
+        style={styles.mask}
+        entering={FadeIn.duration(150)}
+        exiting={FadeOut}>
         {/* eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors */}
         <TouchableWithoutFeedback onPress={onInnerPress}>
           <View
@@ -142,7 +146,7 @@ function Modal({modal}: {modal: ModalIface}) {
             {element}
           </View>
         </TouchableWithoutFeedback>
-      </View>
+      </Animated.View>
     </TouchableWithoutFeedback>
   )
 }

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>
   )
 }
 

yarn.lock

@@ -16444,10 +16444,10 @@ react-native-progress@bluesky-social/react-native-progress:
   dependencies:
     prop-types "^15.7.2"
 
-react-native-reanimated@^3.4.2:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.4.2.tgz#744154fead6d8d31d5bd9ac617d8c84d74a6f697"
-  integrity sha512-FbtG+f1PB005vDTJSv4zAnTK7nNXi+FjFgbAM5gOzIZDajfph2BFMSUstzIsN8T77+OKuugUBmcTqLnQ24EBVg==
+react-native-reanimated@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.6.0.tgz#d2ca5f4c234f592af3d63bc749806e36d6e0a755"
+  integrity sha512-eDdhZTRYofrIqFB/Z5xLTWxcB7wDj4ifrNm+gZ2xHSZPjAQ747ukDdH9rglPyPmi+GcmDH7Wff411Xsw5fm45Q==
   dependencies:
     "@babel/plugin-transform-object-assign" "^7.16.7"
     "@babel/preset-typescript" "^7.16.7"