acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

animate header properly

Browse Source
This commit is contained in:
Samuel Newman
2025-01-28 11:10:44 -08:00
parent c21d83e85e
commit f54905454f
1 changed files with 49 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/screens/Search/Search.tsx
+10 -3
View File
@@ -12,7 +12,9 @@ import {
import {ScrollView as RNGHScrollView} from 'react-native-gesture-handler' import {ScrollView as RNGHScrollView} from 'react-native-gesture-handler'
import RNPickerSelect from 'react-native-picker-select' import RNPickerSelect from 'react-native-picker-select'
import Animated, { import Animated, {
FadingTransition, FadeIn,
FadeOut,
LayoutAnimationConfig,
LinearTransition, LinearTransition,
} from 'react-native-reanimated' } from 'react-native-reanimated'
import {AppBskyActorDefs, AppBskyFeedDefs, moderateProfile} from '@atproto/api' import {AppBskyActorDefs, AppBskyFeedDefs, moderateProfile} from '@atproto/api'
@@ -847,9 +849,11 @@ export function SearchScreen(
}), }),
]}> ]}>
<Layout.Center style={t.atoms.bg}> <Layout.Center style={t.atoms.bg}>
<LayoutAnimationConfig skipEntering skipExiting>
{!gtMobile && !showAutocomplete && ( {!gtMobile && !showAutocomplete && (
<Animated.View <Animated.View
layout={native(FadingTransition)} entering={FadeIn.delay(100).duration(200)}
exiting={FadeOut.duration(200)}
// HACK: shift up search input. we can't remove the top padding // HACK: shift up search input. we can't remove the top padding
// on the search input because it messes up the layout animation // on the search input because it messes up the layout animation
// if we add it only when the header is hidden // if we add it only when the header is hidden
@@ -875,10 +879,11 @@ export function SearchScreen(
</Layout.Header.Outer> </Layout.Header.Outer>
</Animated.View> </Animated.View>
)} )}
</LayoutAnimationConfig>
<Animated.View <Animated.View
style={[a.px_md, a.pt_md, a.pb_sm, a.gap_sm]} style={[a.px_md, a.pt_md, a.pb_sm, a.gap_sm]}
layout={native(LinearTransition)}> layout={native(LinearTransition)}>
<View style={[a.flex_row, a.gap_sm]}> <View style={[a.flex_row, a.gap_xs]}>
<View style={[a.flex_1]}> <View style={[a.flex_1]}>
<SearchInput <SearchInput
ref={textInput} ref={textInput}
@@ -892,6 +897,7 @@ export function SearchScreen(
/> />
</View> </View>
{showAutocomplete && ( {showAutocomplete && (
<Animated.View entering={FadeIn} exiting={FadeOut}>
<Button <Button
label={_(msg`Cancel search`)} label={_(msg`Cancel search`)}
size="large" size="large"
@@ -904,6 +910,7 @@ export function SearchScreen(
<Trans>Cancel</Trans> <Trans>Cancel</Trans>
</ButtonText> </ButtonText>
</Button> </Button>
</Animated.View>
)} )}
</View> </View>