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

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>