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 ? (
+        <View style={[a.justify_center]}>
           <Animated.View
             entering={enteringAnimation}
             key={key}
@@ -154,10 +153,9 @@ export function CountWheel({
               {formattedCount}
             </Text>
           </Animated.View>
-        ) : null}
-        {/* Add 2 to the key so there are never duplicates */}
           <Animated.View
             entering={exitingAnimation}
+            // Add 2 to the key so there are never duplicates
             key={key + 2}
             style={[a.absolute]}
             aria-disabled={true}>
@@ -173,6 +171,7 @@ export function CountWheel({
             </Text>
           </Animated.View>
         </View>
+      ) : null}
     </LayoutAnimationConfig>
   )
 }