From 72f46ed7349f5044d7b89fc8c7f5414b0805a67b Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 6 Jun 2024 06:28:02 -0700
Subject: [PATCH] cancel animations before updating value for min-shell
 animation (#4386)

* cancel animations before updating value

* comment
---
 src/state/shell/minimal-mode.tsx         | 4 +++-
 src/view/com/util/MainScrollProvider.tsx | 8 +++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/state/shell/minimal-mode.tsx b/src/state/shell/minimal-mode.tsx
index 05999db8..6e608daf 100644
--- a/src/state/shell/minimal-mode.tsx
+++ b/src/state/shell/minimal-mode.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {SharedValue, useSharedValue, withSpring} from 'react-native-reanimated'
+import {cancelAnimation, SharedValue, useSharedValue, withSpring} from 'react-native-reanimated'
 
 type StateContext = SharedValue<number>
 type SetContext = (v: boolean) => void
@@ -17,6 +17,8 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   const setMode = React.useCallback(
     (v: boolean) => {
       'worklet'
+      // Cancel any existing animation
+      cancelAnimation(mode)
       mode.value = withSpring(v ? 1 : 0, {
         overshootClamping: true,
       })
diff --git a/src/view/com/util/MainScrollProvider.tsx b/src/view/com/util/MainScrollProvider.tsx
index f45229dc..b602da43 100644
--- a/src/view/com/util/MainScrollProvider.tsx
+++ b/src/view/com/util/MainScrollProvider.tsx
@@ -1,6 +1,10 @@
 import React, {useCallback, useEffect} from 'react'
 import {NativeScrollEvent} from 'react-native'
-import {interpolate, useSharedValue} from 'react-native-reanimated'
+import {
+  cancelAnimation,
+  interpolate,
+  useSharedValue,
+} from 'react-native-reanimated'
 import EventEmitter from 'eventemitter3'
 
 import {ScrollProvider} from '#/lib/ScrollContext'
@@ -117,6 +121,8 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) {
         const newValue = clamp(startMode.value + dProgress, 0, 1)
         if (newValue !== mode.value) {
           // Manually adjust the value. This won't be (and shouldn't be) animated.
+          // Cancel any any existing animation
+          cancelAnimation(mode)
           mode.value = newValue
         }
       } else {