@fountain-ui/core 2.0.0-beta.10 → 2.0.0-beta.13

package/src/CircularProgress/CircularProgress.tsx

@@ -1,20 +1,18 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ViewProps } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import Animated, {
-    Easing,
-    interpolate,
-    useAnimatedStyle,
-    useSharedValue,
-    withRepeat,
-    withTiming,
-} from 'react-native-reanimated';
+import type { WithTimingConfig } from 'react-native-reanimated';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
 import { CircularProgress as CircularProgressIcon } from '../internal/icons';
-import { css } from '../styles';
 import { OverridableComponentProps } from '../types';
 
 type CircularProgressStyles = NamedStylesStringUnion<'root'>;
 
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 900, easing: Easing.linear };
+
+const MIN_ROTATE_DEGREE = 0;
+const MAX_ROTATE_DEGREE = 360;
+
 const useStyles: UseStyles<CircularProgressStyles> = function (): CircularProgressStyles {
     return {
         root: {
@@ -25,36 +23,32 @@ const useStyles: UseStyles<CircularProgressStyles> = function (): CircularProgre
 };
 
 export default function CircularProgress(props: OverridableComponentProps<ViewProps>) {
-    const { style } = props;
+    const { style: styleProp } = props;
 
     const styles = useStyles();
 
-    const rootStyle = css([
-        styles.root,
-        style,
-    ]);
-
-    const sharedSpin = useSharedValue(0);
-
-    const spinStyle = useAnimatedStyle(() => {
-        const interpolatedSpin = interpolate(sharedSpin.value, [0, 1], [0, 360]);
+    const rotate = useSharedValue(MIN_ROTATE_DEGREE);
 
-        return {
-            transform: [{ rotate: `${interpolatedSpin}deg` }],
-        };
-    });
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ rotate: `${rotate.value}deg` }],
+    }), []);
 
