diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx index dcfc1eeb..22e2d86b 100644 --- a/src/view/com/pager/PagerWithHeader.tsx +++ b/src/view/com/pager/PagerWithHeader.tsx @@ -71,7 +71,8 @@ export const PagerWithHeader = React.forwardRef( (evt: LayoutChangeEvent) => { const height = evt.nativeEvent.layout.height if (height > 0) { - setTabBarHeight(height) + // The rounding is necessary to prevent jumps on iOS + setTabBarHeight(Math.round(height)) } }, [setTabBarHeight], @@ -80,7 +81,8 @@ export const PagerWithHeader = React.forwardRef( (evt: LayoutChangeEvent) => { const height = evt.nativeEvent.layout.height if (height > 0) { - setHeaderOnlyHeight(height) + // The rounding is necessary to prevent jumps on iOS + setHeaderOnlyHeight(Math.round(height)) } }, [setHeaderOnlyHeight], diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx index 16e98ddf..39e3e42e 100644 --- a/src/view/com/profile/ProfileHeader.tsx +++ b/src/view/com/profile/ProfileHeader.tsx @@ -620,11 +620,17 @@ let ProfileHeaderLoaded = ({ - {!isProfilePreview && ( + {!isProfilePreview && showSuggestedFollows && ( setShowSuggestedFollows(!showSuggestedFollows)} + requestDismiss={() => { + if (showSuggestedFollows) { + setShowSuggestedFollows(false) + } else { + track('ProfileHeader:SuggestedFollowsOpened') + setShowSuggestedFollows(true) + } + }} /> )} diff --git a/src/view/com/profile/ProfileHeaderSuggestedFollows.tsx b/src/view/com/profile/ProfileHeaderSuggestedFollows.tsx index 1d550aa5..ce5cf92c 100644 --- a/src/view/com/profile/ProfileHeaderSuggestedFollows.tsx +++ b/src/view/com/profile/ProfileHeaderSuggestedFollows.tsx @@ -1,11 +1,5 @@ import React from 'react' import {View, StyleSheet, Pressable, ScrollView} from 'react-native' -import Animated, { - useSharedValue, - withTiming, - useAnimatedStyle, - Easing, -} from 'react-native-reanimated' import {AppBskyActorDefs, moderateProfile} from '@atproto/api' import { FontAwesomeIcon, @@ -34,112 +28,84 @@ const TOTAL_HEIGHT = 250 export function ProfileHeaderSuggestedFollows({ actorDid, - active, requestDismiss, }: { actorDid: string - active: boolean requestDismiss: () => void }) { - const {track} = useAnalytics() const pal = usePalette('default') - const animatedHeight = useSharedValue(0) - const animatedStyles = useAnimatedStyle(() => ({ - opacity: animatedHeight.value / TOTAL_HEIGHT, - height: animatedHeight.value, - })) - - React.useEffect(() => { - if (active) { - track('ProfileHeader:SuggestedFollowsOpened') - - animatedHeight.value = withTiming(TOTAL_HEIGHT, { - duration: 500, - easing: Easing.inOut(Easing.exp), - }) - } else { - animatedHeight.value = withTiming(0, { - duration: 500, - easing: Easing.inOut(Easing.exp), - }) - } - }, [active, animatedHeight, track]) - const {isLoading, data} = useSuggestedFollowsByActorQuery({ did: actorDid, }) - return ( - - + + - - - Suggested for you - + + Suggested for you + - - - - - - - {isLoading ? ( - <> - - - - - - - - ) : data ? ( - data.suggestions.map(profile => ( - - )) - ) : ( - - )} - + + + + + + {isLoading ? ( + <> + + + + + + + + ) : data ? ( + data.suggestions.map(profile => ( + + )) + ) : ( + + )} + - + ) }