diff --git a/packages/bottom-tabs/src/views/Badge.tsx b/packages/bottom-tabs/src/views/Badge.tsx
index db2f9107..a9baa37f 100644
--- a/packages/bottom-tabs/src/views/Badge.tsx
+++ b/packages/bottom-tabs/src/views/Badge.tsx
@@ -23,14 +23,14 @@ type Props = {
 };
 
 export default function Badge({
-  visible = true,
-  size = 18,
   children,
   style,
+  visible = true,
+  size = 18,
   ...rest
 }: Props) {
   const [opacity] = React.useState(() => new Animated.Value(visible ? 1 : 0));
-  const [rendered, setRendered] = React.useState(visible ? true : false);
+  const [rendered, setRendered] = React.useState(visible);
 
   const theme = useTheme();
 
@@ -52,12 +52,12 @@ export default function Badge({
     return () => opacity.stopAnimation();
   }, [opacity, rendered, visible]);
 
-  if (visible && !rendered) {
-    setRendered(true);
-  }
-
-  if (!visible && !rendered) {
-    return null;
+  if (!rendered) {
+    if (visible) {
+      setRendered(true);
+    } else {
+      return null;
+    }
   }
 
   // @ts-expect-error: backgroundColor definitely exists
@@ -73,7 +73,6 @@ export default function Badge({
       numberOfLines={1}
       style={[
         {
-          opacity,
           transform: [
             {
               scale: opacity.interpolate({
@@ -82,12 +81,13 @@ export default function Badge({
               }),
             },
           ],
-          backgroundColor,
           color: textColor,
-          fontSize,
           lineHeight: size - 1,
           height: size,
           minWidth: size,
+          opacity,
+          backgroundColor,
+          fontSize,
           borderRadius,
         },
         styles.container,