dont render 0

src/lib/custom-animations/CountWheel.tsx

@@ -106,6 +106,8 @@ export function CountWheel({
   const [key, setKey] = React.useState(0)
   const [prevCount, setPrevCount] = React.useState(likeCount)
   const prevIsLiked = React.useRef(isLiked)
+  const formattedCount = formatCount(likeCount)
+  const formattedPrevCount = formatCount(prevCount)
 
   React.useEffect(() => {
     if (isLiked === prevIsLiked.current) {
@@ -118,9 +120,6 @@ export function CountWheel({
     prevIsLiked.current = isLiked
   }, [isLiked, likeCount])
 
-  const formattedCount = formatCount(likeCount)
-  const formattedPrevCount = formatCount(prevCount)
-
   const enteringAnimation =
     shouldAnimate && shouldRoll
       ? isLiked
@@ -136,8 +135,8 @@ export function CountWheel({
 
   return (
     <LayoutAnimationConfig skipEntering skipExiting>
-      <View style={[a.justify_center]}>
+      {likeCount > 0 ? (
-        {likeCount > 0 ? (
+        <View style={[a.justify_center]}>
           <Animated.View
             entering={enteringAnimation}
             key={key}
@@ -154,25 +153,25 @@ export function CountWheel({
               {formattedCount}
             </Text>
           </Animated.View>
-        ) : null}
+          <Animated.View
-        {/* Add 2 to the key so there are never duplicates */}
+            entering={exitingAnimation}
-        <Animated.View
+            // Add 2 to the key so there are never duplicates
-          entering={exitingAnimation}
+            key={key + 2}
-          key={key + 2}
+            style={[a.absolute]}
-          style={[a.absolute]}
+            aria-disabled={true}>
-          aria-disabled={true}>
+            <Text
-          <Text
+              style={[
-            style={[
+                big ? a.text_md : {fontSize: 15},
-              big ? a.text_md : {fontSize: 15},
+                a.user_select_none,
-              a.user_select_none,
+                isLiked
-              isLiked
+                  ? [a.font_bold, s.likeColor]
-                ? [a.font_bold, s.likeColor]
+                  : {color: t.palette.contrast_500},
-                : {color: t.palette.contrast_500},
+              ]}>
-            ]}>
+              {formattedPrevCount}
-            {formattedPrevCount}
+            </Text>
-          </Text>
+          </Animated.View>
-        </Animated.View>
+        </View>
-      </View>
+      ) : null}
     </LayoutAnimationConfig>
   )
 }