diff options
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts | 22 | ||||
| -rw-r--r-- | src/view/com/modals/Modal.web.tsx | 10 | ||||
| -rw-r--r-- | src/view/shell/Composer.web.tsx | 16 | ||||
| -rw-r--r-- | yarn.lock | 8 |
5 files changed, 35 insertions, 23 deletions
diff --git a/package.json b/package.json index 6c75054b5..31d9988db 100644 --- a/package.json +++ b/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", diff --git a/src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts b/src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts index 131e7bdd7..98e05a8ce 100644 --- a/src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts +++ b/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) } }, }, diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx index 74aa7b1a9..c39ba1f51 100644 --- a/src/view/com/modals/Modal.web.tsx +++ b/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> ) } 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> ) } diff --git a/yarn.lock b/yarn.lock index 9e75b3e4b..dafacd83c 100644 --- a/yarn.lock +++ b/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" |