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
+49 -42
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,38 +849,41 @@ export function SearchScreen(
}), }),
]}> ]}>
<Layout.Center style={t.atoms.bg}> <Layout.Center style={t.atoms.bg}>
{!gtMobile && !showAutocomplete && ( <LayoutAnimationConfig skipEntering skipExiting>
<Animated.View {!gtMobile && !showAutocomplete && (
layout={native(FadingTransition)} <Animated.View
// HACK: shift up search input. we can't remove the top padding entering={FadeIn.delay(100).duration(200)}
// on the search input because it messes up the layout animation exiting={FadeOut.duration(200)}
// if we add it only when the header is hidden // HACK: shift up search input. we can't remove the top padding
style={{marginBottom: tokens.space.md * -1}}> // on the search input because it messes up the layout animation
<Layout.Header.Outer noBottomBorder> // if we add it only when the header is hidden
<Layout.Header.MenuButton /> style={{marginBottom: tokens.space.md * -1}}>
<Layout.Header.Content <Layout.Header.Outer noBottomBorder>
align={showFilters ? 'left' : 'platform'}> <Layout.Header.MenuButton />
<Layout.Header.TitleText> <Layout.Header.Content
<Trans>Search</Trans> align={showFilters ? 'left' : 'platform'}>
</Layout.Header.TitleText> <Layout.Header.TitleText>
</Layout.Header.Content> <Trans>Search</Trans>
{showFilters ? ( </Layout.Header.TitleText>
<View style={[{minWidth: 140}]}> </Layout.Header.Content>
<SearchLanguageDropdown {showFilters ? (
value={params.lang} <View style={[{minWidth: 140}]}>
onChange={params.setLang} <SearchLanguageDropdown
/> value={params.lang}
</View> onChange={params.setLang}
) : ( />
<Layout.Header.Slot /> </View>
)} ) : (
</Layout.Header.Outer> <Layout.Header.Slot />
</Animated.View> )}
)} </Layout.Header.Outer>
</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,18 +897,20 @@ export function SearchScreen(
/> />
</View> </View>
{showAutocomplete && ( {showAutocomplete && (
<Button <Animated.View entering={FadeIn} exiting={FadeOut}>
label={_(msg`Cancel search`)} <Button
size="large" label={_(msg`Cancel search`)}
variant="ghost" size="large"
color="secondary" variant="ghost"
style={[a.px_sm]} color="secondary"
onPress={onPressCancelSearch} style={[a.px_sm]}
hitSlop={HITSLOP_10}> onPress={onPressCancelSearch}
<ButtonText> hitSlop={HITSLOP_10}>
<Trans>Cancel</Trans> <ButtonText>
</ButtonText> <Trans>Cancel</Trans>
</Button> </ButtonText>
</Button>
</Animated.View>
)} )}
</View> </View>