fix: force bottom navigation animation completion

Author: chrisbarless

src/components/BottomNavigation/BottomNavigationBar.tsx

@@ -429,13 +429,26 @@ const BottomNavigationBar = <Route extends BaseRoute>({
             easing: animationEasing,
           })
         ),
-      ]).start(() => {
-        // Workaround a bug in native animations where this is reset after first animation
-        tabsAnims.map((tab, i) => tab.setValue(i === index ? 1 : 0));
-
-        // Update the index to change bar's background color and then hide the ripple
+      ]).start((result) => {
+        // Explicitly finish animation state to avoid RN 0.80 drops leaving tabs half-focused
+        tabsAnims.forEach((tab, i) => {
+          tab.stopAnimation();
+          tab.setValue(i === index ? 1 : 0);
+        });
+
+        indexAnim.stopAnimation();
         indexAnim.setValue(index);
+
+        rippleAnim.stopAnimation();
         rippleAnim.setValue(MIN_RIPPLE_SCALE);
+
+        if (result?.finished === false) {
+          requestAnimationFrame(() => {
+            tabsAnims.forEach((tab, i) => tab.setValue(i === index ? 1 : 0));
+            indexAnim.setValue(index);
+            rippleAnim.setValue(MIN_RIPPLE_SCALE);
+          });
+        }
       });
     },
     [