forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Remove layout animation from search (#3751)
+19
-40
+19
-40
src/view/screens/Search/Search.tsx
+19
-40
src/view/screens/Search/Search.tsx
···
7
7
TextInput,
8
8
View,
9
9
} from 'react-native'
10
-
import Animated, {
11
-
FadeIn,
12
-
FadeOut,
13
-
LinearTransition,
14
-
useAnimatedStyle,
15
-
withSpring,
16
-
} from 'react-native-reanimated'
17
10
import {AppBskyActorDefs, AppBskyFeedDefs, moderateProfile} from '@atproto/api'
18
11
import {
19
12
FontAwesomeIcon,
···
63
56
} from '#/view/shell/desktop/Search'
64
57
import {ProfileCardFeedLoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
65
58
import {atoms as a} from '#/alf'
66
-
const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
67
59
68
60
function Loader() {
69
61
const pal = usePalette('default')
···
624
616
)
625
617
}
626
618
627
-
const showClearButton = showAutocomplete && searchText.length > 0
628
-
const clearButtonStyle = useAnimatedStyle(() => ({
629
-
opacity: withSpring(showClearButton ? 1 : 0, {
630
-
overshootClamping: true,
631
-
duration: 50,
632
-
}),
633
-
}))
634
-
635
619
return (
636
620
<View style={isWeb ? null : {flex: 1}}>
637
621
<CenteredView
···
659
643
</Pressable>
660
644
)}
661
645
662
-
<AnimatedPressable
646
+
<Pressable
663
647
// This only exists only for extra hitslop so don't expose it to the a11y tree.
664
648
accessible={false}
665
649
focusable={false}
666
650
// @ts-ignore web-only
667
651
tabIndex={-1}
668
-
layout={isNative ? LinearTransition.duration(200) : undefined}
669
652
style={[
670
653
{backgroundColor: pal.colors.backgroundLight},
671
654
styles.headerSearchContainer,
···
718
701
autoComplete="off"
719
702
autoCapitalize="none"
720
703
/>
721
-
<AnimatedPressable
722
-
layout={isNative ? LinearTransition.duration(200) : undefined}
723
-
disabled={!showClearButton}
724
-
style={clearButtonStyle}
725
-
testID="searchTextInputClearBtn"
726
-
onPress={onPressClearQuery}
727
-
accessibilityRole="button"
728
-
accessibilityLabel={_(msg`Clear search query`)}
729
-
accessibilityHint=""
730
-
hitSlop={HITSLOP_10}>
731
-
<FontAwesomeIcon
732
-
icon="xmark"
733
-
size={16}
734
-
style={pal.textLight as FontAwesomeIconStyle}
735
-
/>
736
-
</AnimatedPressable>
737
-
</AnimatedPressable>
704
+
{showAutocomplete && searchText.length > 0 && (
705
+
<Pressable
706
+
testID="searchTextInputClearBtn"
707
+
onPress={onPressClearQuery}
708
+
accessibilityRole="button"
709
+
accessibilityLabel={_(msg`Clear search query`)}
710
+
accessibilityHint=""
711
+
hitSlop={HITSLOP_10}>
712
+
<FontAwesomeIcon
713
+
icon="xmark"
714
+
size={16}
715
+
style={pal.textLight as FontAwesomeIconStyle}
716
+
/>
717
+
</Pressable>
718
+
)}
719
+
</Pressable>
738
720
{showAutocomplete && (
739
721
<View style={[styles.headerCancelBtn]}>
740
-
<AnimatedPressable
741
-
entering={isNative ? FadeIn.duration(300) : undefined}
742
-
exiting={isNative ? FadeOut.duration(50) : undefined}
743
-
key="cancel"
722
+
<Pressable
744
723
onPress={onPressCancelSearch}
745
724
accessibilityRole="button"
746
725
hitSlop={HITSLOP_10}>
747
726
<Text style={pal.text}>
748
727
<Trans>Cancel</Trans>
749
728
</Text>
750
-
</AnimatedPressable>
729
+
</Pressable>
751
730
</View>
752
731
)}
753
732
</CenteredView>