fix: force bottom navigation animation completion

Author: chrisbarless

src/components/BottomNavigation/BottomNavigationBar.tsx

@@ -380,6 +380,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
    * Animation for the background color ripple, used to determine it's scale and opacity.
    */
   const rippleAnim = useAnimatedValue(MIN_RIPPLE_SCALE);
+  const targetIndexRef = React.useRef(navigationState.index);
 
   /**
    * Layout of the navigation bar. The width is used to determine the size and position of the ripple.
@@ -412,6 +413,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
 
   const animateToIndex = React.useCallback(
     (index: number) => {
+      targetIndexRef.current = index;
       // Reset the ripple to avoid glitch if it's currently animating
       rippleAnim.setValue(MIN_RIPPLE_SCALE);
 
@@ -429,13 +431,37 @@ 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));
+      ]).start((result) => {
+        if (targetIndexRef.current !== index) {
+          return;
+        }
+
+        // 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);
+        });
 
-        // Update the index to change bar's background color and then hide the ripple
+        indexAnim.stopAnimation();
         indexAnim.setValue(index);
+
+        rippleAnim.stopAnimation();
         rippleAnim.setValue(MIN_RIPPLE_SCALE);
+
+        if (result?.finished === false) {
+          requestAnimationFrame(() => {
+            if (targetIndexRef.current !== index) {
+              return;
+            }
+
+            tabsAnims.forEach((tab, i) => {
+              tab.stopAnimation();
+              tab.setValue(i === index ? 1 : 0);
+            });
+            indexAnim.setValue(index);
+            rippleAnim.setValue(MIN_RIPPLE_SCALE);
+          });
+        }
       });
     },
     [