-    React.useEffect(() => {
-        sharedSpin.value = withRepeat(
-            withTiming(1, { duration: 900, easing: Easing.linear }),
+    useEffect(() => {
+        rotate.value = withRepeat(
+            withTiming(MAX_ROTATE_DEGREE, ANIMATION_CONFIG),
             -1,
             false,
         );
     }, []);
 
     return (
-        <Animated.View style={[spinStyle, rootStyle]}>
-            <CircularProgressIcon/>
-        </Animated.View>
+        <Animated.View
+            children={<CircularProgressIcon/>}
+            style={[
+                animatedStyle,
+                styles.root,
+                styleProp,
+            ]}
+        />
     );
 };

package/src/ImageCore/ImageCoreNative.tsx

@@ -1,13 +1,15 @@
-import React from 'react';
-import type { WithTimingConfig } from 'react-native-reanimated';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import React, { useCallback, useRef } from 'react';
+import { Animated } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import type ImageCoreProps from './ImageCoreProps';
 
 // @ts-ignore
 const AnimatedFastImage = Animated.createAnimatedComponent(FastImage);
 
-const animationConfig: WithTimingConfig = { duration: 150 };
+const INITIAL_OPACITY = 0;
+const LOADED_OPACITY = 1;
+
+const ANIMATION_DURATION = 200;
 
 export default function ImageCore(props: ImageCoreProps) {
     const {
@@ -19,21 +21,17 @@ export default function ImageCore(props: ImageCoreProps) {
         width,
     } = props;
 
-    const style = { width, height };
-
-    const opacity = useSharedValue(0);
-
-    const animatedStyle = useAnimatedStyle(() => ({
-        opacity: opacity.value,
-    }));
+    const opacity = useRef<Animated.Value>(new Animated.Value(INITIAL_OPACITY)).current;
 
-    const handleLoad = () => {
-        opacity.value = withTiming(1, animationConfig);
+    const handleLoad = useCallback(() => {
+        Animated.timing(opacity, {
+            toValue: LOADED_OPACITY,
+            duration: ANIMATION_DURATION,
+            useNativeDriver: true,
+        }).start();
 
-        if (onLoad) {
-            onLoad();
-        }
-    };
+        onLoad?.();
+    }, [onLoad]);
 
     return (
         <AnimatedFastImage
@@ -42,8 +40,8 @@ export default function ImageCore(props: ImageCoreProps) {
             resizeMode={resizeMode}
             source={{ uri: source.uri }}
             style={[
-                animatedStyle,
-                style,
+                { opacity },
+                { width, height },
             ]}
         />
     );

package/src/Slide/Slide.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { useWindowDimensions } from 'react-native';
+import React, { useEffect } from 'react';
+import { Dimensions } from 'react-native';
 import type { WithTimingConfig } from 'react-native-reanimated';
 import Animated, { Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import type SlideProps from './SlideProps';
@@ -7,6 +7,8 @@ import type SlideProps from './SlideProps';
 const defaultEnterDuration = 300;
 const defaultExitDuration = 300;
 
+const getDisappearingOffsetY = (): number => Dimensions.get('window').height;
+
 export default function Slide(props: SlideProps) {
     const {
         animatedY: animatedYProp,
@@ -21,38 +23,38 @@ export default function Slide(props: SlideProps) {
         ...otherProps
     } = props;
 
-    const window = useWindowDimensions();
-
-    const y = useSharedValue(window.height);
+    const y = useSharedValue(getDisappearingOffsetY());
     const animatedY = animatedYProp || y;
 
     const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ translateY: animatedY.value }],
-    }));
+    }), []);
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (appear) {
-            const enterConfig: WithTimingConfig = {
+            onEnter?.();
+
+            const toValue = 0;
+            const enterConfig: Readonly<WithTimingConfig> = {
                 duration: enterDuration,
                 easing: Easing.out(Easing.exp),
             };
 
-            onEnter?.();
-
-            animatedY.value = withTiming(0, enterConfig, isFinished => {
+            animatedY.value = withTiming(toValue, enterConfig, isFinished => {
                 if (isFinished && onEntered) {
                     runOnJS(onEntered)();
                 }
             });
         } else {
-            const exitConfig: WithTimingConfig = {
+            onExit?.();
+
+            const toValue = getDisappearingOffsetY();
+            const exitConfig: Readonly<WithTimingConfig> = {
                 duration: exitDuration,
                 easing: Easing.in(Easing.ease),
             };
 
-            onExit?.();
-
-            animatedY.value = withTiming(window.height, exitConfig, isFinished => {
+            animatedY.value = withTiming(toValue, exitConfig, isFinished => {
                 if (isFinished && onExited) {
                     runOnJS(onExited)();
                 }

package/src/Tabs/TabIndicator.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Animated, { useAnimatedStyle, useDerivedValue } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { useTheme } from '../styles';
 import type TabIndicatorProps from './TabIndicatorProps';
@@ -35,8 +35,9 @@ export default function TabIndicator(props: TabIndicatorProps) {
 
     const styles = useStyles();
 
-    const layout = useDerivedValue(() => {
+    const animatedStyle = useAnimatedStyle(() => {
         const rawScrollValue = scrollValue.value;
+
         const index = Math.floor(rawScrollValue);
         const offset = rawScrollValue % 1;
 
@@ -53,12 +54,7 @@ export default function TabIndicator(props: TabIndicatorProps) {
             left: x1 + leftInset,
             width: Math.max(x2 - x1 - rightInset, 0),
         };
-    });
-
-    const animatedStyle = useAnimatedStyle(() => ({
-        left: layout.value.left,
-        width: layout.value.width,
-    }));
+    }, [coordinates, scrollable]);
 
     return (
         <Animated.View

package/src/Tabs/Tabs.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import React, { cloneElement, useEffect, useMemo, useRef } from 'react';
 import { GestureResponderEvent, LayoutChangeEvent, ScrollView, View } from 'react-native';
+import type { WithTimingConfig } from 'react-native-reanimated';
 import { Easing, useSharedValue, withTiming } from 'react-native-reanimated';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { isEveryDefined } from '@fountain-ui/utils';
 import { css, useTheme } from '../styles';
-import { useWidth } from '../internal/hooks';
 import type TabsProps from './TabsProps';
-import TabCoordinate, { defaultCoordinate } from './TabCoordinate';
 import TabIndicator from './TabIndicator';
+import useTabsWidth from './useTabsWidth';
+import useTabCoordinates from './useTabCoordinates';
 
 type TabsStyleKeys =
     | 'root'
@@ -34,6 +34,11 @@ const useStyles: UseStyles<TabsStyles> = function (): TabsStyles {
     };
 };
 
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = {
+    duration: 200,
+    easing: Easing.out(Easing.exp),
+};
+
 export default function Tabs(props: TabsProps) {
     const {
         children,
@@ -51,56 +56,49 @@ export default function Tabs(props: TabsProps) {
 
     const styles = useStyles();
 
-    const [containerWidth, handleLayout] = useWidth();
+    const [containerWidth, handleLayout] = useTabsWidth();
 
-    const scrollViewRef = React.useRef<ScrollView | null>(null);
+    const scrollViewRef = useRef<ScrollView | null>(null);
 
-    const tabCount = React.Children.count(children);
-    const [coordinates, setCoordinates] = React.useState<TabCoordinate[]>(() => new Array(tabCount));
+    const { coordinates, updateCoordinate } = useTabCoordinates(children);
 
     const internalScrollValue = useSharedValue(0);
-    const scrollValue = scrollValueProp || internalScrollValue;
+    const scrollValue = scrollValueProp ?? internalScrollValue;
 
-    const isReadyToRenderIndicator = isEveryDefined(coordinates);
+    const isReadyToRenderIndicator = coordinates.length > 0;
 
-    React.useEffect(() => {
+    useEffect(() => {
         const animateTab = (index: number) => {
-            internalScrollValue.value = withTiming(index, {
-                duration: 200,
-                easing: Easing.out(Easing.exp),
-            });
+            scrollValue.value = withTiming(index, ANIMATION_CONFIG);
         };
 
-        if (scrollValueProp === undefined) {
-            animateTab(indexProp);
-        }
-    }, [indexProp, scrollValueProp, internalScrollValue]);
+        animateTab(indexProp);
+    }, [indexProp, scrollValue]);
+
+    const scrollPosition = useMemo<number>(() => {
+        const coordinate = coordinates[indexProp - 1];
 
-    React.useEffect(() => {
-        const snapTab = (index: number) => {
-            const scrollView = scrollViewRef.current;
-            const coordinate: TabCoordinate = coordinates[index - 1] || defaultCoordinate;
+        if (coordinate) {
+            const tabWidth = coordinate.x2 - coordinate.x1;
+            return Math.floor(coordinate.x1 + tabWidth / 2);
+        }
 
-            if (scrollView) {
-                const tabWidth = coordinate.x2 - coordinate.x1;
-                const x = coordinate.x1 + tabWidth / 2;
+        return 0;
+    }, [indexProp, coordinates]);
 
-                scrollView.scrollTo({ x, y: 0, animated: true });
-            }
-        };
+    useEffect(() => {
+        const scrollView = scrollViewRef.current;
 
-        snapTab(indexProp);
-    }, [indexProp, containerWidth, coordinates]);
+        if (scrollView) {
+            scrollView.scrollTo({ x: scrollPosition, y: 0, animated: true });
+        }
+    }, [scrollPosition, containerWidth]);
 
     const tabElements = React.Children.map(children, (child, index) => {
         const onLayout = (event: LayoutChangeEvent) => {
             const { x, width } = event.nativeEvent.layout;
 
-            setCoordinates(prev => ([
-                ...prev.slice(0, index),
-                { x1: x, x2: x + width },
-                ...prev.slice(index + 1),
-            ]));
+            updateCoordinate(index, x, width);
         };
 
         const onMouseDown = (e: GestureResponderEvent) => {
@@ -121,7 +119,7 @@ export default function Tabs(props: TabsProps) {
             : (isReadyToRenderIndicator ? false : selected);
 
         //@ts-ignore
-        return React.cloneElement(child, {
+        return cloneElement(child, {
             enableIndicator: enableIndicatorPlaceholder,
             onLayout,
             onPress,
@@ -169,10 +167,10 @@ export default function Tabs(props: TabsProps) {
                     {indicator}
                 </ScrollView>
             ) : (
-                <>
+                <React.Fragment>
                     {tabElements}
                     {indicator}
-                </>
+                </React.Fragment>
             )}
         </View>
     );

package/src/Tabs/useTabCoordinates.ts

@@ -0,0 +1,36 @@
+import React, { useRef, useState } from 'react';
+import { isEveryDefined } from '@fountain-ui/utils';
+import TabCoordinate from './TabCoordinate';
+
+export interface UseTabCoordinates {
+    coordinates: TabCoordinate[];
+    updateCoordinate: (index: number, x: number, width: number) => void;
+}
+
+export default function useTabCoordinates(tabElements: React.ReactNode): UseTabCoordinates {
+    const incompleteCoordinatesRef = useRef<TabCoordinate[]>([]);
+
+    const [completeCoordinates, setCompleteCoordinates] = useState<TabCoordinate[]>([]);
+
+    const isAllCoordinatesDefined = (coordinates: TabCoordinate[]): boolean => {
+        const numberOfTab = React.Children.count(tabElements);
+        const numberOfCoordinates = coordinates.length;
+
+        const everyCoordinatesDefined = isEveryDefined(coordinates);
+
+        return numberOfTab === numberOfCoordinates && everyCoordinatesDefined;
+    };
+
+    const updateCoordinate = (index: number, x: number, width: number) => {
+        incompleteCoordinatesRef.current[index] = { x1: x, x2: x + width };
+
+        if (isAllCoordinatesDefined(incompleteCoordinatesRef.current)) {
+            setCompleteCoordinates(incompleteCoordinatesRef.current);
+        }
+    };
+
+    return {
+        coordinates: completeCoordinates,
+        updateCoordinate,
+    };
+}

package/src/Tabs/useTabsWidth.ts

@@ -0,0 +1,20 @@
+import { useCallback, useState } from 'react';
+import { Dimensions, LayoutChangeEvent, ViewProps } from 'react-native';
+
+const assumeInitialWidth = (): number => Dimensions.get('window').width;
+
+const isIntegerPartEquals = (a: number, b: number) => Math.round(a) === Math.round(b);
+
+const isIntegerPartDifferent = (a: number, b: number) => !isIntegerPartEquals(a, b);
+
+export default function useTabsWidth(): [number, ViewProps['onLayout']] {
+    const [width, setWidth] = useState(assumeInitialWidth);
+
+    const onLayout = useCallback((e: LayoutChangeEvent) => {
+        const newWidth = e.nativeEvent.layout.width;
+
+        setWidth((prevWidth) => isIntegerPartDifferent(prevWidth, newWidth) ? newWidth : prevWidth);
+    }, []);
+
+    return [width, onLayout];
+}

package/src/Tooltip/Tooltip.tsx

@@ -1,18 +1,18 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Text, View, ViewProps } from 'react-native';
-import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 import type { WithTimingConfig } from 'react-native-reanimated';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { rgb } from '@fountain-ui/utils';
+import ButtonBase from '../ButtonBase';
 import { createFontStyle, css, useTheme } from '../styles';
 import { Close as CloseIcon } from '../internal/icons';
 import type TooltipProps from './TooltipProps';
 import UpArrow from './UpArrow';
 
-const defaultOpacity = 0.8;
+const DEFAULT_OPACITY = 0.8;
 const initialLayout = { width: 0, height: 0, x: 0, y: 0 };
 
-const animationTimingConfig: WithTimingConfig = { duration: 150 };
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };
 
 export default function Tooltip(props: TooltipProps) {
     const {
@@ -30,13 +30,13 @@ export default function Tooltip(props: TooltipProps) {
 
     const theme = useTheme();
 
-    const [layout, setLayout] = React.useState(initialLayout);
+    const [layout, setLayout] = useState(initialLayout);
 
     const scale = useSharedValue(0);
 
-    const tooltipAnimatedStyle = useAnimatedStyle(() => ({
+    const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ scale: scale.value }],
-    }));
+    }), []);
 
     const [r, g, b] = rgb(theme.palette.primary.main);
 
@@ -53,15 +53,15 @@ export default function Tooltip(props: TooltipProps) {
         overflow: visible ? undefined : 'hidden',
     };
 
-    React.useEffect(() => {
-        const nextValue = visible ? 1 : 0;
+    useEffect(() => {
+        const nextScaleValue = visible ? 1 : 0;
 
-        scale.value = withTiming(nextValue, animationTimingConfig);
+        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);
     }, [visible]);
 
     const touchableStyle: ViewProps['style'] = {
         alignItems: 'center',
-        backgroundColor: `rgba(${r}, ${g}, ${b}, ${defaultOpacity})`,
+        backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,
         borderRadius: theme.shape.roundness,
         flexDirection: 'row',
         padding: theme.spacing(2),
@@ -78,8 +78,8 @@ export default function Tooltip(props: TooltipProps) {
     ]);
 
     const buttonElem = (
-        <TouchableWithoutFeedback
-            disallowInterruption={true}
+        <ButtonBase
+            pressEffect={'none'}
             onPress={onClose}
         >
             <View style={css(touchableStyle)}>
@@ -95,14 +95,14 @@ export default function Tooltip(props: TooltipProps) {
                     height={20}
                 />
             </View>
-        </TouchableWithoutFeedback>
+        </ButtonBase>
     );
 
     const arrowElem = (
         <UpArrow
             upsideDown={placement === 'top'}
             fill={theme.palette.primary.main}
-            opacity={defaultOpacity}
+            opacity={DEFAULT_OPACITY}
         />
     );
 
@@ -113,7 +113,7 @@ export default function Tooltip(props: TooltipProps) {
             <Animated.View
                 onLayout={(event) => setLayout(event.nativeEvent.layout)}
                 style={[
-                    tooltipAnimatedStyle,
+                    animatedStyle,
                     tooltipLayoutStyle,
                     tooltipStyle,
                 ]}

package/src/animated/AnimatedPressable.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import Animated from 'react-native-reanimated';
+import { Animated } from 'react-native';
 import Pressable from '../Pressable';
 
-// @ts-ignore
 export default Animated.createAnimatedComponent(Pressable);

package/src/hooks/useCollapsibleAppBar.ts

@@ -1,5 +1,6 @@
-import React from 'react';
+import { useRef } from 'react';
 import { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
+import type { WithTimingConfig } from 'react-native-reanimated';
 import {
     runOnJS,
     useAnimatedScrollHandler,
@@ -45,7 +46,7 @@ const defaultOptions: Required<Options> = {
     keyboardDismissMode: 'none',
 };
 
-const ANIMATION_DURATION_MILLIS = 100;
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 100 };
 
 const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
 
@@ -62,7 +63,7 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
     const [appBarHeight, onAppBarLayout] = useHeight();
     const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();
 
-    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight);
+    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);
 
     const translateY = useSharedValue<number>(0);
     const lastTranslateY = useSharedValue<number>(0);
@@ -71,21 +72,38 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
     const elevationStyle = useElevationStyle(4);
     const animatedStyle = useAnimatedStyle(() => {
-        return Platform.OS === 'web' ? ({
-            transform: [{ translateY: translateY.value }],
-            boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,
-        }) : ({
-            transform: [{ translateY: translateY.value }],
-            elevation: overlapped.value ? elevationStyle?.elevation : 0,
-            shadowColor: elevationStyle?.shadowColor,
-            shadowOffset: elevationStyle?.shadowOffset,
-            shadowRadius: elevationStyle?.shadowRadius,
-            shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,
-        });
-    });
-
-    const indexRef = React.useRef<number>(0);
-    const offsetsRef = React.useRef<Array<number>>([]);
+        const transform = [{ translateY: translateY.value }];
+
+        if (Platform.OS === 'web') {
+            return {
+                transform,
+                boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,
+            };
+        }
+        if (Platform.OS === 'android') {
+            return {
+                transform,
+                elevation: overlapped.value ? elevationStyle?.elevation : 0,
+            };
+        }
+        if (Platform.OS === 'ios') {
+            return {
+                transform,
+                shadowColor: elevationStyle?.shadowColor,
+                shadowOffset: elevationStyle?.shadowOffset,
+                shadowRadius: elevationStyle?.shadowRadius,
+                shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,
+            };
+        }
+        return {};
+    }, [
+        /**
+         * FIXME: Consider add `elevationStyle` to dependencies.
+         */
+    ]);
+
+    const indexRef = useRef<number>(0);
+    const offsetsRef = useRef<Array<number>>([]);
 
     const onScrollViewChanged = (nextIndex: number) => {
         const prevIndex = indexRef.current;
@@ -105,9 +123,7 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
         // If next ScrollView's offset is too short, expand app bar.
         if (translateY.value < 0 && savedOffsetY < appBarHeight) {
-            translateY.value = withTiming(0, {
-                duration: ANIMATION_DURATION_MILLIS,
-            });
+            translateY.value = withTiming(0, ANIMATION_CONFIG);
         }
     };
 
@@ -136,15 +152,11 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
             } else {
                 if (offsetY > -maxTy) {
                     if (ty === 0) {
-                        translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
-                            duration: ANIMATION_DURATION_MILLIS,
-                        });
+                        translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), ANIMATION_CONFIG);
                     }
                 } else {
                     if (ty === maxTy) {
-                        translateY.value = withTiming(0, {
-                            duration: ANIMATION_DURATION_MILLIS,
-                        });
+                        translateY.value = withTiming(0, ANIMATION_CONFIG);
                     }
                 }
 
@@ -175,11 +187,9 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
             overlapped.value = offsetY + nextTranslateY > 0;
 
-            translateY.value = withTiming(nextTranslateY, {
-                duration: ANIMATION_DURATION_MILLIS,
-            });
+            translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);
         },
-    });
+    }, [keyboardDismissMode]);
 
     const hasCollapsible = collapsibleToolbarHeight > 0;