zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

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

Browse source 
* add reanimated layout animations to modals

* reorder imports

* pass context to scroll handler patches
This commit is contained in:
Samuel Newman 2023-12-01 00:02:46 +00:00 • committed by GitHub
parent abe61b7517
commit 9375532698
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 35 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/view/shell/Composer.web.tsx
View file

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