Fix layout shift when liking a post on Android (#10190)

src/components/PostControls/BookmarkButton.tsx

@@ -136,6 +136,8 @@ export const BookmarkButton = memo(function BookmarkButton({
     <PostControlButton
       testID="postBookmarkBtn"
       big={big}
+      active={isBookmarked}
+      activeColor={t.palette.primary_500}
       label={
         isBookmarked
           ? _(msg`Remove from saved posts`)
@@ -143,10 +145,7 @@ export const BookmarkButton = memo(function BookmarkButton({
       }
       onPress={onHandlePress}
       hitSlop={hitSlop}>
-      <PostControlButtonIcon
-        fill={isBookmarked ? t.palette.primary_500 : undefined}
-        icon={isBookmarked ? BookmarkFilled : Bookmark}
-      />
+      <PostControlButtonIcon icon={isBookmarked ? BookmarkFilled : Bookmark} />
     </PostControlButton>
   )
 })

src/components/PostControls/PostControlButton.tsx

@@ -130,8 +130,11 @@ export function PostControlButtonText({style, ...props}: TextProps) {
     <Text
       style={[
         color,
+        a.user_select_none,
         big ? a.text_md : a.text_sm,
         active && a.font_semi_bold,
+        // prevent layout shift on android
+        {includeFontPadding: false, textAlignVertical: 'center'},
         style,
       ]}
       {...props}

src/components/PostControls/index.tsx

@@ -24,7 +24,7 @@ import {
   ProgressGuideAction,
   useProgressGuideControls,
 } from '#/state/shell/progress-guide'
-import {atoms as a, useBreakpoints} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Reply as Bubble} from '#/components/icons/Reply'
 import {useFormatPostStatCount} from '#/components/PostControls/util'
 import * as Skele from '#/components/Skeleton'
@@ -74,6 +74,7 @@ let PostControls = ({
   forceGoogleTranslate?: boolean
 }): React.ReactNode => {
   const ax = useAnalytics()
+  const t = useTheme()
   const {t: l} = useLingui()
   const {openComposer} = useOpenComposer()
   const {feedDescriptor} = useFeedFeedbackContext()
@@ -270,6 +271,8 @@ let PostControls = ({
           <PostControlButton
             testID="likeBtn"
             big={big}
+            active={Boolean(post.viewer?.like)}
+            activeColor={t.palette.pink}
             onPress={() => requireAuth(() => onPressToggleLike())}
             label={
               post.viewer?.like
@@ -296,10 +299,14 @@ let PostControls = ({
               hasBeenToggled={hasLikeIconBeenToggled}
             />
             <CountWheel
-              likeCount={post.likeCount ?? 0}
-              big={big}
-              isLiked={Boolean(post.viewer?.like)}
+              count={post.likeCount ?? 0}
+              isToggled={Boolean(post.viewer?.like)}
               hasBeenToggled={hasLikeIconBeenToggled}
+              renderCount={({count}) => (
+                <PostControlButtonText>
+                  {formatPostStatCount(count)}
+                </PostControlButtonText>
+              )}
             />
           </PostControlButton>
         </View>