Fix jump when toggling suggestions (#2090)

src/view/com/pager/PagerWithHeader.tsx

@@ -71,7 +71,8 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
       (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<PagerRef, PagerWithHeaderProps>(
       (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],

src/view/com/profile/ProfileHeader.tsx

@@ -620,11 +620,17 @@ let ProfileHeaderLoaded = ({
         <ProfileHeaderAlerts moderation={moderation} />
       </View>
 
-      {!isProfilePreview && (
+      {!isProfilePreview && showSuggestedFollows && (
         <ProfileHeaderSuggestedFollows
           actorDid={profile.did}
-          active={showSuggestedFollows}
-          requestDismiss={() => setShowSuggestedFollows(!showSuggestedFollows)}
+          requestDismiss={() => {
+            if (showSuggestedFollows) {
+              setShowSuggestedFollows(false)
+            } else {
+              track('ProfileHeader:SuggestedFollowsOpened')
+              setShowSuggestedFollows(true)
+            }
+          }}
         />
       )}
 

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,46 +28,19 @@ 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 (
-    <Animated.View
-      pointerEvents="box-none"
-      style={[{overflow: 'hidden', opacity: 0}, animatedStyles]}>
-      <View style={{paddingVertical: OUTER_PADDING}} pointerEvents="box-none">
+    <View
+      style={{paddingVertical: OUTER_PADDING, height: TOTAL_HEIGHT}}
+      pointerEvents="box-none">
       <View
         pointerEvents="box-none"
         style={{
@@ -139,7 +106,6 @@ export function ProfileHeaderSuggestedFollows({
         </ScrollView>
       </View>
     </View>
-    </Animated.View>
   )
 }